Cargando...

theperezhacker

menu

Llego el turno de crear un menu lateral dezpegable con jquery, este menu sin duda es muy elegente, para poder instalarlo en nuestra web seguiremos unos sencillos pasos, este menu llevara una libreria jquery y alaves me alegra empesar a trabajar con dichas librerias. Asi que vamos a empezar.



Lo primero que vamos a hacer es instalar la libreria jquery y el script del mismo justo antes de </head> en nuestra web, esto nos dara el efecto de dezplazamiento, he aqui la libreria subida por mi en sites.google:Recuerden que esto es un archivo .js y un script, lo van a pegar justo antes de 
</head> de nuestra web.

<script src="http://souldhack.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"/>

<script type="text/javascript">  
$(function() {
$('#menudzp a').stop().animate({'marginLeft':'-55px'},1000);

$('#menudzp > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'-55px'},200);
}
);
});
</script>


Ya instalada la libreria y el script del mismo vamos a pasar con el siguiente paso que es crer el estilo y el diseño css del menu, he aqui el estilo y diseño: Recuerden que esto es un codigo css y lo deven pegar en CSS-CODE

ul#menudzp {
position: fixed;
margin: 0px;
padding: 0px;
top: 10px;
left: 0px;
list-style: none;
z-index:9999;
}
ul#menudzp li {
width: 100px;
}
ul#menudzp li a {
display: block;
margin-left: -2px;
width: 100px;
height: 70px;
background-color:#CFCFCF;
background-repeat:no-repeat;
background-position:center center;
border:1px solid #AFAFAF;
-moz-border-radius:0px 10px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-top-right-radius: 10px;
/*-moz-box-shadow: 0px 4px 3px #000;
-webkit-box-shadow: 0px 4px 3px #000;
*/
opacity: 0.6;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
ul#menudzp .imagen1 a{
background-image: url(url-imagen-home);
}
ul#menudzp .imagen2 a {
background-image: url(url-imagen-facebook);
}
ul#menudzp .imagen3 a {
background-image: url(url-imagen-twitter);
}
ul#menudzp .imagen4 a {
background-image: url(url-imagen-rss);
}
ul#menudzp .imagen5 a {
background-image: url(url-imagen-contacto);
}
ul#menudzp .imagen6 a {
background-image: url(url-imagen-mail);
}
ul#menudzp .imagen7 a {
background-image: url(url-imagen-search);
}


Ya puesto el estilo y diseño css del menu pasaremos con el ultimo paso que es mostrar el menu en donde querramos mediante html. Recuerden que esto es un codigo HTML y lo deven pegar en donde quieran que este el menu despegable con jquery

<ul id="menudzp">
<li class="imagen1"><a href="#" title="Home"></a></li>
<li class="imagen2"><a href="#" title="Facebook"></a></li>
<li class="imagen3"><a href="#" title="Twitter"></a></li>
<li class="imagen4"><a href="#" title="Rss"></a></li>
<li class="imagen5"><a href="#" title="Contacto"></a></li>
<li class="imagen6"><a href="#" title="Mail"></a></li>
<li class="imagen7"><a href="#" title="Search"></a></li>
</ul>

Con esto hemos acabado de crear el menu despegable con jque. Sin duda un menu elegante y muy vistoso para nuestras web, alguna duda comenten.

Demo del menu jquery

Acerca de theperezhacker
    Comunidad web que te auda a mejorar tu web totalmente gratis
Lo mas popular
Este sitio web fue creado de forma gratuita con PaginaWebGratis.es. ¿Quieres también tu sitio web propio?
Registrarse gratis