Menú aparición capa y efecto acordeón hover

Vamos a crear un curioso y sencillo menú acordeón gracias a la idea del blog de Niclick . Lo que voy a intentar es desarrollar un menú similar al suyo pero realizado íntegramente en css3 y además añadiré un efecto acordeón, para que al entrar en cualquier botón del menú, se desplace todo lo siguiente hacia abajo…
La realización será mediante dos posts, el primero lo dedicaremos a realizar el menú en sí, y el segundo a realizar el efecto acordeón, en el que aparecerán las capas una a una según vayamos pulsando los botones, y desplazarán todo lo siguiente hacia abajo…
Lo primero que haré será explicar el código fuente que emplearemos para el menú:

<section class="contenedor_menu">
    <input type="checkbox" name="boton_desplegable" id="bd1" />
    <label for="bd1"><img src="../../../imagenes/iconos/boton_on.png" alt="Menu con css3 y html5"/></label>
    <article>
        <div>INICIO</div>
        <div>OPCIONES</div>
        <div>SOBRE MI</div>
        <div>BLOG</div>
    </article>
</section>

Tenemos una capa principal llamada “contenedor_menu”, en la que irá todo el menú como tal, dentro de esa capa, tenemos un input “checkbox” que es el que nos dirá cuándo está seleccionada la label o etiqueta, que en este caso es una imagen, y por último, tenemos un article que serán los botones del menú, que es lo que aparecerá o desaparecerá cuando la label esté seleciconada…
Vamos a seguir programando los css para cada elemento del menú, y explicándolos, claro… Empezamos por la principal, contenedor_menu:

.contenedor_menu {
    position:relative;
    top:30px;
    width:100%;
    left:0;
    text-align:center;
}

Simplemente estilado, para que quede en el centro de la pantalla y a una altura del mínimo de 30 pixels.
Vamos a seguir por la imagen:

.contenedor_menu img {
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}
.contenedor_menu img:hover {
    cursor:pointer;
    transform: rotate(720deg);
    -webkit-transform: rotate(720deg);
    -moz-transform: rotate(720deg);
    -o-transform: rotate(720deg);
}

Como vemos, le hemos puesto un transition de 0.5 segundos para que realice su efecto hover, y en dicho efecto, le hemos puesto un cursor tipo mano, el de defecto de señalar de windows, y un transform rotate, para que en los 0.5 segundos que tarda en realizar el efecto, de dos vueltas completas…
Seguimos con el article, que será lo que se vea cuando el checkbox esté seleccionado:

.contenedor_menu article {
    position:relative;
    overflow:hidden;
    text-align:center;
    font-family:cursive;
    height:0;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}

Me limitaré en este caso a explicar lo que no sea estilo o visual, que es el height:0, que nos sirve para que no se vea el menú, debido a que tendrá una altura nula, osea invisible, y el transition 0.5 segundos que ya sabemos para qué sirve.
Ahora nos falta el decirle al navegador cuándo está pulsada la imagen o cuándo no:

.contenedor_menu input {
    display:none;
}
.contenedor_menu input:checked ~ article {
    height:400px;
}

Con esto, le decimos que oculte el cuadro del checkbox y que cuando esté pulsado, el article tenga una altura de 400 pixels, de esta forma, todo lo que esté en el interior del article que antes tenía una altura de 0 pixels y debido a eso no se veía, ahora tendrá una altura de 400, haciéndose visible…
Por último, le daremos un color al fondo de la página para que quede más atractivo, y quitaremos cualquier decoración de los enlaces (<a>):

a {
    text-decoration:none;
    color:#CCCCCC;
}
body {
    background:#0066FF;
}

Por ahora es suficiente, no quiero asustar con un post larguísimo, pero en el siguiente completaremos el menú para que quede exáctamente igual a éste:
Curioso menú con html5 y css3 gracias a efectos hover

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: