Micaela 1 de Diciembre de 2009 a las 16.14
   Imprimir artículo
elWebmaster.com

CSS: Crea un menú de íconos al estilo Apple Dock

CSS, Apple, menú, html, icono, IE, jQuery, Dock, carrusel, px

Seguramente estén familiarizados con el plugin jQuery Dock que permite a los desarrolladores crear un menú como la Apple Dock.

En el artículo de hoy, te enseñaremos cómo crear un menú similar con el efecto burbuja utilizando simplemente CSS.

Método 1: Sprites CSS

Utilizar sprites CSS es la forma más simple de lograr el efecto burbuja. Sólo necesitas cambiar la imagen de fondo.

Al principio, tu HTML debería lucir así:

PLAIN TEXT
  1. <ul id="bubble">
  2.       <li>
  3.         <a class="icon feed" href="http://feeds2.feedburner.com/prlamnguyen" title="Full RSS Feed">Full RSS Feed</a>
  4.       </li>
  5.       <li>
  6.         <a class="icon email" href="http://feedburner.google.com/fb/a/mailverify?uri=prlamnguyen&loc=en_U" title="Feed via Emal">Feed via email</a>
  7.       </li>
  8.       <li>
  9.         <a class="icon twitter" href="http://twitter.com/prlamnguyen" title="Full RSS Feed">Follow me on Twitter</a>
  10.       </li>
  11.       <li>
  12.         <a class="icon facebook" href="http://facebook.com/duylamng" title="Full RSS Feed">I'm on Facebook</a>
  13.       </li>
  14.       <li>
  15.         <a class="icon delicious" href="http://delicious.com/save" onclick="window.open('http://delicious.com/save?v=5&amp;noui&amp;jump=close&amp;url=http://aext.net&amp;title=AEXT.NET', 'delicious','toolbar=no,width=550,height=550'); return false;" title="Full RSS Feed">Save me</a>
  16.       </li>
  17.       <li>
  18.         <a class="icon technorati" href="http://technorati.com/faves?sub=addfavbtn&add=http://aext.net" title="Full RSS Feed">Fave me</a>
  19.       </li>
  20.     </ul>

Después de preparar la imagen para sprites, debería lucir así:

sprites

Este es el código CSS que necesitas para crear la lista de menús y el fondo de imagen por defecto de los links:

PLAIN TEXT
  1. #bubble {
  2.     list-style: none;
  3.     margin: 0px;
  4.     padding: 0px;
  5. }
  6. #bubble li {
  7.     display: inline-block;
  8.     margin: 0px;
  9.     padding: 0px;
  10.  
  11. }
  12.  
  13. #bubble li a.icon {
  14.     background: url(images/sprites.png) no-repeat;
  15.     border: none;
  16.     display: block;
  17.     width: 128px;
  18.     height: 128px;
  19.     text-indent: -9999px;
  20. }

Es muy importante al utilizar sprites CSS calcular las dimensiones de la imagen de fondo. Es necesario ser preciso con los píxeles. Necesitarás utilizar el CSS de abajo para cambiar la imagen de fondo de los links.

PLAIN TEXT
  1. #bubble li a.feed {
  2.     background-position: -139px -12px;
  3. }
  4. #bubble li a.feed:hover {
  5.     background-position: -13px -12px;
  6. }
  7. #bubble li a.email {
  8.     background-position: -139px -149px;
  9. }
  10. #bubble li a.email:hover {
  11.     background-position: -13px -149px;
  12. }
  13. #bubble li a.twitter {
  14.     background-position: -139px -283px;
  15. }
  16. #bubble li a.twitter:hover {
  17.     background-position: -13px -283px;
  18. }
  19. #bubble li a.facebook {
  20.     background-position: -139px -422px;
  21. }
  22. #bubble li a.facebook:hover {
  23.     background-position: -13px -422px;
  24. }
  25. #bubble li a.delicious {
  26.     background-position: -139px -559px;
  27. }
  28. #bubble li a.delicious:hover {
  29.     background-position: -13px -559px;
  30. }
  31. #bubble li a.technorati {
  32.     background-position: -139px -698px;
  33. }
  34. #bubble li a.technorati:hover {
  35.     background-position: -13px -698px;
  36. }

Y ese es el método 1. Muy fácil y simple. Ahora, veamos el método 2, el intercambio de imagen.

Método 2: Intercambio de imágenes

Con este método, utilizarás más HTML y menos CSS. Ya que usaremos 2 imágenes para cada link, el código HTML completo debería lucir como este:

PLAIN TEXT
  1. <ul id="bubble2">
  2.       <li>
  3.         <a href="http://feeds2.feedburner.com/prlamnguyen" title="Full RSS Feed">
  4.             <img class="small" src="images/feed.png" alt="Full RSS" />
  5.             <img class="large" src="images/feed_large.png" alt="Full RSS" />
  6.         </a>
  7.       </li>
  8.       <li>
  9.         <a href="http://feedburner.google.com/fb/a/mailverify?uri=prlamnguyen&loc=en_U" title="Feed via Emal">
  10.             <img class="small" src="images/email.png" alt="Feed via Emal" />
  11.             <img class="large" src="images/email_large.png" alt="Feed via Emal" />
  12.         </a>
  13.       </li>
  14.       <li>
  15.         <a href="http://twitter.com/prlamnguyen" title="Follow me on Twitter">
  16.             <img class="small" src="images/twitter.png" alt="Follow me on Twitter" />
  17.             <img class="large" src="images/twitter_large.png" alt="Follow me on Twitter" />
  18.         </a>
  19.       </li>
  20.       <li>
  21.         <a href="http://facebook.com/duylamng" title="I'm on Facebook">
  22.             <img class="small" src="images/facebook.png" alt="I'm on Facebook" />
  23.             <img class="large" src="images/facebook_large.png" alt="I'm on Facebook" />
  24.         </a>
  25.       </li>
  26.       <li>
  27.         <a href="http://delicious.com/save" onclick="window.open('http://delicious.com/save?v=5&amp;noui&amp;jump=close&amp;url=http://aext.net&amp;title=AEXT.NET', 'delicious','toolbar=no,width=550,height=550'); return false;" title="Save me">
  28.             <img class="small" src="images/delicious.png" alt="Save me" />
  29.             <img class="large" src="images/delicious_large.png" alt="Save me" />
  30.         </a>
  31.       </li>
  32.       <li>
  33.         <a href="http://technorati.com/faves?sub=addfavbtn&add=http://aext.net" title="Fave me on Technorati">
  34.             <img class="small" src="images/technorati.png" alt="Fave me on Technorati" />
  35.             <img class="large" src="images/technorati_large.png" alt="Fave me on Technorati" />
  36.         </a>
  37.       </li>
  38.     </ul>

En este método, haremos algunos cambios. El efecto hover hará que el botón seleccionado se mantenga sobre los otros. La diferencia entre el anterior método y éste es que aquí se debe programar la altura y el ancho para los elementos <li> , ya que no queremos que la lista se mueva y cambie de tamaño cuando el mouse esté sobre ella.

El código CSS para la lista es el siguiente:

PLAIN TEXT
  1. #bubble2 {
  2.     list-style: none;
  3.     margin: 20px 0px 0px;
  4.     padding: 0px;
  5. }
  6. #bubble2 li {
  7.     display: inline-block;
  8.     margin: 0px 5px;
  9.     padding: 0px;
  10.     width: 72px;
  11.     height: 72px;
  12. }

72px es el tamaño de las imágenes pequeñas. Puedes programarlas más grandes, pero no demasiado.

El CSS para el link es:

PLAIN TEXT
  1. #bubble2 li a img {
  2.     position: relative;
  3.     border: none;
  4. }
  5.  
  6. #bubble2 li a img.large {
  7.     display: none;
  8. }
  9.  
  10. #bubble2 li a:hover img.small {
  11.     display: none;
  12.     z-index: 0;
  13. }
  14.  
  15. #bubble2 li a:hover img.large {
  16.     display: block;
  17.     margin-top: -28px;
  18.     margin-left: -28px;
  19.     z-index: 1000;
  20. }

Recuerda configurar la posición de la imagen en relative, porque configuraremos z-index para las imágenes grandes y el z-index funciona sólo con posición absoluta o relativa.

native-image-changing

Cuando el mouse pasa por encima, configuraremos el margen de la imagen en 28px porque cuando agrandamos las imágenes, queremos que la más grande tenga el mismo centro que la pequeña. Es muy importante ver el efecto zoom. La cantidad de pixel que necesitamos para el margen se calcula como

  • margin-top= - (altura de la imagen grande - altura de la imagen chica)/2
  • margin-left= - (ancho de la imagen grande - ancho de la imagen chica)/2

Finalmente, añade este código a tu archivo HTML para que el menú sea visible en IE:

PLAIN TEXT
  1. <!--[if IE 7]>
  2. <style type="text/css">
  3. #bubble li, #bubble2 li {
  4.     display: inline;
  5. }
  6. </style>
  7. <![endif]-->

Y listo.

Haz clic aquí para ver una demostración »
Haz clic aquí para descargar el código »

Se puede usar z-index para el método 1 también. Este tutorial sólo separa los dos métodos para una mayor comprensión.

Fuente: Aext.net

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

Artículos relacionados

Deja tu opinión

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