Souldhack
Souldhack necesita de nuestra ayuda! Por favor lee la siguiente nota! Necesitamos tu ayuda! Y apoyanos!

souldhack

Menu lateral jquery

Menu elegante lateral con Jquery

Escrito por Administrador - 23/octubre/2011


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 del autor
Manolo M./Administrador
Les cuento un poco sobre mi... soy un aficionado en todo lo relacionado con las paginas web, haora estoy enamorado de mi pagina web en la cual se comparten conocimientos, ideas... Leer mas

 


Algunas categorias
Interesante
Aqui hablaremos de articulos de interes y debate.

Interesante

Recursos
En esta categoria encontraras, recursos utiles para tener un buen desempeño web.

Recursos


 
Site5.com

Souldhack necesita tu ayuda!

Souldhack necesita nuestra ayuda!
Todos podemos ayudar a souldhack entrando al blog Souldhacko Y dandole click a la publicidad y anuncios de google que estan en dicho blog, de esta manera estaremos apoyando y agradeciendo a souldhack por toda su ayuda brindada hacia nosotros!, espero y todos nos apoyen, no saben lo agradecidos que estaremos con todos ustedes!, Recuerden que souldhack! esta echo por y para ustedes!.

¿Que pasa en souldhack y souldhacko?

Recuerda que se están escribiendo artículos recientemente en el blog, Souldhacko


Siguenos en Facebook!

Recent Posts

Cuadro ultimos tweets
Para todos los usuarios de twitter que tienes una web acargo en esencial...

Abril 14, 2012

 
Botones compartir articulos
Cuando un articulo es satisfactorio, o simplemente era lo que estabamos...

Febrero 18, 2012

 
Usar/Utilizar jQuery
Bueno en este tutorial explico como instalar y usar jquery ya sea en un diseño profecional...

Noviembre 13, 2011

 
Cambiar botones a Ice Blue
En este mi mas reciente video subido explico como cambiar los botones de los diseños...

Mayo 3, 2012

 

Chat

Los comentarios...

Los comentarios...

Mi video mas reciente

=> ¿Desea una página web gratis? Pues, haz clic aquí! <=