PDA

View Full Version : DDSmoothmenu Show/Hide



CGiBiN
07-28-2009, 03:34 PM
1) Script Title: DDSmoothmenu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm

3) Describe problem: I want to Hide / Show the DDSmoothmenu when using the external Navigaion.html with a Link. When someone klick on "Medizin" the Menu should be visible another klick should hide it again. But I dont get it work, that the classes will be over taken. On mouseover the Link who should be on the right side slided out doesnt work. Always the same problem: Mainlayout ok but on mouseover the LIs, ULs etc. are on the left side with about 2 px width.


I tried with the following:

<HEAD>
<script type="text/Javascript">
function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; }
} </script>

and
<script language="javascript">
<!--

var state = 'none';

function showhide(layer_ref) {

if (state == 'block') {
state = 'none';
}
else {
state = 'block';
}
if (document.all) { //IS IE 4 or 5 (or 6 beta)
eval( "document.all." + layer_ref + ".style.display = state");
}
if (document.layers) { //IS NETSCAPE 4 or below
document.layers[layer_ref].display = state;
}
if (document.getElementById &&!document.all) {
hza = document.getElementById(layer_ref);
hza.style.display = state;
}
}
//-->
</script>


<script type="text/javascript">
ddsmoothmenu.init({
mainmenuid: "smoothmenu-ajax",
orientation: 'v',
classname: 'ddsmoothmenu-v',
customtheme: ["#496571", "#FFFFFF"], //override default menu CSS background values["normal_background#1c5a80", "hover_background"]
contentsource: ["smoothcontainer", "nav.html"] //"markup" or ["container_id", "path_to_menu_file"]
})
</script></HEAD>

<BODY>

<!-- NAV#1 START -->

<a aiotitle="Klicken um die Medizin Rubrik zu sehen" href="javascript:togglecomments('smoothcontainer')">
<div>
<h2 align="center" id="Medizin">Medizin</h2>
<hr />
</div>
</a><br />
<div class="commenthidden" id="smoothcontainer">

<div >
<noscript>
Bitte aktivieren Sie Javascript, um die Navigation richtig anzuzeigen <a href="nav0.html">Navigation OHNE Layout -></a>
</noscript>
</div>
<div><a href="#Rubrikauswahl">Zur Rubrikauswahl</a></div>

<!-- NAV#1 END --></BODY>

Im not really good in JS, Im still learning but atm I just try to get that work :rolleyes:

I hope someone can help me.

Thanks in advance.

Link to the Navigation: DDSmoothmenu (http://www.strassen-homepage.info/strassenverzeichnis/CH/luzern/pilatusstrasse/ddsmoothmenu.php)

CGiBiN
07-28-2009, 08:52 PM
Hello again.

I think I made it! Now are just the slide in/out effect and shadows are missing. Can someone help me to get that work ?


.commentshown ul{
margin: 0;
padding: 0;
width: 170px;
list-style-type: none;
font: bold 12px Verdana;
padding-left:2px
border-bottom: 1px solid #ccc;
}

.commentshown ul li{
position:absolute;
width: 170px;
}

.commentshown ul li a{
display: block;
overflow: auto;
color: black;
padding: 2px;
text-decoration: none;
border-bottom: 1px solid #778;
border-right: 1px solid #778;
}

.commentshown ul li a:link, .commentshown ul li a:visited, .commentshown ul li a:active{
background: #414141;
color: white;
}


.commentshown ul li a.selected{
background: black;
color: black;
}

.commentshown ul li a:hover{
background: black;
color: black;
}

.commentshown ul li ul{
position: absolute;
width: 170px;
top: 0;
font-weight: normal;
visibility: hidden;
margin-left: 180px
}


/* Holly Hack for IE \*/
* html .commentshown ul li { float: left; height: 1%; }
* html .commentshown ul li a { height: 1%; }
/* End */

Thanks again!

Test URL: Smoothmenu Test (http://www.it-luzern.info/NAVTEST/ddsmoothmenu.php)


//EDIT
Another Problem: If someone klick on the Show/Hide link, I want to hide all other divs with the hide tag. Is that possible ? And if yes, how ? :)

Thanks in advance.