website stats » Menú drop down realizado sólo con CSS | Solo Código |

Menú drop down realizado sólo con CSS

Escrito por J.F. el Miércoles, 28 de Noviembre del 2007 a las 15:24

Encontrar un menú desplegable hecho solo con CSS sin la ayuda de Javascript es bastante difícil, pero en Pixelpreads han creado uno, sin el uso de Javascript, y con un código bastante simple. Aquí tienes el código CSS:

TEXTO PLANO
CSS:
  1. body{font-family:georgia;}
  2. #container{width:500px;margin:auto;font-size:11pt;}
  3.  
  4. #menu{position:absolute;margin-top:10px;}
  5. #menu ul .item{display:none;}
  6. #menu ul:hover .item{display:block;background:#000;padding:1px;margin:1px;}
  7.  
  8. #menu ul:hover .item a{color:#fff;text-decoration:none;}
  9. #menu ul:hover .item a:hover{color:#999;}
  10.  
  11. #menu ul{width:100px;float:left;margin:0px;padding:2px;background:#b10000;list-style:none;}
  12. .clear{clear:both;height:10px;}

Aquí un ejemplo de su uso. ¡Ojo! No es compatible con Internet Explorer 6.

TEXTO PLANO
HTML:
  2.  
  4. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  5. <title>css drop down</title>
  6. <style type="text/css">
  7. body{font-family:georgia;}
  8. #container{width:500px;margin:auto;font-size:11pt;}
  9.  
  10. #menu{position:absolute;margin-top:10px;}
  11. #menu ul .item{display:none;}
  12. #menu ul:hover .item{display:block;background:#000;padding:1px;margin:1px;}
  13.  
  14. #menu ul:hover .item a{color:#fff;text-decoration:none;}
  15. #menu ul:hover .item a:hover{color:#999;}
  16.  
  17. #menu ul{width:100px;float:left;margin:0px;padding:2px;background:#b10000;list-style:none;}
  18. .clear{clear:both;height:10px;}
  19. </style>
  20.  
  21. </head>
  23. <div id="container">
  24. <h1>css drop down</h1>
  25.  
  26. <div id="menu">
  27.  
  28. <ul id="item1">
  29. <li class="top">menu item</li>
  30. <li class="item"><a href="#">menu item 1</a></li>
  31. <li class="item"><a href="#">menu item 2</a></li>
  32. <li class="item"><a href="#">menu item 3</a></li>
  33. </ul>
  34.  
  35. <ul id="item2">
  36. <li class="top">menu item</li>
  37. <li class="item"><a href="#">menu item 1</a></li>
  38.  
  39. </ul>
  40.  
  41. <ul id="item3">
  42. <li class="top">menu item</li>
  43. <li class="item"><a href="#">menu item 1</a></li>
  44. <li class="item"><a href="#">menu item 2</a></li>
  45. </ul>
  46.  
  47. <ul id="item4">
  48. <li class="top">menu item</li>
  49. <li class="item"><a href="#">menu item 1</a></li>
  50. <li class="item"><a href="#">menu item 2</a></li>
  51.  
  52. <li class="item"><a href="#">menu item 3</a></li>
  53. <li class="item"><a href="#">menu item 4</a></li>
  54. </ul>
  55.  
  56. </div>
  57. </div>
  58. </body>
  59. </html>

Enlace: | Ver demo

Categoria: CSS

No hay comentarios

Entradas relacionadas


Deja un comentario

Escribir un comentario

Puedes usar las siguientes etiquetas HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>

Solo Código

Solo Código es una colección de códigos de todo tipo que pueden resultar útiles para el diseño de páginas web. Está enfocado tanto para aquellos que son expertos, como para aquellos principiantes que quieren encontrar recursos útiles, o no saben implementar determinadas funciones en sus webs. No olvides que Solo Código es un blog de Informática Práctica, donde tenemos otras secciones interesantes como:
| Tutoriales | Trucos | Software | Links | Buscar |