Menu Drop Down con jQuery y CSS
Vamos a desarrollar un menu estilo Drop Down, de fácil mantenimeinto, usable y accesible con jQuery y CSS:
1º Paso: HTML
Comenzamos creando una lista desordenada con <ul> que luego será nuestro menu, de esta forma:
<ul class="menu">
<li><a href="#">Inicio</a></li>
<li>
<a href="#">Tutoriales</a>
<ul class="submenu">
<li><a href="#">CSS</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">PHP</a></li>
</ul>
</li>
<li>
<a href="#">Códigos</a>
<ul class="submenu">
<li><a href="#">Reloj en Flash</a></li>
<li><a href="#">Fecha con JS</a></li>
<li><a href="#">XML y AS</a></li>
<li><a href="#">RSS y PHP</a></li>
<li><a href="#">ASP a Excel</a></li>
<li><a href="#">PHP a Excel</a></li>
</ul>
</li>
<li><a href="#">Sobre Nosotros</a></li>
<li><a href="#">Politica</a></li>
<li><a href="#">RSS </a></li>
<li><a href="#">Contactanos</a></li>
</ul>
2º Paso: CSS
Una vez que tenemos nuestra lista, vamos a darle un retoque con css para darle forma de menu. Veamos el codigo:
<style type="text/css">
body {
margin: 0; padding: 0;
font: 12px normal Arial, Helvetica, sans-serif;
background: #FFF url(body_bg.gif) repeat-x;
}
.container {
width: 960px;
margin: 0 auto;
position: relative;
}
#header {
background: url(header_bg.gif) no-repeat center top;
padding-top: 30px;
}
#header .disclaimer {
color:#666;
padding: 10px 0 7px 0;
text-align:left;
display: block;
position: absolute;
top: 0; right: 0;
}
#header .disclaimer a { color:#003399;}
ul.menu {
list-style: none;
padding: 0 20px;
margin: 0;
float: left;
width: 920px;
background: #222;
font-size: 1.2em;
background: url(topnav_bg.gif) repeat-x;
}
ul.menu li {
float: left;
margin: 0;
padding: 0 15px 0 0;
position: relative;
}
ul.menu li a{
padding: 10px 5px;
color: #fff;
display: block;
text-decoration: none;
float: left;
}
ul.menu li a:hover{
background: url(topnav_hover.gif) no-repeat center top;
}
ul.menu li span {
width: 17px;
height: 35px;
float: left;
background: url(subnav_btn.gif) no-repeat center top;
}
ul.menu li span.subhover {background-position: center bottom; cursor: pointer;}
ul.menu li ul.submenu {
list-style: none;
position: absolute;
left: 0; top: 35px;
background: #333;
margin: 0; padding: 0;
display: none;
float: left;
width: 170px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border: 1px solid #111;
}
ul.menu li ul.submenu li{
margin: 0; padding: 0;
border-top: 1px solid #252525;
border-bottom: 1px solid #444;
clear: both;
width: 170px;
}
html ul.menu li ul.submenu li a {
float: left;
width: 145px;
background: #333 url(dropdown_linkbg.gif) no-repeat 10px center;
padding-left: 20px;
}
html ul.menu li ul.submenu li a:hover {
background: #222 url(dropdown_linkbg.gif) no-repeat 10px center;
}
#header img {
margin: 20px 0 10px;
}
</style>
3º Paso: jQuery
Ya tenemos armado con html la lista, luego con css le dimos un lavado de cara para que obtenga forma de menú, ahora solo nos resta darle algo de animación para desplegar los submenu, para lo cual tenemos lo siguiente:
Como siempre cuando trabajamos con jQuery debemos incluir la librería entre las etiquetas <head> y </head>
<script type="text/javascript">
$(document).ready(function(){
$("ul.submenu").parent().append("<span></span>");
$("ul.menu li span").click(function() { //Al hacer click se ejecuta...
//Con este codigo aplicamos el movimiento de arriva y abajo para el submenu
$(this).parent().find("ul.submenu").slideDown('fast').show(); //Menu desplegable al hacer click
$(this).parent().hover(function() {
}, function(){
$(this).parent().find("ul.submenu").slideUp('slow'); //Ocultamos el submenu cuando el raton sale fuera del submenu
});
}).hover(function() {
$(this).addClass("subhover"); //Agregamos la clase subhover
}, function(){ //Cunado sale el cursor, sacamos la clase
$(this).removeClass("subhover");
});
});
</script>
Como verán con jQuery es muy simple realizar menus animados, solo deberán modificar el estilo para adaptarlo a sus proyectos. Espero les sea de utilidad. Como es de costumbre les dejo la descarga de código y la Demo. Cordiales Saludos.
Fuente: Noupe
También te puede Interesar
¿Disfrutaste esta entrada? Por qué no dejas un comentario abajo y continúas la conversación, o te suscribes a mi feed y obtienes artículos como este enviados a tu lector de feeds.
Comentarios
No hay comentarios todavía.
Deja un Comentario