PDA

View Full Version : 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/csslibrary/item/nested_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.


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


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