Photoshop y Tutoriales
Blog de diseño
Menu desplegable para paginas web con tablas, utilizando CSS y Jquery (Megamenu)
¿Como insertar videos en menu desplegable?
En este tutorial te mostraré 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.
Resulta que me contrataron para personalizar una plantilla, un sitio de deportes, pero como novedad querían que el menú desplegable se presentara de forma columnar pero con cada uno de los elementos de la columna desplegada linkeado a la pagina de destino, ¿Oo?, comencé a buscar alguna librería Jquery, Ajax, de lo que fuera (aunque prefería Jquery), para poder hacer esa forma.
Pensé inmediatamente en el menu desplegable de McDonalds, Amazon, Ebay, Yahoo… pero ninguno me servía, asi que la búsqueda me llevó hasta un megamenu.
Tutorial Megamenu
¿Megamenu?, bueno hay que reconocer que el nombre no es malo, lo descargué (te advierto que hay varios), y luego de probar dos o tres alternativas dí con el que me interesaba el Megamenu de GeekTantra, te dejo enlazada la version 2 del Megamenu ya con correcciones y es la version que utilicé para el menú desplegable de mi cliente.
Al final te daré una copia con un archivo que podrás modificar y con los archivos ya ordenados para que los utilices más fácilmente.
Se me olvidaba mencionar que tambien puedes insertar videos de youtube dentro del menu desplegable:
y por supuesto las tablas:
Para que todo funcione primero debemos 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"> </td>
<td class="buscador"> </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.
O bien una version simplificada y ya lista para usar: Desde Aqui, o bien Ver el Demo del ejercicio.
Si este artículo te ha sido de utilidad compártelo en las redes con tus amigos, presiona el boton G+ y danos un voto.
¿Ya conocías del Megamenu? o ¿es la primera vez que escuchas ese término megamenu?
Te podria interesar:
- Videos tutoriales gratuitos para diseño de paginas web con html, aprende como hacer una pagina web en html y CSS
- Sliders para diseño web con Jquery
- 5 ejemplos de elegantes paginas web hechas con CSS
- Embellece los formularios de tus páginas web unicamente con CSS
- Insertar fondo en página web y centrar la imagen de background con CSS
Tags: css, Diseño Web, jquery, menu desplegable, menu desplegable con tablas, tutorial, web
Información Bitacoras.com…
Valora en Bitacoras.com: En este tutorial te mostraré como armar un menú desplegable 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 ele…..
[...] Como hacer un menu desplegable que acepte tablas, imágenes y videos [...]
[...] o bien menús desplegables de 3 niveles con imagen en cada una de ellas – por cierto aqui hay un tutorial para insertar imágenes en menús de navegación con CSS y Jquery – hay que aclararle al cliente cuando esto suceda (que el término sencillo [...]