Men desplegable jQuery al estilo google

Este plugin junto con el css te permitira aadir un menu estilo google en tu pgina web. Este tipo de menus te permitira mostrar opciones en una barra superior con multiples propositos

Si estan aprendiendo jQuery adems de seguir mis tutoriales les recomiendo este excelente libro jQuery in Action se puede conseguir en amazon en unos 26 dolares aproximadamente y realmente vale la pena, aprendern todo lo necesario sobre jquery de manera muy simple con ejercicios e increibles prcticas. Ahora si vamos al men, este men puede ser utilizado para mostrar un menu fixed, que es el que al mover el scroll the la pgina se mantiene simpre en la misma posicin, puede ser usado simplemente como el menu de un sitio web o sistema web, o incluso en paginas donde se tiene un frame permitiendo mantener vinculos de la pagina original

El codigo HTML
La idea del cdigo html es muy simple, una lista ul li , con algunos elementos extras para darle forma. me gusto mucho el men de google porque lo que trate de imitar el comportamiento y apariencia, cambie la estructura que usa google por una mucho mas simple tal vez perdiendo algunos detalles pero permitiendo que el men sea transportable y facil de implementar. El cdigo html incluye la estructura clasica, algunos links y el elemento span que tiene como unico objetivo mostrar una pequea flecha que indica que el menu es desplegable

1 <div class="menu"> <ul> 2 <li> 3 <a href="#">More Examples 4 <span class="arrow"></span> </a> 5

<ul> <li><a href="http://www.ajaxshake.com/en/JS/1111/jquery.html">Plugins and 6 jQuery Examples</a></li> 7 <li><a 8 href="http://www.ajaxshake.com/en/JS/1121/prototype.html">Prototype 9 Examples</a></li> <li><a 10href="http://www.ajaxshake.com/en/JS/12111/mootools.html">Mootools 11Examples</a></li> 12 <li><a 13href="http://www.ajaxshake.com/en/JS/12421/pure14javascript.html">Javascript Examples</a></li> </ul> 15 </li> <ul> <div>

El cdigo CSS
El cdigo css es lo que hace posible mostrar este men, todo lo que haremos en javascript es habilitar o deshabilitar las sub-opciones, es por eso que el css es lo mas importante que tiene este men. Basicamente lo que hago es situar las opciones de manera horizontal para las opciones principales, y vertical las subopciones algunos colorcitos, y una clase especial active que muestra el submenu ya que todos los submenus estan ocultos.

1 body{ padding:0; 2 margin:0; 3 } 4 .menu{ font: 13px/27px Arial,sans-serif; 5 6 color:#3366CC; 7 height:30px; 8 background: url(back.gif) repeat-x; 9 } 10.menu a:hover{ background-color:#e4ebf8; 11 } 12 .menu a { 13 text-decoration: none; 14 padding: 4px 8px 7px; color:#3366CC; 15 outline:none; 16 } 17.menu ul{ 18 list-style: none; 19 margin:0; padding:0 0 0 10px; 20 } 21
.menu ul li{

padding:0; 22 float:left; 23 24} 25.menu ul li ul li{ 26 padding:0; float:none; 27 margin: 0 0 0 0px; 28 width:100%; 29} 30.menu ul li ul{ 31 position: absolute; border: 1px solid #C3D1EC; 32 box-shadow: 0 1px 5px #CCCCCC; 33 margin-top: -1px; 34 display:none; 35 padding: 0px 16px 0px 0; 36} 37.active ul{ display:block !important; 38} 39.active a{ 40 background-color: white; border: 1px solid #C3D1EC; 41 border-bottom: 0; 42 box-shadow: 0 -1px 5px #CCCCCC; 43 display: block; 44 height: 29px; 45 padding: 0 8px 0 8px; position:relative; 46 z-index: 1; 47 } 48.active a:hover{ 49 background-color:white; 50} 51.active ul a:hover{ background-color:#e4ebf8; 52} 53 54.active ul a{ 55 border: 0 !important; box-shadow: 0 0 0 #CCCCCC; 56 border:0; 57 width: 100%; 58} 59.arrow { border-color: #3366CC transparent transparent; 60 border-style: solid dashed dashed; 61 margin-left: 5px; 62 position: relative; 63 top: 10px; 64} 65 66 67 68

69 70 71 72 73 74 75 76 77 78

El cdigo Javascript
El cdigo javascript es lo mas simple , solo agrego un evento click a cada opcion donde lo nico que hacen es agregar y quitar la clase active que es la que muestra el submenu.

1 2 3 4 5 (function($){ 6 $.fn.fixedMenu=function(){ return this.each(function(){ 7 var menu= $(this); 8 menu.find('ul li > a').bind('click',function(){ 9 if ($(this).parent().hasClass('active')){ 1 $(this).parent().removeClass('active'); 0 } else{ 1 $ 1 (this).parent().parent().find('.active').removeClass('active'); 1 $(this).parent().addClass('active'); 2 } }) 1 }); 3 } 1 })(jQuery); 4 1 5 1 6
Esta entrada fu posteada el 21/05/2011 a las 5:58 pm. Usted puede seguir cualquier comentario a por medio del siguiente RSS 2.0 feed. Usted puede dejar una respuesta si lo desea.

Posteado en Men Por Lucas Forchino 3 Comentarios

3 Respuestas a "Men desplegable jQuery al estilo google"

mat says: 29/08/2011 at 10:41 pm Reply como diria el sr Burns EXCELENTE!!!! la unica mejora que le haria es (agregarle las nuevas mejoras de google actual) que pinta una linea roja encima de la seleccion, y lo pone de color gris al recuadro y despues de que se desactive la casilla si estamos con el cursor fuera del listado desplegado. Saludos!

oscar says: 18/10/2011 at 11:50 am Reply Muy bueno, pero estoy con mat. solo le falta que al cliquear fuera del men o con un mouse out se cierre el men.

oscar says: 18/10/2011 at 12:09 pm Reply Encontr este cdigo por ah y da solucin al tema anterior: (function($){ $.fn.fixedMenu=function(){

return this.each(function(){ var menulink = $(this).parent().find(.menu > ul > li > a); menulink.bind(mouseout,function(){ var submenulink = menulink.parent().find(ul); submenulink.hover(function(){ // },function(){ menulink.parent().removeClass(active); }); }); menulink.bind(mouseover,function(){ if(!$(this).parent().hasClass(active)) { $(this).parent().parent().find(.active).removeClass(active); $(this).parent().addClass(active); } }); }); } })(jQuery);

El codigo HTML

<div class="menu"> <ul> <li> <a href="#">More Examples <span class="arrow"></span> </a> <ul> <li><a href="http://www.ajaxshake.com/en/JS/1111/jquery.html">Plugins and jQuery Examples</a></li> <li><a href="http://www.ajaxshake.com/en/JS/1121/prototype.html">Prototype Examples</a></li> <li><a href="http://www.ajaxshake.com/en/JS/12111/mootools.html">Mootools Examples</a></li> <li><a href="http://www.ajaxshake.com/en/JS/12421/purejavascript.html">Javascript Examples</a></li> </ul> </li> <ul> <div>

El cdigo CSS

body{ padding:0; margin:0; } .menu{ font: 13px/27px Arial,sans-serif; color:#3366CC; height:30px; background: url(back.gif) repeat-x; }

.menu a:hover{ background-color:#e4ebf8; } .menu a { text-decoration: none; padding: 4px 8px 7px; color:#3366CC; outline:none; } .menu ul{ list-style: none; margin:0; padding:0 0 0 10px; } .menu ul li{ padding:0; float:left; } .menu ul li ul li{ padding:0; float:none; margin: 0 0 0 0px; width:100%; } .menu ul li ul{ position: absolute; border: 1px solid #C3D1EC; box-shadow: 0 1px 5px #CCCCCC; margin-top: -1px; display:none; padding: 0px 16px 0px 0; } .active ul{ display:block !important; } .active a{ background-color: white; border: 1px solid #C3D1EC; border-bottom: 0; box-shadow: 0 -1px 5px #CCCCCC; display: block; height: 29px; padding: 0 8px 0 8px; position:relative; z-index: 1; } .active a:hover{ background-color:white; } .active ul a:hover{ background-color:#e4ebf8; } .active ul a{ border: 0 !important;

box-shadow: 0 0 0 #CCCCCC; border:0; width: 100%; } .arrow { border-color: #3366CC transparent transparent; border-style: solid dashed dashed; margin-left: 5px; position: relative; top: 10px; }

El cdigo Javascript

(function($){ $.fn.fixedMenu=function(){ return this.each(function(){ var menu= $(this); menu.find('ul li > a').bind('click',function(){ if ($(this).parent().hasClass('active')){ $(this).parent().removeClass('active'); } else{ $ (this).parent().parent().find('.active').removeClass('active'); $(this).parent().addClass('active'); } }) }); } })(jQuery);