Sencillo menú desplegable con JQUERY y CSS
El objetivo principal es hacer este menú lo más sencillo posible, con un leve efecto con jquery, y además, un estilo que sea fácil de customizar.
Para acomodarlo a tu diseño, tenés que modificar la tag a a través del CSS. Podés ponerle una imagen de fondo, un efecto en el hover y también cambiar la animación del submenú.
1. HTML
Esta debe ser la forma más sencilla de armar la estructura de un menú. Tiene sentido hasta cuando se desactiva el CSS.
<ul id="nav">
<li><a href="#">Parent 01</a></li>
<li><a href="#" class="selected">Parent 02</a>
<ul>
<li><a href="#">Item 01</a></li>
<li><a href="#" class="selected">Item 02</a></li>
<li><a href="#">Item 03</a></li>
</ul>
<div class="clear"></div>
</li>
<li><a href="#">Parent 03</a>
<ul>
<li><a href="#">Item 04</a></li>
<li><a href="#">Item 05</a></li>
<li><a href="#">Item 06</a></li>
<li><a href="#">Item 07</a></li>
</ul>
<div class="clear"></div>
</li>
<li><a href="#">Parent 04</a></li>
</ul>
<div class="clear"></div>2.CSS
El CSS es bastante sencillo, tenemos dos listas UL con estilos, que serían el menu padre y el submenu. El submenu, está oculto por defecto, i solo se hará visible con un hover en el elemento padre.
body {font-family:arial; font-size:11px;}
.clear {clear:both}
/* remove the list style */
#nav {
margin:0;
padding:0;
list-style:none;
}
/* make the LI display inline */
/* it's position relative so that position absolute */
/* can be used in submenu */
#nav li {
float:left;
display:block;
width:100px;
background:#ccc;
position:relative;
z-index:500;
margin:0 1px;
}
/* this is the parent menu */
#nav li a {
display:block;
padding:8px 5px 0 5px;
font-weight:700;
height:23px;
text-decoration:none;
color:#fff;
text-align:center;
color:#333;
}
#nav li a:hover {
color:#fff;
}
/* you can make a different style for default selected value */
#nav a.selected {
color:#f00;
}
/* submenu, it's hidden by default */
#nav ul {
position:absolute;
left:0;
display:none;
margin:0 0 0 -1px;
padding:0;
list-style:none;
}
#nav ul li {
width:100px;
float:left;
border-top:1px solid #fff;
}
/* display block will make the link fill the whole area of LI */
#nav ul a {
display:block;
height:15px;
padding: 8px 5px;
color:#666;
}
#nav ul a:hover {
text-decoration:underline;
}
/* fix ie6 small issue */
/* we should always avoid using hack like this */
/* should put it into separate file : ) */
*html #nav ul {
margin:0 0 0 -2px;
}3.JQUEY
Debe ser uno de los scripts más simples! Tiene un evento en el hover y una animación básica de jquery: SlideUp y SlideDown.
$(document).ready(function () {
$('#nav li').hover(
function () {
//show its submenu
$('ul', this).slideDown(100);
},
function () {
//hide its submenu
$('ul', this).slideUp(100);
}
);
});ENJOY!
Comentarios
quisiera saber como entra todo esto a Drupal 6, gracias
Atte
Pedro
Enviar un comentario nuevo