Crear menú con jQuery

Para empezar, necesitamos definir nuestro menú como una jerarquía. Tenemos que elaborar la estructura, que es básicamente un conjunto de links ordenados por listas:

<ul id="cssdropdown">
  <li class="headlink">
   <a href="mine.html?search_engines">Search Engines</a>
    <ul>
     <li><a href="http://google.com/">Google</a></li>
     <li><a href="http://yahoo.com/">Yahoo</a></li>
     <li><a href="http://live.com/">Live Search</a></li>
    </ul>
    </li>
     <li class="headlink">
     <a href="mine.html?shopping">Shopping</a>
           
<ul>
     <li><a href="http://amazon.com/">Amazon</a></li>
     <li><a href="http://ebay.com/">eBay</a></li>
     <li><a href="http://craigslist.com/">CraigsList</a></li>
    </ul>
   </li>
  </ul>

Deberia quedarte algo así:

Basic Unordered List of Links

Creando las listas del menú

Ahora que ya tenemos la estructura básica de nuestro menú, vamos a aplicar algunas técnicas básicas con el uso de CSS. Vamos a utilizar la subclase :hover lo que permitira mostrar el menú cuando el mouse esté encima del link

Entonces, la parte de CSS quedaría escrita así:

         li.headlink ul { display: none; }
         li.headlink:hover ul { display: block; }

Al aplicar el código nuestro menú quedaría algo así:

The Basic Styling Applied to the Unordered List of Links

Los problemas con Internet Explorer

Desafortunadamente, mientras utilizamos :hover para ser más elegante, no sirve para IE. Por esta razón, un poco de Javascript es requerido para poder limpiar este problema. Lo que vamos a hacer es agregar un comportamiento o evento onmouseover para que funcione nuestro control:

   window.onload = function()   {
    var lis = document.getElementsByTagName('li');
    for(i = 0; i < lis.length; i++)
    {
     var li = lis[i];
     if (li.className == 'headlink')
     {
      li.onmouseover = function() { this.getElementsByTagName('ul').item(0).style.display = 'block'; }      li.onmouseout = function() { this.getElementsByTagName('ul').item(0).style.display = 'none'; }     }    }   }

Usando jQuery el trabajo de código se reduce mucho:

   $(document).ready(function(){
    $('li.headlink').hover(
     function() { $('ul', this).css('display', 'block'); },
     function() { $('ul', this).css('display', 'none'); });
   });

Juntando todo

Ya tenemos todo nuestro menú, tenemos que asegurarnos que los enlaces o el código esté bien escrito, una vez guardado se podrá ver algo parecido a esto: Standard Styling on Dropdown Menu