droUpDown Menu animado puro Css 22.3.16
Un dropdown menú RWD y animado tanto su despliegue y repliegue como su "icono" indicador
droUpDown Menu animado puro Css
Tarde fría de Febrero y sin nada mejor que hacer. ¿Qué tal si vemos cómo construir el típico Dropdown
. O dicho en español: un contenedor oculto por defecto y que se despliega a voluntad del visitante. Normalmente ahí irá alojada información secundaria.
En esta demo el menú se compone de una serie de imágenes. Pero su contenido es lo de menos. Puede ser una larga lista de enlaces u opciones de lo más variado.
Este tiene la particularidad que ocupa todo el viewport y en el caso de que su contenido sea mayor cuenta con scroll vertical para acceder a él.
Antes de pasar a comentar algo sobre él, la demo:
See the Pen DroUpDown by Kseso (@Kseso) on CodePen.
Marcado Html del dropdown
<input class='hide' type="checkbox" id="dropdown" name="dropdown" />
<label for='dropdown'></label>
<nav class='dropdown'>
<!-- aquí tu contenido del dropdown -->
</nav>
Como ves nada especial. Un input con su etiqueta y el menú. Por la presencia de este input ya imaginarás que todo se va a basar en el uso de la pseudoclase
:checked
El Css más significativo del dropdown
Como queremos que el menú ocupe todo el viewport lo dimensionamos al 100% de él y lo posicionamos de forma absoluta (o fixed) para que no empuje al resto de contenidos del documento.
Lo ocultamos de la vista sacándolo de la ventana con la declaración top: -100vh que es su su altura y prevenimos su desborde vertical (si su contenido es mayor que su altura) con la propiedad overflow-y
Y por último cambiamos su colocación al checked
del input. Todo esto con su transición oportuna.
nav {
background: rgba(236,72,127,.95);
position: fixed;
display: flex;
flex-flow: row wrap;
padding: 1rem 3rem;
width: 100%;
height: 100vh;
top: -100vh;
transition: .8s;
z-index: 2;
color: #fff;
overflow-y: auto;
}
#dropdown:checked ~ nav {
top: 0;
}
El Css del label del input
La culpa de toda esta demo la tiene esta etiqueta y su animación. Pues inicialmente todo surgió de cómo invertir el ángulo que muestra.
La punta de lanza la conforman los dos pseudoelementos de la etiqueta y lo que se ve es el borde superior de ellos. Su anchura es el 50% del label posicionados uno a la izquierda y el otro a la derecha.
A ambos le asigno la misma transformación de giro (rotate()) pero de signo opuesto. A estos giros les cambio el sentido con su correspondiente animación a la vez que su ubicación en la vertical (top) para lograr el movimiento.
label::before,
label::after {
content: '';
position: absolute;
top: 98%;
width: 50%;
height: 0;
border-top: 2px solid #fff;
transition: .8s;
}
label::before {
left: 0;
transform: rotate(55deg);
transform-origin: 100% 1px;
animation: flota-bef 3s infinite;
}
label::after {
right: 0;
transform: rotate(-55deg);
transform-origin: 0% 1px;
animation: flota-aft 3s infinite;
}
@keyframes flota-bef {
50% {
top: 0%;
transform: rotate(-55deg);
}
}@keyframes flota-aft {
50% {
top: 0%;
transform: rotate(55deg);
}
}
Y para terminar y que la flecha pase a recorrer toda la altura de la pantalla cuando se despliega el menú lo que hago es cambiar la altura de label de 3rem a 100vh al marcar el input:
#dropdown:checked + label {
height: 100vh;
}
El resto de estilos son para terminar de adornar la demo.
![](https://www.pinterest.com/pin/create/button/?url=https://escss.blogspot.com/2015/02/rwd-dropdown-menu-animado.html&media=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2GF3tG8_-1kaialX3lIiVg-ycIQyEj0OGCnS2ZUgmWe7DnE3jPCEnUSoYnaXWrZbS_TeRC7UDY2gc-72CROgmvPDIDG-4seFKCDtgfiSn9-WDQJoyeZD_16saE7v_rMQiF2gyhsGxIT4/s800/droUpDown.jpg&description=Un dropdown menú RWD y animado tanto su despliegue y repliegue como su "icono" indicador){kind=link}
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso
Este comentario ha sido eliminado por un administrador del blog.
ResponderEliminar