nested side bar menu problems with submenu

**voo** · 02-04-2011, 07:02 PM

1) Script Title: Nested Side Bar Menu

2) Script URL (on DD): http://www.dynamicdrive.com/style/cs...side_bar_menu/

3) Describe problem: I have problems getting this menu to work on my website. So far i have the top menu working but when i want to add a submenu it doesnt work. i dont get any submenu showing.
i have the menu on this side: http://heartscs.org/navi.htm
the CSS file is an additional file.

**Nile** · 02-04-2011, 08:27 PM

In your CSS file, move the highlighted to under

<link rel="stylesheet" type="text/css" href="CSS/sidebarmenu.css" />

in the html file.

Code:

.sidebarmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: bold 13px Verdana;
width: 180px; /* Main Menu Item widths */
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
overflow: hidden;
position: relative;
}
 
.sidebarmenu ul li{
position: relative;
}

/* Top level menu links style */
.sidebarmenu ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: white;
text-decoration: none;
padding: 6px;
border-bottom: 1px solid #778;
border-right: 1px solid #778;
}

.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{
background-color: #012D58; /*background of tabs (default state)*/
}

.sidebarmenu ul li a:visited{
color: white;
}

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

/*Sub level menu items */
.sidebarmenu ul li ul {
position: absolute;
width: 170px; /*Sub Menu Items width */
top: 0;
visibility: hidden;
z-index: 100;
overflow: hidden;
left: 170px;
}

.sidebarmenu a.subfolderstyle{
background: url("images/right.gif") no-repeat 97% 50%;
}

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

<script type="text/javascript">

var menuids=["sidebarmenu1"] /* Enter id(s) of each Side Bar Menu's main UL, separated by commas */

function initsidebarmenu(){
for (var i=0; i<menuids.length; i++){
  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
    for (var t=0; t<ultags.length; t++){
    ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle"
  if (ultags[t].parentNode.parentNode.id==menuids[i]) /* if this is a first level submenu */
   ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" /* dynamically position first level submenus to be width of main menu item */
  else if /* else if this is a sub level submenu (ul) */
    ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" /* position menu to the right of menu item that activated it */
    ultags[t].parentNode.onmouseover=function(){
    this.getElementsByTagName("ul")[0].style.display="block"
    }
    ultags[t].parentNode.onmouseout=function(){
    this.getElementsByTagName("ul")[0].style.display="none"
    }
    }
  for (var t=ultags.length-1; t>-1; t--){ /* loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars */
  ultags[t].style.visibility="visible"
  ultags[t].style.display="none"
  }
  }
}

if (window.addEventListener)
window.addEventListener("load", initsidebarmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", initsidebarmenu)

</script>

**azoomer** · 02-04-2011, 08:30 PM

You have the javascript to the menu in the "sidebarmenu.css" file, and that will never work.
Put the javescript in the head section of the html document instead, below the link to the css file.

edit: oh sorry for cross posting

**voo** · 02-08-2011, 03:52 PM

that doesnt solve the problem... there still no submenus visible when i go with my mouse over the navigation...
i hope u can help me with that...

**azoomer** · 02-08-2011, 04:48 PM

Hi, if you delete the reference to submenu2 and submenu3 and the id's as well, it will work.
Unfortunately I can't explain why, but it works on my pc when i delete what is highlighted below.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>HeartSCS.org - Navigation</title>
    <meta name="keywords" content="Homepage, Website, Krapohl, Senior, Center, Mt Morris, Michigan, USA, Genesee County, Flint, Activities, Fun, Day, Events" />
    <meta name="description" content="This is the Homepage of the Krapohl Senior Center, Mt. Morris, Michigan, United States of America." />
    <meta name="author" content="Krapohl Senior Center" />
    <meta name="language" content="en-us" />
    <base target="content" />

	<link rel="stylesheet" type="text/css" href="CSS/sidebarmenu.css" />
	
<script type="text/javascript">

//Nested Side Bar Menu (Mar 20th, 09)
//By Dynamic Drive: http://www.dynamicdrive.com/style/

var menuids=["sidebarmenu1, sidebarmenu2, sidebarmenu3"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas

function initsidebarmenu(){
for (var i=0; i<menuids.length; i++){
  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
    for (var t=0; t<ultags.length; t++){
    ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle"
  if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
   ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
  else //else if this is a sub level submenu (ul)
    ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
    ultags[t].parentNode.onmouseover=function(){
    this.getElementsByTagName("ul")[0].style.display="block"
    }
    ultags[t].parentNode.onmouseout=function(){
    this.getElementsByTagName("ul")[0].style.display="none"
    }
    }
  for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
  ultags[t].style.visibility="visible"
  ultags[t].style.display="none"
  }
  }
}

if (window.addEventListener)
window.addEventListener("load", initsidebarmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", initsidebarmenu)

</script>

</head>

<body>
	<div class="sidebarmenu">
		<ul id="sidebarmenu1">
		<li><a class=" subfolderstyle" href="#">Physical</a>
			<ul>

				<li><a href="#">Nutrition</a></li>
				<li><a href="#">hello</a></li>
			</ul>
		</li>
		<li><a href="#">Intellectual</a></li>
		<li><a class=" subfolderstyle" href="#">Social</a>
			<ul>

				<li><a href="#">hello</a></li>
			</ul>
		</li>
		<li><a href="#">Emotional</a></li>
		<li><a href="#">Enviromental</a></li>
		<li><a href="#">Spiritual</a>
			<ul>

				<li><a href="#">hello</a></li>
			</ul>
		</li>
		</ul>
		<ul id="sidebarmenu2">
		<li><a href="#">Services</a></li>
		<li><a href="#">Financial</a>

			<ul>
				<a href="#">hello</a>
			</ul>
		</li>
		</ul>
		<ul id="sidebarmenu3">
			<li><a href="#">Who we are</a></li>
			<li><a href="#">Contact us</a></li>

			<li><a href="#">Mission</a></li>
			<li><a href="#">Wellness</a></li>
		</ul>
	</div>
	
    <p><br></p>
	<div id="nav_weather">
        <a href="http://www.wunderground.com/US/MI/Mount_Morris.html?bannertypeclick=infoboxtr"><img src="http://weathersticker.wunderground.com/weathersticker/infoboxtr_both/language/www/US/MI/Mount_Morris.gif" alt="Click for Mount Morris, Michigan Forecast" border="0" height="108" width="144" /></a>

    </div>

</body>
</html>

Hope that will work

**voo** · 02-08-2011, 05:32 PM

mhm thanks

it works now... i cant explain why it wont work with different ids but i just seperated them with a <br>... that will work too...
thanks for your help

**gknight** · 06-16-2011, 02:34 PM

THe reason that you are having the problems with the ID's in the UL tags is actually due to the improper javascript...........

change:
var menuids=["sidebarmenu1, sidebarmenu2, sidebarmenu3"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas

to:
var menuids=["sidebarmenu1","sidebarmenu2","sidebarmenu3"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas

Thread: nested side bar menu problems with submenu

Thread Tools

Search Thread

nested side bar menu problems with submenu

The Following User Says Thank You to Nile For This Useful Post:

The Following User Says Thank You to azoomer For This Useful Post:

The Following User Says Thank You to azoomer For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions