DDSmoothmenu Show/Hide

**CGiBiN** · 07-28-2009, 03:34 PM

1) Script Title: DDSmoothmenu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...smoothmenu.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>

Code:

<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

Code:

<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>

Code:

<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>

Code:

<!-- 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

I hope someone can help me.

Thanks in advance.

Link to the Navigation: DDSmoothmenu

**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 ?

Code:

.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

//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.

Thread: DDSmoothmenu Show/Hide

Thread Tools

Search Thread

DDSmoothmenu Show/Hide

Made it but 2 other problems with the layout.

Bookmarks

Bookmarks

Posting Permissions