Results 1 to 7 of 7

Thread: nested side menu error

  1. #1
    Join Date
    Mar 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default nested side menu error

    1) Script Title: Nested Side Bar Menu

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

    3a) Describe problem: When i don't use all the menues(var menuids=["recmenu1","recmenu2","recmenu3","recmenu4","recmenu5","recmenu6","recmenu7"])
    I get an error on page. I load a diffren amount of menues all the time depending on how many days the user have chosen (maximum 7). is there a fix for that?

    3b)I also would like all the popout ul to hide on mousedown.so when the user click the button the menu goes back to normal. is there a way to do that?

    3c) is there a way to make only one leverbuttons longer then the other. I would like the last button on my menu to be longer. I've tryed
    .sidebarmenu ul li ul li ul{
    width:250px;
    }
    but that didn't work the first button showed right on the last ul but the onece that came after showed a big gap
    Last edited by Fia; 01-12-2010 at 12:22 PM.

  2. #2
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    I assume you're talking about this menu. There should be no limit as to the number of menus you can have on the same page beyond 7. Do you have a link to the problem page?

    As far as hiding the sub menus when they are clicked on, try adding the code in red to the existing script:

    Code:
    <script type="text/javascript">
    
    //Nested Side Bar Menu (Mar 20th, 09)
    //By Dynamic Drive: http://www.dynamicdrive.com/style/
    
    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 //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"
        }
        ultags[t].parentNode.onclick=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>
    DD Admin

  3. #3
    Join Date
    Mar 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi!

    it's compilcated I would have to explain to you how to get the menue upp(it's in swedish) and give you login. But the problem is that in the javascript i have put 7 menus in the array but sometime only 3 menus are used ect.
    var menuids=["recmenu1","recmenu2","recmenu3","recmenu4","recmenu5","recmenu6","recmenu7"]
    so when there are menues that are not used I get this error. It is also on the other pages where the no menue is not used.


    Meddelande: 'document.getElementById(...)' is null or not an object
    on this row
    var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")

    Closing the menue om click worked great,thank you.

    how about making the third ul level button longer then the first two, is that possible?

  4. #4
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    If the script is giving you errors because some of the menus defined inside your array are not present on the page, try adding the code in red to the existing script:

    Code:
    function initsidebarmenu(){
    for (var i=0; i<menuids.length; i++){
    	if (!document.getElementById(menuids[i]))
    		continue
      var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
    how about making the third ul level button longer then the first two, is that possible?
    By 3rd UL level button, do you mean the 3rd sub menu levels?
    DD Admin

  5. #5
    Join Date
    Mar 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Yes!
    I've tried this
    .sidebarmenu ul li ul li ul{
    width:250px;
    }

    and it works on the first menu that pops out but the next one showes a big gap(moves to much to the right) like it read the new width to offset or something.

    Thanks again for the last solution. I think it would be a good idea to put that in the original script. couldn't hurt

  6. #6
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    You might just try adding an inline style into the desired ULs to affect their widths separately from the global CSS's:

    Code:
    <div class="sidebarmenu">
    <ul id="sidebarmenu1">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Folder 1</a>
      <ul>
      <li><a href="#">Sub Item 1.1</a></li>
      <li><a href="#">Sub Item 1.2</a></li>
      </ul>
    </li>
    <li><a href="#">Item 3</a></li>
    
    <li><a href="#">Folder 2</a>
      <ul>
      <li><a href="#">Sub Item 2.1</a></li>
      <li><a href="#">Folder 2.1</a>
        <ul style="width:250px">
        <li><a href="#">Sub Item 2.1.1</a></li>
        <li><a href="#">Sub Item 2.1.2</a></li>
        <li><a href="#">Sub Item 2.1.3</a></li>
        <li><a href="#">Sub Item 2.1.4</a></li>
        </ul>
      </li>
    </ul>
    </li>
    <li><a href="#">Item 4</a></li>
    </ul>
    </div>
    DD Admin

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

    Default

    No didn't work. The first ul menue comes right but the the nex ul menue that are suppose to be longer showes up way to the right like it takes the new value of 250px and make the next button that long.

    Code:
    <div class="receptmenu">
    <ul id="recmenu1">
    <li><a href="#">Välj Recept 1 </a>
    <ul>
     <li><a href="#">Vegetariskt</a> 
    <ul style="width:250px;"> //This one come out ok!!!
    <li><a id="rec3" href="javascript:putrec(3,11);">fiarecept3</a></li>
    <li><a id="rec5" href="javascript:putrec(5,11);">testrecept1</a></li>
    </ul>
    </li>
    <li><a href="#">Vegan</a>
    <ul style="width:250px;"> //This one showes way out to the right!!
    <li><a id="rec10" href="javascript:putrec(10,11);">vego</a></li> 
    </ul>
    </li>
    It is probably not possible to do!

    Thanx alot for all your help,

    Fia
    Last edited by Fia; 01-20-2010 at 08:14 AM.

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
  •