Results 1 to 7 of 7

Thread: nested side bar menu problems with submenu

  1. #1
    Join Date
    Feb 2011
    Posts
    3
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default nested side bar menu problems with submenu

    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.

  2. #2
    Join Date
    Jan 2008
    Posts
    4,167
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    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>
    Jeremy | jfein.net

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

    voo (02-08-2011)

  4. #3
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    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

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

    voo (02-08-2011)

  6. #4
    Join Date
    Feb 2011
    Posts
    3
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

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

  7. #5
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    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
    Last edited by azoomer; 02-08-2011 at 04:56 PM.

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

    voo (02-08-2011)

  9. #6
    Join Date
    Feb 2011
    Posts
    3
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    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

  10. #7
    Join Date
    Apr 2007
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •