Menú horizontal desplegable con CSS y Jquery

En este menú horizontal cada elemento contiene un submenú vertical que se despliega, con un efecto relieve, proporcionado por la imagen gradiente utilizada como fondo. Veamos cómo ponerlo en nuestro blog: Página principal ► Diseño ► Plantilla ► Editar HTML 1.- Para añadir la funcionalidad del menú incluimos la librería jQuery, para lo cual pegamos inmediatamente antes de la etiqueta </head>, el siguiente código: <script charset='utf-8' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/> 2.- También necesitaremos añadir el plugin backgroundPosition para jQuery, lo cual lograremos pegando, después del anterior código, éste: <script type="text/javascript" src="jquery.backgroundPosition.js"></script> 3.- Para usar la función slideDown/slideUp y el evento hover y así mostrar el submenú correspondiente cuando pasemos el cursor por uno de los elementos del menú principal pegamos, después del anterior código, el siguiente: <script type="text/javascript"> $(function(){ $('#nav>li').hover( function(){ $('.submenu',this).stop(true,true).slideDown('fast'); }, function(){ $('.submenu',this).slideUp('fast'); } ); $('.submenu li a').css( {backgroundPosition: "0px 0px"} ).hover( function(){ $(this).stop().animate({backgroundPosition: "(0px -99px)"}, 250); }, function(){ $(this).stop().animate({backgroundPosition: "(0px 0px)"}, 250); } ); }); </script> 4.- Con el siguiente código CSS lograremos mejorar el aspecto visual del menú. Funcionalmente podemos destacar varios aspectos: Los elementos de la lista principal (#nav) se encuentran flotados a la izquierda, para formar el menú horizontal, y tienen position: relative para que sirva de referencia a cada submenú. A la lista del submenú le asignamos position: absolute, para que cuando se despliegue esté situada bajo su menú correspondiente. Este submenú lo ocultamos por defecto con display: none para después mostrarlo con javascript cuando pasemos el cursor por encima de su menú principal. A cada enlace del elemento del submenú añadiremos la imagen del gradiente como background. Este es el codigo CSS que debemos pegar antes de la etiqueta ]]></b:skin>: a{ display: block; text-decoration: none; color: #004a80; padding: 5px; } ul{ width: 500px; height: 28px; } ul,li{ list-style: none; margin:0; padding:0; } #nav{ font-family: 'Arial', sans-serif; background: url('http://i56.tinypic.com/2vi05cj_th.jpg') repeat-x 0 0; } #nav li{ float:left; position: relative; width: 125px; font-size: 14px; font-variant: small-caps; border-top:1px solid #004a80; border-bottom:1px solid #004A80; } .submenu{ display: none; position: absolute; left: -1px; border:none; height: auto; background: none; } #nav .submenu li{ float: none; position: static; margin: 0; font-size: 11px; font-variant: normal; border: 1px solid #004a80; border-top: none; width: 124px; } #nav .submenu li a{ color: #FFFFFF; background: url('http://oi54.tinypic.com/2djb6c.jpg') repeat-x 0 0; width: 114px; height: 16px; } En el anterior código resaltamos: En azul: El código color del fondo y los bordes del menú. En rojo: Las dimensiones de la barra. En amarillo: El estilo de los caracteres de los títulos. En café: Los códigos de las imágenes que sirven de fondo a: En #nav{, a la barra de navegación del menú. En #nav .submenu li a{, a los submenús. Si las anteriores imágenes no son compatibles con el diseño de nuestro blog, en Gradcolor.com podemos generar la imagen adecuada. También podemos poner como fondo simplemente un color, en cuyo caso reemplazamos el código de la imagen por el código del color que elijamos (#XXXXXX). Ésta es una buena herramienta para conseguir códigos hexadecimalesde colores: Códigos hexadecimales de colores. En verde: Las dimensiones de los encabezados de los submenús. En negro: El ancho del fondo de los submenús. En morado: El código del color de los caracteres de los títulos de los submenús y las dimensiones de los submenús. 5.- El html empleado es una simple lista con otra lista anidada para cada submenú. El siguiente es el código correspondiente que pegaremos en Diseño ► Añadir un gadget del tipo HTML/Javacsript: <ul id="nav"> <li><a href="#"><big><b>Menu 1</b></big></a> <ul class="submenu"> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> <li><a href="#">Submenu 4</a></li> <li><a href="#">Submenu 5</a></li> <li><a href="#">Submenu 6</a></li> </ul> </li> <li><a href="#"><big><b>Menu 2</b></big></a> <ul class="submenu"> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> <li><a href="#">Submenu 4</a></li> <li><a href="#">Submenu 5</a></li> <li><a href="#">Submenu 6</a></li> </ul> </li> <li><a href="#"><big><b>Menu 3</b></big></a> <ul class="submenu"> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> <li><a href="#">Submenu 4</a></li> <li><a href="#">Submenu 5</a></li> <li><a href="#">Submenu 6</a></li> </ul> </li> <li><a href="#"><big><b>Menu 4</b></big></a> <ul class="submenu"> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> <li><a href="#">Submenu 4</a></li> <li><a href="#">Submenu 5</a></li> <li><a href="#">Submenu 6</a></li> </ul> </li> </ul> Este gadget lo ponemos debajo de la cabecera del blog. Twittear

Índice: Menús
Menú de navegación lateral con efecto slide
Menú horizontal dinámico, con submenús
Menú horizontal desplegable con Ajax
Menú vertical con CSS y jquery, efecto acordeón
Menú Horizontal desplegable con jQuery, CSS3 y Efecto deslizante
Menú horizontal desplegable con CSS y Jquery
Menú Horizontal Estilo Apple Fancy con Efecto Slide, CSS y Jquery
Menú vertical desplegable