Menú con submenu horizontal jQuery

Aquí presento un pequeño script en jQuery, para un menú desplegable horizontal.
Son muy pocas líneas de código, pero antes de empezar vamos a ver una demo de como nos quedará nuestro menú.

DEMO

Lo que conseguimos con este menú, es que al entrar en una página, se muestre el submenú de dicha página, y al pasar el mouse por encima de los elementos del menú, se vayan mostrando los submenus correspondientes.
Si esto es lo que buscáis, vamos a ver como lo conseguimos.
Primero de todo necesitamos tener un documento html válido en el que tendremos que incluir la librería jQuery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
	<title>Menu Horizontal</title>	
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<link rel="stylesheet" href="style.css" type="text/css" media="screen" />	
	<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>	

Y ahora el script, comentado paso a paso:

<script type="text/javascript">
	var ulmenuitem;
// Función para asignar la class "current" a la página en la que nos encontramos
	jQuery(function() {
// Aplicamos la función a todos los elementos <a> de nuestro menú
  jQuery('#menu-principal a').each(function() {
//Comprobamos que la url coincida
    if (jQuery(this).attr('href')  ===  window.location.pathname ) {
// Si coincide aplicamos la class "current" al elemento <a>
      jQuery(this).addClass('current');
// Y también mostramos su submenú aplicando la class "active" a su correspondiente <ul>
      ulmenuitem = jQuery(this).parent().find('ul').addClass('active');
    }
  });
});  		
// Función para aplicar la class "active" a los submenus (<ul>)
	function ulmenu_open(){
// Cerramos los posibles submenus que pudieran encontrarse abiertos 
	   	ulmenu_close();
//Abrimos el submenú aplicando la class "active" al elemento "ul"
	   	ulmenuitem = jQuery(this).find('ul').addClass('active');
	}
// Función para cerrar el submenú. Sacando la class "active" el submenú vuelve 
// a estar escondido ya que en el CSS hemos definido visibility: hidden	
	function ulmenu_close(){ 
		if(ulmenuitem) ulmenuitem.removeClass('active');
	}	
//LLamamos a la función ulmenu_open cuando pasamos con el mouse por encima de  
//los elementos de nuestro menú. 		
	$(document).ready(function(){  
		$('#menu-principal > li').bind('mouseover', ulmenu_open)
	});
</script>

El CSS

/*
Author : Maddish
URL: http://www.inauditas.com
*/

* {
	border:none; 
	margin:0; 
	padding:0;
}

body {
	background:#fff; 
	color: #000; 
	font:12px Arial, Verdana, sans-serif;
}


h1 {
	font-size:20px;
	margin-bottom:20px; 
 margin-left: 13px;
}

#wrap {
	margin:10px 10px auto;

}

#header {
	margin-bottom:20px;
}


/*Menu Styles*/
#primary-menu {
    background: url("images/bg-primary-menu.png") repeat-x scroll 0 0 transparent;
    height: 66px;
    margin: 0 auto;
    width: 100%;
}
#menu-principal{
	margin: 0;
	padding: 0;
	height:33px;
}

#menu-principal li {	
	float: left;
	list-style: none;
    border-right: 1px solid #FFFFFF;
}

#menu-principal li a {	
	display: block;
	padding: 8px 12px;
	text-decoration: none;
	color: #fff;
	text-transform:uppercase;
	text-align:center;
font-weight: bold;
}

#menu-principal a:hover {	
	background: #000;
}
	
#menu-principal li ul {	
	position: absolute;
	visibility: hidden;
 height: 36px;
}

#menu-principal li ul li {	
    border-right: 1px solid #FFFFFF;
}

#menu-principal li ul li a {
 padding: 10.5px 12px;
}

#menu-principal li ul li a:hover {	
	background: #000;
}

#menu-principal a.current {
background: #000;
}

#menu-principal li ul.active {	
	margin: 0 0 0 10px;
	visibility: visible;
 left: 0;
}

Descarga aquí todo el código en .zip

Descarga aquí todo el código en .tar.gz

Deja un comentario