Menú con descripciones

Menu Descriptions es otro gran experimento de Mike Cherim. Sólo requiere CSS y se adapta bien a cualquier navegador.

Se trata de dos columnas, la de la izquierda es un menú y la de la derecha cierto contenido. Al colocar el cursor sobre cada item del menú, este se expande superponiéndose al contenido. Pero, mejor es verlo en acción:

Ejemplo Contenido

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras et velit in ipsum convallis sagittis. Nunc eu ipsum. Nullam eget velit. Sed molestie erat in turpis. Aenean adipiscing elit interdum elit. Integer lobortis sollicitudin odio. Maecenas augue eros, blandit non, ultrices non, blandit quis, pede. Nullam tempus, velit eu pharetra rhoncus, odio ligula venenatis neque, eu ornare nisi mauris nec ligula.

Morbi convallis consequat dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean lorem orci, sodales at, ornare eu, tristique sed, enim. Curabitur placerat faucibus velit. Quisque dui sapien, fringilla nec, iaculis ut, consequat eget, libero. Praesent tempor metus nec enim. Duis mollis vehicula nisi. Donec ornare.

El Menú

• Inicio Aquí va un texto explicativo del menú INICIO ...
  Bienvenidos a blablabla o lo que quiera ponerse ...
  Puede usarse CSS para personalizarlo.
• Blog Aquí va un texto explicativo del menú BLOG ...
  Que es cualquier otra cosa que quiera ser mostrada, incluyendo imágenes
• Contacto Aquí va un texto explicativo del menú CONTACTO ...
  No pregunten. Esto es sólo un experimento así que cada uno verá la utilidad que puede darle ...

El HTML lo construimos con este modelo:

<div id="exp_content">
  <div id="cmd_wrapper">
    <div id="cmd_content">
      <h2>Contenido</h2>
      <p>Lorem ipsum dolor sit amet ...</p>
    </div>
    <div id="cmd_sidebar">
      <h2>Menú</h2>
      <ul id="cmd">
        <li><a href="#"><strong>Enlace 1</strong> <span>Aquí va un texto explicativo del enlace 1 ...</span></a></li>
        <li><a href="#"><strong>Enlace 2</strong> <span>Aquí va un texto explicativo del enlace 2 ...</span></a></li>
        <li><a href="#"><strong>Enlace 3</strong> <span>Aquí va un texto explicativo del enlace 3 ...</span></a></li>
      </ul>
    </div>
  </div>
  <div style="clear:both;"></div>
</div>

Todo está incluido en en dos DIVs, uno externo exp_content y otro interno cmd_wrapper que es la mejor forma de lidiar con las flotaciones y evitar problemas en Internet Explorer.

Dentro de ellos hay otros dos DIVs que flotan, uno a la derecha (cmd_content) y otro a la izquierda (cmd_sidebar). El primero es un bloque normal con cualquier contenido y el segundo es el que tendrá las propiedades para expandirse y que serán las que se definan para la lista (cmd).

Este es el CSS necesario:

<:style type='text/css'>:

#exp_content {
  height: auto;
  margin: auto;
}
#cmd_wrapper { /* el contenedor centrado y con un ancho fijo */
  margin: 0 auto;
  width: 610px;
}

#cmd_content { /* el bloque derecho con un contenido cualquiera */
  background-color: #color;
  display: inline;
  float: right;
  width: 450px;
}
#cmd_content h2, #cmd_sidebar h2 { /* los títulos */
  margin: 5px;
  [... cualquier otra propiedad ...]
}
#cmd_content p { /* los párarfos */
  margin: 15px;
  [... cualquier otra propiedad ...]
}

#cmd_sidebar { /* el bloque izquierdo con el menú */
  display: inline;
  float: left;
  width: 150px;
}

ul#cmd { /* el bloque con la lista expandible */
  list-style-type: none;
  margin: 5px 0;
}
ul#cmd li { /* cada item de la lista */
  background: none;
  list-style-type: none;
  padding: 0;
  margin-bottom: 5px;
}

ul#cmd a { /* cada item de la lista es un enlace que permite expandirla */
  display:block;
  cursor:pointer;
  height: 4em;
  padding: 5px;
  position:relative;
  width:140px;
  text-decoration:none;
  [... propiedades de las fuentes, colores, fondos, etc ...]
}
ul#cmd a span { /* los items expandidos */
  cursor: pointer;
  display: block;
  height: 4em;
  left: -9000px;
  padding: 5px 0;
  position: absolute;
  top: -9000px;
  width: 400px;
  [... propiedades de las fuentes, colores, fondos, etc ...]
}
ul#cmd a:hover, ul#cmd a:focus, ul#cmd a:active {
  [... propiedades optativas del efecto hover ...]
}

/* esto es lo que hace que se expanda cada item */
ul#cmd a:hover span, ul#cmd a:focus span, ul#cmd a:active span {
  left :100px;
  top:-1px;
}

</style>