Advanced Search

Results 1 to 4 of 4

Thread: DD: Nested Submenu - Submenu not appearing on IE 6 operating system

  1. #1
    Join Date
    Dec 2009
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default DD: Nested Submenu - Submenu not appearing on IE 6 operating system

    1) Script Title: Nested Submenu

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

    3) Describe problem: Co-worker was viewing website, using IE 6 and menu items with "submenu" items were not appearing. Anyone know what I am missing?

    Also too, I am working on placing the source information on my pages - - where exactly should I place it? I have placed in on my main html page with the <!-- --> around it and it will not stay put. Tends to disappear on me.

    Also, I would like the submenu to appear more to the left of the main menu, but, when I change the code, based on the operating systems other users are opening up this page with, either the submenu doesn't appear or it is way off in the middle of the page. Any help with these items would be GREATLY appreciated?

    The menu I am using is based off of this menu. Would it be better if I scrap my creation and use this one with the javascript? I have never worked with that before - - anyhelp as to how to get this in my document to work would be great too! Thank you!
    Here is the site. www.fairmont.org. If you need to see the code or css sheets, please let me know. Thank you!

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,687
    Thanks
    43
    Thanked 3,129 Times in 3,095 Posts
    Blog Entries
    12

    Default

    There are a number of problems, solving the first causes others. First, you've left out the script that goes with this menu:

    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"
        }
        }
      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>
    This should go as the last thing before your closing </head> tag.

    The primary UL element needs this id, and the div with the id 'menucontainer' should have no id, the one with the id 'menucontainer ul' should be 'menucontainer' (addition/changes highlighted):

    Code:
    <!-- ============ COLUMNS SECTION ============== -->
    <!-- ============ Left Column ============== --><tr>
    <td class="left" align="center" width="220">
    <div>
    <div id="menucontainer">
    <ul id="sidebarmenu1">
    <li><a class="button" href="docs/residents.htm">Residents</a>
    </li>
    <li><a href="docs/visitors.htm">Visitors</a>
    </li>
    <li><a href="docs/busin . . .
    Next, in your stylesheet, remove position: relative from #menucontainer:

    Code:
    #menucontainer {
      padding: 5px 6px 5px 5px;
    
      text-decoration: none;
      list-style-type: none;
      background-color: #b9b9b9;
    }
    Remove the margin-left from #menucontainer ul ul and set its width to 200px:

    Code:
    #menucontainer ul ul {
      visibility: hidden;
      position: absolute;
      margin-top: -2em;
      width: 200px;
    
      left: 0;
      z-index: 2;
    }
    That's pretty much it except that your tour book will be off center. So add this to the stylesheet:

    Code:
    #tourbookdiv {
      margin: 0 auto;
    }
    - John
    ________________________

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

  3. #3
    Join Date
    Dec 2009
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    What do you mean by tourbook?
    Thank you for your help. I am going to try all of that right now. Thank you!

  4. #4
    Join Date
    Dec 2009
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Sorry - - - idiot me - - - - I guess I call that the video link on our end. Thank you so much for your help!!!! It is working on my end.

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
  •