www.webdeveloper.com
Results 1 to 2 of 2

Thread: Display Menu List on IE9

  1. #1
    Join Date
    Sep 2006
    Posts
    192

    Display Menu List on IE9

    To simplize my question, this is what I basically want to do:

    Display a menu bar which contains: ABC | XYZ | HELP

    When the HELP menu gets the focus, it will display two items, like:

    HELP
    Item One
    Item Two

    The is the codes I put into the JSP:

    <ul id="topMenu_ul" style="border-top:none; border-bottom:none;">
    <li id="topMenu_home" >ABC</li>
    <li id="topMenu_home" >|</li>
    <li id="topMenu_home" >XYZ</li>
    <li id="topMenu_home" >|</li>
    <li id="topMenu" >
    Help
    <iframe id="topMenu_iframe"></iframe>
    <ul id="topMenu_ul" style="width:12em">
    <li id="topMenu_item1"> <a href="#">Item One Here</a> </li>
    <li id="topMenu_item2"><a href="#">Item Two Here</a></li>
    </ul>
    </li>
    </ul>


    And This is the CSS which made it happen:

    /* all lists */
    #topMenu_ul, #topMenu_ul ul {
    float:left;
    padding: 0;
    margin:0 0 0 0em;
    list-style: none;
    Then, what is my question?
    line-height: 1em;
    border: solid #394665;
    border-width: 1px 0;
    font-weight: bold;
    z-index: 200;
    }

    #topMenu_ul iframe{
    z-index: 199;
    border:0;
    padding:0;
    display:none;
    position:absolute;
    }

    /* first-level list */
    #topMenu_ul a {
    display: block;
    width: 6.4em;
    text-decoration: none;
    color: #FFFFFF;
    padding: 1px 3px 5px 5px;
    Then, what is my question?
    height: 1em;
    }

    /* faded blue */
    #topMenu_ul a:hover{
    background:#5C75AA;
    }

    /* all list items */
    #topMenu_ul li {
    float: left;
    padding:0;
    margin:0;
    }

    #topMenu_ul li ul { /* second-level lists */
    position: absolute;
    width: 8.3em;
    left: -1999px; /* more accessible than display: none */
    background: #eee;
    Then, what is my question?
    height: auto;
    margin: 0;
    border-width: 1px;
    Then, what is my question?
    font-weight: normal;
    font-size: 12px;
    }

    #topMenu_ul li ul li a{
    color: #394664;
    width: 100%;
    padding:3px 6px;
    white-space:nowrap;
    }

    #topMenu_ul li:hover ul, #topMenu_ul li li:hover ul, #topMenu_ul li.navhover ul, #topMenu_ul li li.navhover ul{ /* lists nested under hovered list items */
    left: auto;
    }

    The above codes were tested on Firefox and it worked.

    However, when I tested it on Internet Explorer 9, the list under the HELP menu failed to show up.

    How can I make the items under the HELP menu show up on IE9?


    Thanks

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,350

    Lightbulb

    This is a much simplified version of your code with the benefit of working in IE9 as well as FF and Chrome.
    You can continue to modify the CSS to change colors, positions, widths, etc., but it could be a re-start for your needs.
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <meta charset="utf-8" />
    <title> Simple Menu </title>
    
    <style type="text/css">
    .hide { display:none; }
    .show { display:block; width:200px; border:1px solid black; }
    a { text-decoration:none; }
    
    .menuLI { display:block; float:left; width:70px; }
    
    #menu li { list-style-type:none; cursor:pointer; }
    #menu li:hover { background-color:orange; }
    
    #menu div li { list-style-type:none; display:block; clear:both; }
    #menu div li:hover { background-color:orange; }
    
    #Forums div { display:none }
    #NSU div { display:none; }
    #Email div { display:none;}
    </style>
    
    </head>
    <body>
    <ul id="menu">
     <li onclick="showHide('Forums',this,0)" class="menuLI">Forums</li>
     <li onclick="showHide('NSU',this,1)" class="menuLI">NSU</li>
     <li onclick="showHide('Email',this,2)" class="menuLI">Email</li>
     <br style="clear:both" />
    
     <div id="Forums" class="hide">
      <li> <a href="http://www.webdeveloper.com">Webdeveloper</a></li>
      <li> <a href="http://www.codingforums.com">Coding Forums</a></li>
      <li> <a href="http://www.dreamincode.net">Dream-In-Code</a></li>
     </div>
     <div id="NSU" class="hide">
      <li> University </li>
      <li> HPD </li>
      <li> Optometry </li>
      <li> Library </li>
     </div>
     <div id="Email" class="hide">
      <li> Exchange </li>
      <li> Gmail </li>
      <li> Bellsouth </li>
     </div>
    </ul>
    
    <script type="text/javascript">
    function showHide(IDS,curLI,wide) {
      var sel = document.getElementById('menu').getElementsByTagName('div');
      var lis = document.getElementById('menu').getElementsByTagName('li');
      for (var i=0; i<sel.length; i++) {
        if (sel[i].id != IDS) { sel[i].className = 'hide'; }
        lis[i].style.backgroundColor = "transparent";
      }
      sel = document.getElementById(IDS);
      sel.style.marginLeft = (wide*70)+'px';  // needs to match width value of .menuLI in style section
    
      if ( sel.className == "hide" ) {
          sel.className = 'show';
          curLI.style.backgroundColor = "orange";
      } else {
          sel.className = 'hide';
          curLI.style.backgroundColor = "transparent";
      }
    }
    </script>
    </body>
    </html>
    If of no use to you, then just ignore the post.

    BTW, it is a good idea to put your script between [ code] and [ /code] tags (without the spaces)
    to make it easier to read your code as well as retain the formatting structure.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles