Elegante menú Vertical tipo Slider con transiciones de CSS3

Bienvenidos a otro Workshop de HTML Y CSS En esta oportunidad vamos a crear otro menú tipo slider con efectos de transición de css3 (Otros Ejercicios de menú con propiedades de CSS3: menú 1menú 2), un ejercicio donde crearemos un hermoso menú que a la vez es muy práctico, muy sencillo y fácil para usar en algunos de nuestros proyectos.

Esto es lo que vamos a conseguir, el resultado de nuestro ejercicio de hoy:

Para una perfecta Visualización utiliza estos navegadores en sus respectivas versiones:

visualizacion-navegadores

Vamos a comenzar!!.

EL HTML

En el código html básicamente tenemos un div contenedor <div id=”slider”>, luego una lista desordenada <ul> en ella su respectivo ítem <li> y el enlace <a> que al situarnos sobre el desplegara una acción, se despliega el <div> interior que a su vez tiene un titulo <h5>, un párrafo <p> que es el texto de introducción y dentro de un párrafo <p> tenemos el enlace a ver mas. Esto es todo lo que tenemos en el código html, Fácil cierto.
seria mas o menos algo asi:
imagen - menu css3 verical

EL CSS

El código css que generamos también es muy intuitivo y fácil de comprender, pero hare referencia a algunas propiedades. En el div #slider ul:before que es la parte que nos mostrara los enlaces, damos algunas propiedades importantes, por ejemplo el Gradient o degradado, para eso utilizamos una herramienta generadora de css online http://www.colorzilla.com/gradient-editor/ para hacer este trabajo, y lo generamos para los distintos navegadores. Y la propiedad de transición que nos hace este trabajo elegante se la aplicamos al <div> que se encuentra dentro del ítem <li> de la lista <ul> del <div slider>, igualmente generamos el código transition para los diferentes navegadores según su prefijo. Lo demás es código css de posicionamiento y para hacer la parte visual muy agradable.

Adicionalmente te recomiendo adjuntar o incluir el código reset css de http://meyerweb.com/eric/tools/css/reset/ o algun otro codigo css para resetear los css de los diferentes navegadores para tener un mejor control de nuestro ejercicio.
Esto es todo por este ejercicio, pero se puede crear mas, aumentar su funcionalidad pero ya lo dejo a tu imaginación.
———

———
Nos vemos en otro tutosytips !!!

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo

10 Respuestas

  1. AlvaroJSD dice:

    Buen aporte, muchas gracias.

  2. hernan dice:

    perfecto… Gracias por el aporte.

  3. Eliseo dice:

    Gracias, usas dominio propio cierto? en k estoy en duda

  4. Marco dice:

    Muy buena tu web, la agrego a mis marcadores para futuras dudas. Sigue así. Un saludo.

  5. Noe dice:

    muy buen aporte, no puedo dercargar el archivo!!

  6. Federick dice:

    Gracias por el aporte brother,, ah por cierto, bien blog.