Results 1 to 7 of 7

Thread: Nested Side Bar Menu

  1. #1
    Join Date
    Sep 2009
    Posts
    15
    Thanks
    1
    Thanked 1 Time in 1 Post

    Default Nested Side Bar Menu

    1) Script Title: Nested Side Bar Menu

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

    3) Describe problem: I need to shift my submenu a little to the left and below is there a way to do this? Do I do this in the css or in the js file?

    Thanks in advance.
    YoonMi

  2. #2
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,162
    Thanks
    263
    Thanked 690 Times in 678 Posts

    Default

    A link to your page would help to let us know the relevant details. Is your page setup exactly as the demo page? If not, we'll probably need to see the page.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  3. #3
    Join Date
    Sep 2009
    Posts
    15
    Thanks
    1
    Thanked 1 Time in 1 Post

    Default link is confidential

    I could pm you a link but it's a large company and it's on a private server.

    Well for the most part it is set up exactly, however the dropped down menu calls a separate include file.

    Is there a way to PM you the link?

    Thanks,
    YoonMi

  4. #4
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,162
    Thanks
    263
    Thanked 690 Times in 678 Posts

    Default

    I'm not sure of the answer to this, and others may need to see the link to know if they can help. You can wait to see if someone else volunteers or you can create a temporary page at an address that you can post here. Otherwise you may want to hire a designer who you can give access to your site to.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  5. #5
    Join Date
    Sep 2009
    Posts
    15
    Thanks
    1
    Thanked 1 Time in 1 Post

    Default

    Code:
    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"
        }
        }
      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)
    Can/How I remove offsetWidth+"px" on line 13 of the javascript?

    I removed the offsetWidth+"px" and it works in firefox/chrome doesn't work in ie (the entire drop-down functionality doesn't work)...
    Last edited by yoonmi; 07-06-2011 at 03:28 PM. Reason: changed line number

  6. #6
    Join Date
    Sep 2009
    Posts
    15
    Thanks
    1
    Thanked 1 Time in 1 Post

    Default

    otherwise I tried to use a set a margin-left: -100px;

    .sidebarmenu ul li ul{

    in the css but that doesn't work either. I can set a margin-left in my ul directly but it shows up differently on ie, and moz firefox / chrome.

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,991
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    The ul and li elements are difficult to style for position/margin/padding (that sort of thing) cross browser. Whenever possible, use another element. In this case we may use the a tag. Additions (two places) highlighted:

    Code:
     . . . lor: black;
    }
    
    /*Sub level menu items */
    .sidebarmenu ul li ul{
    position: absolute;
    width: 170px; /*Sub Menu Items width */
    top: 0;
    visibility: hidden;
    z-index: 2;
    }
    
    .sidebarmenu ul li ul a {
    margin-left: -30px;
    }
    
    .sidebarmenu a.subfolderstyle{
    background: url(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 */
    
    </style>
    That worked out cross browser here. I imagine you can use just about any (within reason) margin there. Notice the added z-index. That's needed so that the sub-items aren't covered by their parent's siblings. However, in IE 7 this isn't enough. So we have to add extra z-index measures in the script here. Additions (two places) highlighted:

    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";
        this.style.zIndex = 2;
        }
        ultags[t].parentNode.onmouseout=function(){
        this.getElementsByTagName("ul")[0].style.display="none";
        this.style.zIndex = '';
        }
        }
      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>
    Full updated demo code:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
    
    /*Credits: Dynamic Drive CSS Library */
    /*URL: http://www.dynamicdrive.com/style/ */
    
    .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;
    }
     
    .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: 2;
    }
    
    .sidebarmenu ul li ul a {
    margin-left: -30px;
    }
    
    .sidebarmenu a.subfolderstyle{
    background: url(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 */
    
    </style>
    
    <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";
        this.style.zIndex = 2;
        }
        ultags[t].parentNode.onmouseout=function(){
        this.getElementsByTagName("ul")[0].style.display="none";
        this.style.zIndex = '';
        }
        }
      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 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>
        <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>
    
    </body>
    </html>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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
  •