Crea un menú desplegable para tu web con CSS y Jquery

En este tutorial verás como armar un menú desplegable para pagina web con una tabla como elemento desplegado, con ayuda del CSS para darle forma a los elementos de la table y Jquery que hace toda la magia de permitir tablas y otros elementos HTML en el menú desplegable.

Lo interesante de este código es que también nos permite insertar imágenes dentro del menú, puedes compartir columnas y filas, colocar imagen al centro, etc, todo en aras de mejorar la estética de la pagina web.

Tutorial Megamenu

 Megamenu de GeekTantra,  version 2 del Megamenu ya con correcciones y es la version usada para el siguiente  menú.

Tambien puedes insertar videos de youtube dentro del menu desplegable:

y por supuesto las tablas:

Para que todo funcione primero debes llamar las librerias necesarias esto lo hacemnos en el HEAD de nuestro documento html, no omito manifestar que no estoy utilizando HTML5.

Luego en el BODY escribes todo el codigo que vayas a utilizar para el menu:

<table width="980" border="0" align="center" cellpadding="0" cellspacing="0">

<tr>

<td class="logotipo"><table width="980" border="0" cellspacing="0" cellpadding="0">

<tr>

<td width="620" height="75">&nbsp;</td>

<td class="buscador">&nbsp;</td>

</tr>

<tr>

<td colspan="2" style="padding-left:100px;">

<ul class="megamenu">

<li>

<a href="http://www.photoshopytutoriales.com">inicio</a>

</li>

<li>

<a href="javascript:void(0)">Diseño de Páginas web</a>

</li>

<li>

<a href="javascript:void(0)">Schedule</a>

<div style="width: 300px;">

<table width="300" border="0" cellspacing="3" cellpadding="2" id="tabular-content">

<tr>

<td>Sunday</td>

<td><a href="sd-sunday-aa.html" class="linkcontenidodias">AA</a> - <a href="sd-sunday-a.html" class="linkcontenidodias">A</a> - <a href="sd-sunday-ba.html" class="linkcontenidodias">BA</a> - <a href="sd-sunday-bc.html" class="linkcontenidodias">BC</a> - <a href="sd-sunday-c.html" class="linkcontenidodias">C</a> - <a href="sd-sunday-d.html" class="linkcontenidodias">D</a></td>

</tr>

<tr>

<td>Monday</td>

<td><a href="sd-monday-aa.html" class="linkcontenidodias">AA</a> - <a href="sd-monday-a.html" class="linkcontenidodias">A</a> - <a href="sd-monday-ba.html" class="linkcontenidodias">BA</a> - <a href="sd-monday-bc.html" class="linkcontenidodias">BC</a> - <a href="sd-monday-c.html" class="linkcontenidodias">C</a> - <a href="sd-monday-d.html" class="linkcontenidodias">D</a></td>

</tr>

<tr>

<td>Tuesday</td>

<td><a href="sd-tuesday-aa.html" class="linkcontenidodias">AA</a> - <a href="sd-tuesday-a.html" class="linkcontenidodias">A</a> - <a href="sd-tuesday-ba.html" class="linkcontenidodias">BA</a> - <a href="sd-tuesday-bc.html" class="linkcontenidodias">BC</a> - <a href="sd-tuesday-c.html" class="linkcontenidodias">C</a> - <a href="sd-tuesday-d.html" class="linkcontenidodias">D</a></td>

</tr>

<tr>

<td>Wednesday</td>

<td><a href="sd-wdn-aa.html" class="linkcontenidodias">AA</a> - <a href="sd-wdn-a.html" class="linkcontenidodias">A</a> - <a href="sd-wdn-ba.html" class="linkcontenidodias">BA</a> - <a href="sd-wdn-bc.html" class="linkcontenidodias">BC</a> - <a href="sd-wdn-c.html" class="linkcontenidodias">C</a> - <a href="sd-wdn-d.html" class="linkcontenidodias">D</a></td>

</tr>

<tr>

<td>Friday</td>

<td><a href="sd-friday-aa.html" class="linkcontenidodias">AA</a> - <a href="sd-friday-a.html" class="linkcontenidodias">A</a> - <a href="sd-friday-ba.html" class="linkcontenidodias">BA</a> - <a href="sd-friday-bc.html" class="linkcontenidodias">BC</a> - <a href="sd-friday-c.html" class="linkcontenidodias">C</a> - <a href="sd-friday-d.html" class="linkcontenidodias">D</a></td>

</tr>

<tr>

<td>Saturday</td>

<td><a href="sd-saturday-aa.html" class="linkcontenidodias">AA</a> - <a href="sd-saturday-a.html" class="linkcontenidodias">A</a> - <a href="sd-saturday-ba.html" class="linkcontenidodias">BA</a> - <a href="sd-saturday-bc.html" class="linkcontenidodias">BC</a> - <a href="sd-saturday-c.html" class="linkcontenidodias">C</a> - <a href="sd-saturday-d.html" class="linkcontenidodias">D</a></td>

</tr>

</table>

</div>

</li>

<li>

<a href="javascript:void(0)">Standings</a>

<div style="width: 120px;">

<table width="120" border="0" cellspacing="3" cellpadding="2" id="tabular-content">

<tr>

<td><a href="standings-sunday.html" class="linkcontenidodias">Sunday</a></td>

</tr>

<tr>

<td><a href="standings-monday.html" class="linkcontenidodias">Monday</a></td>

</tr>

<tr>

<td><a href="standings-tuesday.html" class="linkcontenidodias">Tuesday</a></td>

</tr>

<tr>

<td><a href="standings-wednesday.html" class="linkcontenidodias">Wednesday</a></td>

</tr>

<tr>

<td><a href="standings-friday.html" class="linkcontenidodias">Friday</a></td>

</tr>

<tr>

<td><a href="standings-saturday.html" class="linkcontenidodias">Saturday</a></td>

</tr>

</table>

</div>

</li>

<li>

<a href="javascript:void(0)">Stats</a>

<div style="width: 300px;">

<table width="300" border="0" cellspacing="3" cellpadding="2" id="tabular-content">

<tr>

<td>Sunday</td>

<td><a href="stats-sunday-aa.html" class="linkcontenidodias">AA</a> - <a href="stats-sunday-a.html" class="linkcontenidodias">A</a> - <a href="stats-sunday-ba.html" class="linkcontenidodias">BA</a> - <a href="stats-sunday-bc.html" class="linkcontenidodias">BC</a> - <a href="stats-sunday-c.html" class="linkcontenidodias">C</a> - <a href="stats-sunday-d.html" class="linkcontenidodias">D</a></td>

</tr>

<tr>

<td>Monday</td>

<td><a href="stats-sunday-aa.html" class="linkcontenidodias">AA</a> - <a href="stats-sunday-a.html" class="linkcontenidodias">A</a> - <a href="stats-sunday-ba.html" class="linkcontenidodias">BA</a> - <a href="stats-sunday-bc.html" class="linkcontenidodias">BC</a> - <a href="stats-sunday-c.html" class="linkcontenidodias">C</a> - <a href="stats-sunday-d.html" class="linkcontenidodias">D</a></td>

</tr>

<tr>

<td>Tuesday</td>

<td><a href="stats-tuesday-aa.html" class="linkcontenidodias">AA</a> - <a href="stats-tuesday-a.html" class="linkcontenidodias">A</a> - <a href="stats-tuesday-ba.html" class="linkcontenidodias">BA</a> - <a href="stats-tuesday-bc.html" class="linkcontenidodias">BC</a> - <a href="stats-tuesday-c.html" class="linkcontenidodias">C</a> - <a href="stats-tuesday-d.html" class="linkcontenidodias">D</a></td>

</tr>

<tr>

<td>Wednesday</td>

<td><a href="stats-wed-aa.html" class="linkcontenidodias">AA</a> - <a href="stats-wed-a.html" class="linkcontenidodias">A</a> - <a href="stats-wed-ba.html" class="linkcontenidodias">BA</a> - <a href="stats-wed-bc.html" class="linkcontenidodias">BC</a> - <a href="stats-wed-c.html" class="linkcontenidodias">C</a> - <a href="stats-wed-d.html" class="linkcontenidodias">D</a></td>

</tr>

<tr>

<td>Friday</td>

<td><a href="stats-friday-aa.html" class="linkcontenidodias">AA</a> - <a href="stats-friday-a.html" class="linkcontenidodias">A</a> - <a href="stats-friday-ba.html" class="linkcontenidodias">BA</a> - <a href="stats-friday-bc.html" class="linkcontenidodias">BC</a> - <a href="stats-friday-c.html" class="linkcontenidodias">C</a> - <a href="stats-friday-d.html" class="linkcontenidodias">D</a></td>

</tr>

<tr>

<td>Saturday</td>

<td><a href="stats-saturday-aa.html" class="linkcontenidodias">AA</a> - <a href="stats-saturday-a.html" class="linkcontenidodias">A</a> - <a href="stats-saturday-ba.html" class="linkcontenidodias">BA</a> - <a href="stats-saturday-bc.html" class="linkcontenidodias">BC</a> - <a href="stats-saturday-c.html" class="linkcontenidodias">C</a> - <a href="stats-saturday-d.html" class="linkcontenidodias">D</a></td>

</tr>

</table>

</div>

</li>

<li>

<a href="javascript:void(0)">Teams</a>

<div style="width: 300px;">

<table width="300" border="0" cellspacing="3" cellpadding="2" id="tabular-content">

<tr>

<td>Sunday</td>

<td><a href="teams-sunday-aa.html" class="linkcontenidodias">AA</a> - <a href="teams-sunday-a.html" class="linkcontenidodias">A</a> - <a href="teams-sunday-ba.html" class="linkcontenidodias">BA</a> - <a href="teams-sunday-bc.html" class="linkcontenidodias">BC</a> - <a href="teams-sunday-c.html" class="linkcontenidodias">C</a> - <a href="teams-sunday-d.html" class="linkcontenidodias">D</a></td>

</tr>

<tr>

<td>Monday</td>

<td><a href="teams-monday-aa.html" class="linkcontenidodias">AA</a> - <a href="teams-monday-a.html" class="linkcontenidodias">A</a> - <a href="teams-monday-ba.html" class="linkcontenidodias">BA</a> - <a href="teams-monday-bc.html" class="linkcontenidodias">BC</a> - <a href="teams-monday-c.html" class="linkcontenidodias">C</a> - <a href="teams-monday-d.html" class="linkcontenidodias">D</a></td>

</tr>

<tr>

<td>Tuesday</td>

<td><a href="teams-tuesday-aa.html" class="linkcontenidodias">AA</a> - <a href="teams-tuesday-a.html" class="linkcontenidodias">A</a> - <a href="teams-tuesday-ba.html" class="linkcontenidodias">BA</a> - <a href="teams-tuesday-bc.html" class="linkcontenidodias">BC</a> - <a href="teams-tuesday-c.html" class="linkcontenidodias">C</a> - <a href="teams-tuesday-d.html" class="linkcontenidodias">D</a></td>

</tr>

<tr>

<td>Wednesday</td>

<td><a href="teams-wed-aa.html" class="linkcontenidodias">AA</a> - <a href="teams-wed-a.html" class="linkcontenidodias">A</a> - <a href="teams-wed-ba.html" class="linkcontenidodias">BA</a> - <a href="teams-wed-bc.html" class="linkcontenidodias">BC</a> - <a href="teams-wed-c.html" class="linkcontenidodias">C</a> - <a href="teams-wed-d.html" class="linkcontenidodias">D</a></td>

</tr>

<tr>

<td>Friday</td>

<td><a href="teams-friday-aa.html" class="linkcontenidodias">AA</a> - <a href="teams-friday-a.html" class="linkcontenidodias">A</a> - <a href="teams-friday-ba.html" class="linkcontenidodias">BA</a> - <a href="teams-friday-bc.html" class="linkcontenidodias">BC</a> - <a href="teams-friday-c.html" class="linkcontenidodias">C</a> - <a href="teams-friday-d.html" class="linkcontenidodias">D</a></td>

</tr>

<tr>

<td>Saturday</td>

<td><a href="teams-saturday-aa.html" class="linkcontenidodias">AA</a> - <a href="teams-saturday-a.html" class="linkcontenidodias">A</a> - <a href="teams-saturday-ba.html" class="linkcontenidodias">BA</a> - <a href="teams-saturday-bc.html" class="linkcontenidodias">BC</a> - <a href="teams-saturday-c.html" class="linkcontenidodias">C</a> - <a href="teams-saturday-d.html" class="linkcontenidodias">D</a></td>

</tr>

</table>

</div>

</li>

<li>

<a href="javascript:void(0)">Inserta Videos</a>

<div style="width: 320px;">

<iframe width="300" height="225" src="http://www.youtube.com/embed/jjp_LF29Xso" frameborder="0" allowfullscreen></iframe>

</div>

</li>

<li>

<a href="javascript:void(0)">Una imagen en el menu</a>

<div style="width:320px;">

<a href="http://www.photoshopytutoriales.com/tutoriales-photoshop-cs4-indice/"><img src="http://www.photoshopytutoriales.com/wp-content/uploads/2010/06/cursodephotoshopcs4enespanol.jpg" width="300"></a>

</div>

</li>

</ul></td>

</tr>

</table></td>

</tr>

</table>

Lo importante de destacar es que todo funciona con listas, es decir, el concepto de menu desplegable utilizando listas se mantiene, esto es por la relevancia que le da Google y por la facilidad de armado.

La estructura básica de cada uno de los items del menu es:

<li>Titulo del Menu<div>Aqui escribes el contenido a desplegar</div></li>

Para una mejor comprensión y para que tengas acceso al codigo en todo momento puedes descargar la version original desde Nettantra.

A continuación una versión simplificada y ya lista para usar: Desde Aqui, o bien Ver el Demo del ejercicio.