Micaela 28 de Diciembre de 2009 a las 13.15
   Imprimir artículo
elWebmaster.com

Menú lateral de pestañas desplegables con CSS y jQuery

CSS, javascript, jQuery, diseño web, navegación

jquery-slide-navbarHoy les vamos a enseñar cómo crear un sorprendente menú de navegación con solapas desplegables para sus sitios web, mediante CSS y jQuery.

La navegación estará casi totalmente oculta, los ítems sólo se deslizarán hacia afuera cuando el usuario pase el mouse sobre el área cercano a ellos, algo similar a un índice telefónico, valiéndonos del efecto slide() de jQuery.

Antes de comenzar, aquí tienen una demo del efecto para que tengan una idea de cómo va a quedar ;)

La estructura HTML

Lo único que necesitaremos para la navegación es una simple lista no ordenada con links dentro de cada ítem.

PLAIN TEXT
  1. <ul id="navigation">
  2.  <li class="home"><a title="Home"></a></li>
  3.  <li class="about"><a title="About"></a></li>
  4.  <li class="search"><a title="Search"></a></li>
  5.  <li class="photos"><a title="Photos"></a></li>
  6.  <li class="rssfeed"><a title="Rss Feed"></a></li>
  7.  <li class="podcasts"><a title="Podcasts"></a></li>
  8.  <li class="contact"><a title="Contact"></a></li>
  9. </ul>

La lista obtiene una ID porque debemos hacer referencia a ella luego en el JavaScript. Con jQuery, haremos que los links se deslicen fuera cuando pasemos el mouse sobre los elementos li de la lista.

El CSS

Primero, definimos las propiedades CSS para los elementos de la lista:

PLAIN TEXT
  1. ul#navigation {
  2.     position: fixed;
  3.     margin: 0px;
  4.     padding: 0px;
  5.     top: 10px;
  6.     left: 0px;
  7.     list-style: none;
  8.     z-index:9999;
  9. }

La navegación siempre debería ser accesible para el usuario, incluso aunque haga scroll down de la página. Por lo que la posición debería ser fija. El margin y padding están seteados en 0, debido a que la lista desordenada tiene valores por defecto para ellos. La navegación debería estar en la parte superior de todos los otros elementos de la página. Es por eso que hemos seteado el z-index muy alto.

Ahora veamos las propiedades de los elementos de la lista:

PLAIN TEXT
  1. ul#navigation li {
  2.     width: 100px;
  3. }

Para los links de los elementos de la lista, definimos las siguientes propiedades CSS:

PLAIN TEXT
  1. ul#navigation li a {
  2.     display: block;
  3.     margin-left: -85px;
  4.     width: 100px;
  5.     height: 70px;
  6.     background-color:#CFCFCF;
  7.     background-repeat:no-repeat;
  8.     background-position:center center;
  9.     border:1px solid #AFAFAF;
  10. }

El margen izquierdo está programado en un valor negativo para esconder la mayor parte del icono y sólo revelarla cuando pasamos el mouse sobre la lista de ítems. Básicamente, estamos empujando el elemento link a la izquierda, fuera del área visible de la página.

En el Javascript definiremos una función que hace que los elementos se desplacen hacia afuera. Pero primero vamos a añadir esquinas redondeadas a ellos (a pesar de que esto no funcione en Internet Explorer):

PLAIN TEXT
  1. ul#navigation li a {
  2.     display: block;
  3.     margin-left: -85px;
  4.     width: 100px;
  5.     height: 70px;
  6.     background-color:#CFCFCF;
  7.     background-repeat:no-repeat;
  8.     background-position:center center;
  9.     border:1px solid #AFAFAF;
  10.     -moz-border-radius:0px 10px 10px 0px;
  11.     -webkit-border-bottom-right-radius: 10px;
  12.     -webkit-border-top-right-radius: 10px;
  13.     -khtml-border-bottom-right-radius: 10px;
  14.     -khtml-border-top-right-radius: 10px;
  15. }

Para que luzcan bien, añadiremos opacidad, y así el contenido de abajo será visible:

PLAIN TEXT
  1. ul#navigation li a {
  2.     display: block;
  3.     margin-left: -85px;
  4.     width: 100px;
  5.     height: 70px;
  6.     background-color:#CFCFCF;
  7.     background-repeat:no-repeat;
  8.     background-position:center center;
  9.     border:1px solid #AFAFAF;
  10.     -moz-border-radius:0px 10px 10px 0px;
  11.     -webkit-border-bottom-right-radius: 10px;
  12.     -webkit-border-top-right-radius: 10px;
  13.     -khtml-border-bottom-right-radius: 10px;
  14.     -khtml-border-top-right-radius: 10px;
  15.     opacity: 0.6;
  16.     filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
  17. }

La última propiedad filtro hará que esto funcione para Internet Explorer también.
Estas fueron las propiedades comunes de todos los elementos de la lista. Ahora, definimos el fondo de la imagen para los links en la lista de ítems específica:

PLAIN TEXT
  1. ul#navigation .home a{
  2.     background-image: url(../images/home.png);
  3. }
  4. ul#navigation .about a      {
  5.     background-image: url(../images/id_card.png);
  6. }
  7. ul#navigation .search a      {
  8.     background-image: url(../images/search.png);
  9. }
  10. ul#navigation .podcasts a      {
  11.     background-image: url(../images/ipod.png);
  12. }
  13. ul#navigation .rssfeed a   {
  14.     background-image: url(../images/rss.png);
  15. }
  16. ul#navigation .photos a     {
  17.     background-image: url(../images/camera.png);
  18. }
  19. ul#navigation .contact a    {
  20.     background-image: url(../images/mail.png);
  21. }

Y eso es toda la parte del CSS.

El Javascript

Usando jQuery, haremos que los iconos aparezcan siempre que pasemos el mouse sobre uno de los elementos de la lista. Recuerden, la lista de items posee un ancho de 100 píxeles, sólo el elemento link está siendo empujado fuera de la página hacia la izquierda, por lo que no es visible.

Definimos la siguiente función (antes de que finalice la etiqueta body) que se ejecuta siempre que pasamos el mouse sobre un li:

PLAIN TEXT
  1. $(function() {
  2.  $('#navigation> li').hover(
  3.   function () {
  4.    $('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
  5.   },
  6.   function () {
  7.    $('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
  8.   }
  9.  );
  10. });

Por lo que, al hacer hover, deseamos especificar que el elemento link tenga un margen izquierdo de -2 píxeles, y que eso sea animado de forma bonita y no demasiado lento (200 milisegundos). Mover el mouse fuera debería poner el elemento link nuevamente en su posición anterior (-85 píxeles). La función stop() detiene todas las animaciones que estén andando sobre los elementos especificados, lo que brinda el bonito efecto cuando, por ejemplo, se pasa con el mouse sobre todos los elementos muy rápido.

Lo que sería realmente genial, es hacer al usuario consciente de que existe una navegación tan sorprendente en la página. Por lo que sería bueno mostrar brevemente la navegación cuando la página carga. Así que dejaremos que inicialmente la navegación sea visible. Para eso cambiamos el margen izquierdo de los elementos link:

PLAIN TEXT
  1. ul#navigation li a {
  2.     display: block;
  3.     margin-left: -2px;
  4.     width: 100px;
  5.     height: 70px;
  6.     background-color:#CFCFCF;
  7.     background-repeat:no-repeat;
  8.     background-position:center center;
  9.     border:1px solid #AFAFAF;
  10.     -moz-border-radius:0px 10px 10px 0px;
  11.     -webkit-border-bottom-right-radius: 10px;
  12.     -webkit-border-top-right-radius: 10px;
  13.     -khtml-border-bottom-right-radius: 10px;
  14.     -khtml-border-top-right-radius: 10px;
  15.     opacity: 0.6;
  16.     filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
  17. }

Y añadimos la siguiente línea al comienzo de la función JavaScript:

PLAIN TEXT
  1. $(function() {
  2.  
  3.  $('#navigation a').stop().animate({'marginLeft':'-85px'},1000);
  4.  
  5.  $('#navigation> li').hover(
  6.   function () {
  7.    $('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
  8.   },
  9.   function () {
  10.    $('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
  11.   }
  12.  );
  13. });

Con esa línea definimos que debería tomar 1 segundo darle un margen izquierdo de -85 píxeles a todos los elementos link de la lista. A través del margen que programamos mostraremos la navegación al usuario y con el JavaScript luego la ocultaremos.

¡Y listo!

Si eres fanático de las sombras, también puedes añadir estas líneas en el CSS de los elementos link:

PLAIN TEXT
  1. ul#navigation li a {
  2.     display: block;
  3.     margin-left: -2px;
  4.     width: 100px;
  5.     height: 70px;
  6.     background-color:#CFCFCF;
  7.     background-repeat:no-repeat;
  8.     background-position:center center;
  9.     border:1px solid #AFAFAF;
  10.     -moz-border-radius:0px 10px 10px 0px;
  11.     -webkit-border-bottom-right-radius: 10px;
  12.     -webkit-border-top-right-radius: 10px;
  13.     -khtml-border-bottom-right-radius: 10px;
  14.     -khtml-border-top-right-radius: 10px;
  15.     -moz-box-shadow: 0px 4px 3px #000;
  16.     -webkit-box-shadow: 0px 4px 3px #000;
  17. }

Añadiendo la caja de sombra y removiendo la opacidad, les dará a los ítems de la navegación un aspecto 3D. Dejar la opacidad, los hará ver genial también, prueben y disfruten.

Fuente: Codrops


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Artículos relacionados

Comentarios (5)

  1. Jonatan dice:
    Viernes, 17 de Diciembre de 2010 a las 14.13

    gracias por conpartir, la demo genial, seguro use esto en algun proyecto

  2. Pilgrin dice:
    Sábado, 18 de Diciembre de 2010 a las 17.18

    Me parece genial esta enseñanza, es algo que estaba buscando. El problema es que soy un alumno de parvulos y para mí, falta que se indique en qué parte del css va el código. Solo veo la indicación que el Javascript va antes de body.

    Si me lo dicen regenial, si no, mantengo igualmente mi agradecimiento y gratitud por todo el contenido.

  3. Carlos Gomez dice:
    Lunes, 7 de Febrero de 2011 a las 20.07

    sencillamente genial es increible el efecto que le da a la navegación del menú lateral.

  4. Eduardo dice:
    Miércoles, 20 de Abril de 2011 a las 15.36

    Hola micaela, gracias a tu tutorial, he implementado este menú en blog de blogger, donde he creado un tutorial/a>
    para implementar este menú en un blog de la plataforma blogger. Un saludo!

  5. Stephan Barker dice:
    Martes, 3 de Mayo de 2011 a las 03.37

    Fabuloso este menu, tengo un problema solo me carga la primera imagen de todos los elementos del menu! no se que pasa favor ayuda

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Iniciar sesión