Question

Hi I’m new to JavaScript and I want to code a very simple expanding submenu.

<div id="submenu">
  <ul>
   <li>
     Something
   </li>
   <li>
     Another
   </li>
 </ul>
 <div id="submenu-1" class="submenu-options">
  <ul>
   <li>Something-sub</li>
   <li>Something-sub</li>
   <li>Something-sub</li>
  </ul>
 </div>
 <div id="submenu-2" class="submenu-options">
  <ul>
   <li>Another-sub</li>
   <li>Another-sub</li>
   <li>Another-sub</li>
  </ul>
 </div>
</div>

To be more specific, if I hover over something I want the something submenu displayed if the mouse leaves I want it to be hidden again…
I know it has been asked a lot and there are many ways to do this but Google brought up too many unsatisfying answers.
I hope you can spare 10 minutes to help me out of my misery

Regards and thank you!

Answer 1

<div id="submenu">
  <ul>
   <li id="1">
     Something
   </li>
   <li id="2">
     Another
   </li>
 </ul>
 <div id="submenu-1" class="submenu-options">
  <ul>
   <li>Something-sub</li>
   <li>Something-sub</li>
   <li>Something-sub</li>
  </ul>
 </div>
 <div id="submenu-2" class="submenu-options">
  <ul>
   <li>Another-sub</li>
   <li>Another-sub</li>
   <li>Another-sub</li>
  </ul>
 </div>
</div>

if you are not using any library then you need to bind it something like this:

 var menuText;

  window.onload = function()
  {

     menuText= document.getElementById("1");
     menuText.onfocus = menuFocusHandler;
     menuText.onblur = menuBlurHandler;
  }

function menuFocusHandler()
{
document.getElementById("submenu-1").style.display="inline";
}

function menuBlurHandler()
{
document.getElementById("submenu-1").style.display="none";
}

or you can do this nicely and easily using certain javascript libraries that have APIs to do this easily.. some of these libraries are Jquery (the most popular one), Sencha etc.

Some of these libraries have extensions that have menu implementation etc.