Animated Border Menu al estilo Codrops en puro Css 2.10.13

Emulando en puro Css la demo "Animated Border Menus" original de Codrops

Animated Border Menu al estilo Codrops en puro Css

·Por Kseso ⧉ 2.10.13 ⚑ :target ⚑ demo ⚑ pseudoclase ✎ 0

Hace unas fechas Codrops publicaba una serie de demostraciones "Animated Border Menus". Su autora, Mary Lou (Manoela Ilic), explica perfectamente en el artículo cómo están realizadas las distintas demos: el marcado html usado, el Css necesario y el javascript utilizado para añadir o retirar clases para lograr la vistosidad de las demos.

Uno que es curioso y amante de los retos nada más ver el artículo me preguntaba si sería posible lograr lo mismo pero en puro Css. Esto es, prescindiendo del js del original.

Y adivina qué sigue...

Animated Border Menus al estilo Codrops puro Css

Efectivamente. Es posible. replicar el efecto prescindiendo de la ayuda del js para añadir o quitar clases a los elementos del html.

Una advertencia antes de seguir: verás que la demo elegida por mi no es exactamente la misma (en efectos y otros aspectos estéticos) a la original. No fue esa mi intención.

Ver demo puro Css

See the Pen Animated Border Menus pure Css by Kseso (@Kseso) on CodePen

Una pequeña explicación

Como poco podría añadir a las completas y extensas explicaciones del artículo original base e inspiración de éste en Codrops sólo unos apuntes de los cambios más significativos:

Marcdo html

El etiquetado html es básicamente el mismo. Sólo cambio un div vacío y un span para controlar el menú en el original por dos más dos span:


<span class="diana" id="abrir"></span>
<span class="diana" id="cerrar"></span>

<nav class="bt-menu" id="bt-menu">
     <a class="abrir fontawesome-*" href="#abrir"><span>Menu</span></a>
     <a class="cerrar fontawesome-*" href="#cerrar"><span>Cerrar</span></a>
    
  <ul>
     <li><a class="fontawesome-*" href="#">Compartir</a></li>
     <li><a class="fontawesome-*" href="#">Favorito</a></li>
     <li><a class="fontawesome-*" href="#">Refrescar</a></li>
     <li><a class="fontawesome-*" href="#">Configurar</a></li>
     <li><a class="fontawesome-*" href="#">Bloquear</a></li>
  </ul>
</nav>

Básicamente, el funcionamiento de la demo se basa en el artículo "Sistema de pestañas (tabs) Css con :target sin salto y RWD". Échale un vistazo si tienes dudas.

Para una mejor comprensión de este aspecto en esta demo he mantenido el nombre de la clase de los dos span (class='diana') que usé en el artículo sobre cómo anular el salto de ':target'

Los dos enlaces iniciales de 'nav' con clase 'abrir' y 'cerrar' los utilizo para mostrar el icono del navicon que corresponda: el ☰ para abrir el menú y el - para cerrarlo.

El Css utilizado

Todo se reduce a aplicar unas propiedades u otras al menú (la lista contenida en 'nav') en función de si se se selecciona (:target) la diana (span) 'abrir' o 'cerrar'


/*menú oculto*/
.bt-menu {
    background-color: rgba(0, 0, 0, 0);
    border-color: #f5f5f5;
    border-style: solid;
    border-width: 0;
    height: 0;
    left: 0;
    position: fixed;
    top: 0;
    transition: border-width .5s, background-color .5s 0s, height 0s linear 0.3s;
    width: 100%;
    box-shadow: 0 0 5px 3px rgba(0,0,0,.4) inset;
}
/*Menú desplegado*/
#abrir:target ~ .bt-menu {
    background-color: rgba(0, 0, 0, 0.5);
    border-width: 2rem 2rem 2rem 5rem;
    height: 100%;
    transition: border-width 0.5s, background-color 0.5s;
}

To el resto del Css utilizado es para lograr la apariencia deseada. Incluido el que el scroll quede oculto por el borde del menú. Y repito, no ha sido mi intención hacer un clon exacto de la demo original de Codrops

Ver demo puro Css - Ver demo Codrops

Advertencias finales

A poco que mires los códigos, especialmente el Css, verás que no están optimizados. Busco más que nada que sea fácilmente comprensible. Por eso los selectores están conformados como están.

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.