Mega menú jQuery

Name: Mega menú jQuery
Brand: Jose Aguilar
SKU: joseaguilarblog-2739
Availability: InStock
Rating: 5 (5 reviews)

En este artículo vamos a ver como utilizar un plugin jQuery muy interesante, código limpio y de fácil manipulación con la implementación de un menú horizontal que sus links habren o desplegan código HTML.

Al hacer hover o pasar el ratón por encima de los links principales del menú, podemos desplegar un contenido HTML como el que se muestra en la imagen anterior con un efecto muy limpio y transparente.

Modificar el diseño o el estilo es tan sencillo como acceder a la hoja de estilos y modificarla a tu antojo.

Lo primero que tendremos que hacer para disponer de este menú es bajarnos el «jQuery MegaMenu Plugin» que podrás encontrar googleando.

En la cabecera o <head> de nuestra página deberemos incluir los estilos y scripts ncecesarios para tener la funcionalidad del menú.

<link rel="stylesheet" href="css/jquery.megamenu.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/example.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.megamenu.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function(){
  var SelfLocation = window.location.href.split('?');
  switch (SelfLocation[1]) {
     case "justify_right":
        jQuery(".megamenu").megamenu({ 'justify':'right' });
     break;
     case "justify_left":
     default:
        jQuery(".megamenu").megamenu();
  }
});
</script>

Luego en nuestro <body> tendremos un código html muy simple del menú. Por ejemplo podríamos tener:

 <ul>
      <li>
        <a href="javascript:void(0)">Link 1</a>
        <div style="width: 500px;">
          <!--Aqui pon tu código html-->
        </div>
      </li> 
      ...
</ul>

Ver ejemplo en funcionamiento