Crear un Dropdown con CSS

Eduardo 27 September 2009 3 comentarios En: CSS

Algo muy útil y muy usado en el diseño web es usar menús despegables o más conocidos como “dropdowns”, que si bien su funcionalidad es básica su construcción puede tornarse un poco difícil. Por eso les traigo una opción que encontré en http://www.lwis.net/ y que me pareció lejos el mejor de todos los que vi.

1. Instalando

Vale aclarar que el dropdown es compatible con todos los navegadores modernos, sin embargo debido a que IE6 no hace uso del CSS 2.1 deberemos usar un pequeño script (en mootools o jquery) para forzar la compatibilidad.

La magia de todo la hace el archivo dropdown.css que podremos descargar mas abajo.

  <link rel="stylesheet" type="text/css" media="all" href="dropdown.css" />

  <!--[if lt IE 7]>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.2/mootools-yui-compressed.js"></script>

  <script type="text/javascript" src="mootools.dropdown.js"></script>
  <![endif]-->

Usar el jquery.dropdown.js en caso de tener instalado jQuery en nuestra página, y no olvidarse de borrar el script de mootools en Google ya que ambos frameworks no funcionan juntos.

2. Creando el Dropdown

Para crear el menú maquetamos una lista con la class.dropdown:

<ul class="dropdown">
  <li><a href="#">Home</a></li>
  <li><a href="#">Simple Dropdown</a>
    <ul>
      <li><a href="#">Hello World</a></li>
    </ul>
  </li>
</ul>

Luego podremos personalizar nuestro menú:

  <style>
    ul.menu li a
    {
      background:#00B0D8;
      padding:5px 10px;
      font-family:"Arial";
      text-decoration:none;
      color:#FFFFFF;
    }

    ul.menu li a:hover
    {
      background:#fff;
      color:#999999;
    }

  </style>

Eso fue todo! En el próximo artículo veremos como agregar efectos de aparición y fade a nuestro dropdown