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

Vamos a seguir con el menú que dejamos ayer, ahora lo que tendremos que conseguir es que aparezcan ciertas capas en el momento de pulsar los botones del menú, para ello, tendremos que modificar ligeramente el código fuente html y que quede algo parecido a esto:

<section class="contenedor_menu">
    <input type="checkbox" name="boton_desplegable" id="bd1" />
    <label for="bd1">Menu con css3 y html5</label>
    <article>
        <div class="boton1">
            <input type="checkbox" name="boton_desplegable" id="b1" />
            <label for="b1">INICIO</label>
            <article>Texto de página de incio</article>
        </div>
        <div class="boton2">
            <input type="checkbox" name="boton_desplegable" id="b2" />
            <label for="b2">OPCIONES</label>
            <article>Texto de página de opciones</article>
        </div>
        <div class="boton3">
            <input type="checkbox" name="boton_desplegable" id="b3" />
            <label for="b3">SOBRE MI</label>
            <article>Texto de página sobre mi</article>	
        </div>
        <div class="boton4">
            <input type="checkbox" name="boton_desplegable" id="b4" />
            <label for="b4"><a href="#">BLOG</a></label>
        </div>
    </article>
</section>

Como vemos, lo que hemos hecho ha sido emplear la misma estructura que la empleada para hacer el post anterior, pero hemos creado subestructuras idénticas para cada uno de los botones. De este modo, sabremos cuándo hay que mostrar cada capa gracias al input y al label asociado a él.

Lo que hará el menú ahora es mostrar el article en el momento en que el input relacionado con su etiqueta esté activo. Pero para ello hay que añadir algo de código a nuestro css… Veamos:

Empezaremos con el botón1:

div.boton1 {
	margin-top:15px;
}
div.boton1 label {
	cursor:pointer;
}
.boton1 input:checked ~ article {
	height:90px;
}

Le hemos dado un margen superior para que queden más separados entre sí, y más separados de la imagen, además hemos modificado el cursor del ratón para que cuando esté sobre el botón1 aparezca la mano de clickar de windows… Por último, le hemos dicho que cuando esté activo el input ligado a él, el article de su misma capa tome una altura de 90 pixels de forma que sea visible desplazando todo lo demás hacia abajo.

Ésto que hemos realizado con esta capa, lo tendremos que realizar con las tres restantes de forma muy similar, ya que lo único que vamos a cambiar será el cursor de cada botón (por añadir algo nuevo, no es necesario)…

div.boton2 {
	margin-top:15px;
}
div.boton2 label {
	cursor:crosshair;
}
.boton2 input:checked ~ article {
	height:90px;
}

En este caso, al botón de opciones le hemos puesto un puntero como cursor, en realidad ha sido debido a que no hay ningún otro apropiado ni que me llame mucho la atención…

div.boton3 {
	margin-top:15px;
}
div.boton3 label {
	cursor:help;
}
.boton3 input:checked ~ article {
	height:60px;
}

Al tercer botón, el de SOBRE MI, le pondremos un cursor de ayuda y además le hemos bajado la altura que adquiere debido a que será un texto más pequeño, pero claro, podréis ponerle la altura que necesitéis en cada momento, siempre que os acordéis de ampliar también la altura de todo el menú, para que de este modo, al bajar las distintas capas, no desaparezcan los elementos posteriores.

div.boton4 {
	margin-top:15px;
}

El cuarto y último botón de mi menú simplemente lleva esto, ya que es un enlace a éste blog y por lo tanto, no es necesario que aparezca ninguna capa…

Y con esto ya tenemos finalizado el menú que comenzamos a realizar ayer… Vuelvo a dejar el enlace del ejemplo por si alguien se ha perdido…😉

Menú acordeón y aparición de botones y capas con css3

P.D.: si hay algo que no entendéis o cualquier duda mientras programáis o incluso si queréis que haga algún menú u otro efecto que se os ocurra, por favor, comentar, que para eso está, muchas gracias!

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: