Drop Down Menu con JQuery

17 febrero 2010

Drop Down Menu con JQuery

    No hay comentarios
Hoy, visitando algunas paginas donde pueda encontrar javascripts excelentes para mi blog, me encontre con un menu muy bonito, y que ademas me gusto mucho, es horizontal y desplegable, ya habia publicado otro menu vertical desplegable con CSS y tambien, un menu de pestañas, pero este es el primero que usa el JQuery para darle funcion al menu...

Puedes ver un ejemplo en este blog de pruebas... Si te gusta lo primero que debes hacer es seguir los siguientes pasos

[1] Primero, si ya tienes la libreria JQuery Instalada en tu blog no es necesario seguir este paso, si no lo tienes, ve a la Edicion HTML de tu blog y encima de la etiqueta </head> pega los siguientes codigos.

Codigo 1

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'></script>

Codigo 2

<script type='text/javascript'>

var timeout    = 500;
var closetimer = 0;
var ddmenuitem = 0;

function jsddm_open()
{  jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find('ul').css('visibility', 'visible');}

function jsddm_close()
{  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
{  closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
{  if(closetimer)
{  window.clearTimeout(closetimer);
closetimer = null;}}

$(document).ready(function()
{  $('#jsddm > li').bind('mouseover', jsddm_open)
$('#jsddm > li').bind('mouseout',  jsddm_timer)});

document.onclick = jsddm_close;
</script>


[2] Ahora, para darle el estilo CSS al menu, pega el siguiente codigo justo antes de ]]></b:skin>

#jsddm
{ margin: 0;
 padding: 0}
 
 #jsddm li
 { float: left;
  list-style: none;
  font: 12px Tahoma, Arial}

 #jsddm li a
 { display: block;
  background: #20548E;
  padding: 5px 12px;
  text-decoration: none;
  border-right: 1px solid white;
  width: 70px;
  color: #EAFFED;
  white-space: nowrap}

 #jsddm li a:hover
 { background: #1A4473}
  
  #jsddm li ul
  { margin: 0;
   padding: 0;
   position: absolute;
   visibility: hidden;
   border-top: 1px solid white}
  
  #jsddm li ul li
  { float: none;
   display: inline}
  
  #jsddm li ul li a
  { width: auto;
   background: #9F1B1B}
  
  #jsddm li ul li a:hover
  { background: #7F1616}


[3] Luego de terminar de pegar los estilos, pega el siguiente codigo en un elemento HTML/Javascript en tu blog, o si quieres puedes pegarlos en la plantilla directamente donde quieres que aparezca el menu, yo te sugiero por debajo o encima de la cabecera. 

<ul id="jsddm">
<li><a href="#">JavaScript</a>
<ul>
<li><a href="#">Drop Down Menu</a></li>
<li><a href="#">jQuery Plugin</a></li>
<li><a href="#">Ajax Navigation</a></li>
</ul>
</li>
<li><a href="#">Effect</a>
<ul>
<li><a href="#">Slide Effect</a></li>
<li><a href="#">Fade Effect</a></li>
<li><a href="#">Opacity Mode</a></li>
<li><a href="#">Drop Shadow</a></li>
<li><a href="#">Semitransparent</a></li>
</ul>
</li>
<li><a href="#">Navigation</a></li>
<li><a href="#">HTML/CSS</a></li>
<li><a href="#">Help</a></li>
</ul>


[4 - Opcional] Para agregar una nueva opción al menú

    ....

<li><a href="#">Navigation</a></li>
<li><a href="#">HTML/CSS</a></li>
<li><a href="#">Help</a></li>
<!-- aqui va la nueva opcion del menu que ira de la siguiente forma -->
<li><a href='#'>Nombre de la opcion</a></li>
</ul>


[5 - Opcional] Para agregar un Sub-Menú debajo de una opción del menú



<li><a href='#'>Nombre de la opcion</a>
      <ul>
               <li><a href="#">Nombre sub-menu</a></li>
               <li><a href="#">Nombre sub-menu</a></li>
      </ul>
</li>
</ul>

Me despido... Muchas gracias por leer

Traduccion | Anthony Medina
Articulo original | JQuery Drop Down Menu [En Ingles]

Enlaces para compartir en tu blog o pagina web.




Widget por Friki Bloggeo


No hay comentarios :

Publicar un comentario

Suscribirse a: Enviar comentarios ( Atom )