Menu desplegable

Hoy quiero compartir con vosotros como construir un menú desplegable como el que veis en la cabecera de este blog, o vertical como el que os muestro a continuación de ejemplo:
Bueno compañeros, no os asusteis que es muy sencillito, sólo tiene CSS. Veamos
  1. En primer lugar, construimos el código html de nuestro menú con listas convenientemente anidadas mediante las etiquetas <ul> y <li>, que añadiremos como elemento HTML a nuestra plantilla.

    Sirva como ejemplo el código correspondiente al menú del ejemplo anterior:


  2. Ahora le daremos de estilo para obtener un menú vertical como el del ejemplo, para ello empleamos el siguiente CSS que os presento:


    Como veis, excepto los campos display y position es completamente personalizable. Jugar con los márgenes puede permitirnos desplegar las opciones por un lateral, por abajo... la imaginación es cosa vuestra.

    Sin embargo, hay que tener mucho cuidado al cambiar width, porque tambien debemos aplicar el mismo cambio a la posicion relativa left de sus menus interiores para que no se superpongan.
Bueno, y eso es todo. Espero que os sea útil, si os queda alguna duda o os da problema pues deja un comentario y miramos de que se trata ;)

Sen máis...

5 comentarios:

Alex dijo...

Estimado amigo bloguero:

Tras haber revisado cuidadosamente tu blog o fogar do chimpín, el staff de Blogotepeque.blogspot.com ha dedicido entregarte el premio BlogÓscar 2009, tomando en cuenta la originalidad e integridad de tus posts, la frecuencia y calidad de tus publicaciones, la facilidad de navegación de su sitio web, el nivel de influencia y aceptación popular, y el impacto positivo que tienes en la comunidad.

Felicidades!

Para poder ver y reclamar tu premio, visita la página a continuación, en la que encontrarás las instrucciones.

http://premiosblogoscar.blogspot.com/2009/02/como-reclamar-tu-premio.html

Una vez hayas aceptado este premio y lo luzcas orgulloso en tu blog, por favor déjanos un mensaje en Premiosblogoscar.blogspot.com para que te agreguemos en la lista de blogs premiados, la cual publicaremos dentro de muy poco.

Un abrazo de tu amigo bloguero,

Alex Schonenberg
Blogotepeque.blogspot.com

Aguante Huracan dijo...

no me funciona, ¿a donde se coloca el segundo codigo?

Deybi dijo...

Hola Kaka.

Tengo una duda ¿Cómo voy a poner las direcciones? Eso no lo explícas, amigo.

¡Saludos!.

Jaime Trujillo Escobedo dijo...

Deybi, yo tengo un menú similar, las direcciónes se ponen sustituyendo:

Subopcion X por esta línea:

<a href="URL">TITULO</a>

¡Saludines Deybi y Kaka! ^_^

Carlos Alberto Ramos Parraci dijo...

Hola kaka necesito que me des una mano con tu menu desplegable, me parece una opción muy buena quisiera pedirte el favor de explicarme un poco mas especifico, pues intento colocar tu herramienta en www.cparraci.blogspot.com, especificamente en la sidebar derecha, te agradezco de todo corazòn espero pronta y satisfacoria respuesta

 
Fogar do Chimpín, 2008
Plantilla de diseño propio.