Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,083
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Question Simple one level menu "tweeks"possible?

    The following script creates a simple working menu, but I would like to "tweek" it a bit.

    Two things I have tried (both commented out in red in the script below)

    1. Current the sub-menu aligns with the left margin of the main <ul> element.
    Is is possible to use the "left" position of the top row <li> elements to set the <div> element positions to align with the top row?
    Currently, I cannot figure out how to use the 'this' (info) attribute to get the parent's left position.

    2. Currently the menu changes the background color with the mouse hover. This is fine.
    Is it possible to set the background color of the last item selected while retaining the hover effect color?
    It should return to the original background color if a different item is selected (or deselected).
    In other words, the top row item would retain the background selected color only while the sub-menu is being displayed.

    I think the problem is in my understanding of the 'this' attribute passed to the function.
    Both of the above tweeks are not absolutely necessary, but I would like to add one or both just for the purpose of aesthetics.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <meta charset="utf-8" />
    <title> Simple Menu </title>
    
    <style type="text/css">
    .hide { display : none; }
    .show { display : block; border:1px solid black; width:200px; }
    
    #menu li { list-style-type:none; display:inline; cursor:pointer; }
    #menu li:hover { background-color:orange; }
    
    #menu div li { list-style-type:none; display: block; }
    #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" style="position:absolute; left:200px">
     <li onclick="showHide('Forums',this)">Forums</li>
     <li onclick="showHide('NSU',this)">NSU</li>
     <li onclick="showHide('Email',this)">Email</li>
    
     <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,info) {
      var sel = document.getElementById('menu').getElementsByTagName('div');
      for (var i=0; i<sel.length; i++) {
        if (sel[i].id != IDS) { sel[i].className = 'hide'; }
      }
      sel = document.getElementById(IDS);
      sel.className = (sel.className == 'hide') ? 'show' : 'hide'; 
    
    
    // Tweek #1:
    // I thought would be able to get 'left' value of 'this' (info) element to set the IDS position, but no go (???)
    //  var hpos = info.left;  alert(hpos);  // for testing purposes only
    //  sel.left= hpos+'px';
    
    // also thought as Tweek #2 (again trying to use 'this' (info) element:
    // following line does not "stick" background color as expected when top line item is clicked (???)
    //  if (sel.className == 'show') { info.style.backgroundColor='lightblue' }
    //                          else { info.style.backgroundColor='white'; }
    //  alert(info.style.backgroundColor);  // for testing purposes only
    
    
    }
    </script>
    </body>
    </html>

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,083
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    I believe I've come up with a solution for the 1st tweek.
    May not be the most optimal solution, so any comments or corrections are welcomed.

    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; }
    
    .menuLI { display:block; float:left; width:50px; }
    
    #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,info,wide) {
      var sel = document.getElementById('menu').getElementsByTagName('div');
      for (var i=0; i<sel.length; i++) {
        if (sel[i].id != IDS) { sel[i].className = 'hide'; }
      }
      sel = document.getElementById(IDS);
      sel.className = (sel.className == 'hide') ? 'show' : 'hide'; 
    
      sel.style.marginLeft = (wide*50)+'px';  // needs to match width value of .menuLI in style section
    
    
    // Tweek #1 could be improved if I could figure out how to return the 'width' of an element
    // in this case, the width setting of the .menuLI class
    
    
    // also thought as Tweek #2 (again trying to use 'this' [info] element):
    // following line does not "stick" background color as expected when top line item is clicked (???)
    //  if (sel.className == 'show') { info.style.backgroundColor='lightblue' }
    //                          else { info.style.backgroundColor='white'; }
    //  alert(info.style.backgroundColor);  // for testing purposes only
    
    }
    </script>
    </body>
    </html>
    Still looking into solution for the 2nd tweek.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,438
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    Does this do what you are after?
    Code:
    <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*50)+'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>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    jmrker (11-22-2012)

  • #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,083
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Thumbs up

    Quote Originally Posted by Old Pedant View Post
    Does this do what you are after?
    ...
    Very much so.
    I was not aware of the 'transparent' attribute.
    Pretty neat solution.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,438
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    "transparent" is actually the default background color for most (all?? not sure) elements. You seldom see it explicitly used, but it is one of the standard colors (along with "black", "white", "blue", "red", "green", and a handful of others, though most browsers accept the extended set of color names that IE introduced).
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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