Como hacer un menu con efecto como Youtube

Tabla de Contenidos

En este tutorial vamos a ver como crear un menú con efecto como se podía ver en la parte izquierda de Youtube cuando vemos un vídeo, (donde pone Guia). El menú se compone de un pequeño icono, una etiqueta y una lista de elementos que aparecen cuando pulsamos en la etiqueta o en el icono del menú. Una vez que entramos el icono se desplaza a la derecha y la etiqueta se mueve hacia arriba, mientras que los elementos de la lista aparecen en forma de secuencias. A continuación veremos como añadir un poco más de estilo y efectos para que sea algo más llamativo. También te puede interesar el tutorial de como incluir vídeos de Youtube como fondo en un sitio web.

El marco

Para obtener el código HTML usaremos un elemento nav y en el interior vamos a añadir un div que contendrá el icono del menú y la etiqueta. Vamos a usar una lista no ordenada de los elementos del menú:



<nav id="dr-menu" class="dr-menu">
    

<div class="dr-trigger"><span class="dr-icon dr-icon-menu"></span><a class="dr-label">Account</a></div>


    

<ul>
        

<li><a class="dr-icon dr-icon-user" href="#">User Name</a></li>


        

<li><a class="dr-icon dr-icon-camera" href="#">Videos</a></li>


        

<li><a class="dr-icon dr-icon-heart" href="#">Favorites</a></li>


        

<li><a class="dr-icon dr-icon-bullhorn" href="#">Subscriptions</a></li>


        

<li><a class="dr-icon dr-icon-download" href="#">Downloads</a></li>


        

<li><a class="dr-icon dr-icon-settings" href="#">Settings</a></li>


        

<li><a class="dr-icon dr-icon-switch" href="#">Logout</a></li>


    </ul>


</nav>

Cada elemento del menú tendrá un pequeño icono, así que vamos a ver todas las clases diferentes para estos. Los iconos que usaremos son de IcoMoon y que han creado un icono personalizado aplicación estrella.

Vamos ver ahora las CSS.

Las CSS

Lo primero que hacemos es incluir nuestra fuente de iconos:

@font-face {
    font-family: 'icomoon';
    src:url('../fonts/icomoon.eot');
    src:url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),
        url('../fonts/icomoon.woff') format('woff'),
        url('../fonts/icomoon.ttf') format('truetype'),
        url('../fonts/icomoon.svg#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

El contenedor nav tendrá algunos estilos generales, como el tamaño de letra, altura de línea, el color y las dimensiones. Queremos que sea flexible, pero no queremos que se convierta en demasiado grande o demasiado pequeño, por lo que vamos a establecer un máximo de ancho y un mínimo (max-width y min-width):

.dr-menu {
    width: 100%;
    max-width: 400px;
    min-width: 300px;
    position: relative;
    font-size: 1.3em;
    line-height: 2.5;
    font-weight: 400;
    color: #fff;
    padding-top: 2em;
}

La división que contiene el icono del menú para su ajuste y la conexión de la etiqueta se coloca al máximo y situamos el cursor en «puntero». Se necesita un z-index alto para garantizar que la lista no ordenada no se queda en la parte superior de la misma:

.dr-menu > div  {
    cursor: pointer;
    position: absolute;
    width: 100%;
    z-index: 100;
}

El icono del menú nuestra la división donde también se utiliza todo y le damos una transición:

.dr-menu > div .dr-icon {
    top: 0;
    left: 0;
    position: absolute;
    font-size: 150%;
    line-height: 1.6;
    padding: 0 10px;
    transition: all 0.4s ease;
}

Cuando entramos en la división, le vamos a añadir una clase llamada «dr-menu-open» en el nav. Con esto el icono del menú se desliza hacia la izquierda y también traduce para la misma cantidad del propio ancho y todo quede en su lugar sin descolgarse:

.dr-menu.dr-menu-open > div .dr-icon {
    color: #60a773;
    left: 100%;
    transform: translateX(-100%);
}

Al final de las CSS añadimos nuestras clases de los iconos de IcoMoon. El espacio del icono del menú será un poco diferente, para esto vamos a utilizar una pseudo clase. Después de añadir el pequeño triángulo. Definimos de la siguiente manera:

.dr-menu > div .dr-icon:after {
    content: "\e008";
    position: absolute;
    font-size: 50%;
    line-height: 3.25;
    left: -10%;
    opacity: 0;
}

El icono será absoluto y vamos a moverlo a la izquierda un -10%. La opacidad inicial se establece en 0, ya que no queremos verlo al principio cuando se cierra el menú.

Una vez que abrimos el menú, queremos que se convierta en visible:

dr-menu.dr-menu-open > div .dr-icon:after {
    opacity: 1;
}

La etiqueta es un texto ancla en nuestro HTML, obtiene un poco más de estilo en general y le damos un relleno de modo se se muestre al lado del icono del menú. También vamos a añadir una transición porque queremos que se quede arriba una vez que abrimos el menú. Para esto hacemos la traducción del eje Y:

.dr-menu > div .dr-label {
    padding-left: 3em;
    position: relative;
    display: block;
    color: #60a773;
    font-size: 0.9em;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 2.75;
    transition: all 0.2s ease-in;
}
 
.dr-menu.dr-menu-open > div .dr-label {
    transform: translateY(-90%);
}

La lista desordenada será en principio invisible por tener una opacidad de 0:

.dr-menu ul {
    padding: 0;
    margin: 0 3em 0 0;
    list-style: none;
    opacity: 0;
    position: relative;
    z-index: 0;
    pointer-events: none;
    transition: opacity 0s linear 205ms;
}

Cuando abrimos el menú queremos conseguir que sea visible, para esto ponemos un z-index alto para que el div del disparador no lo cubra:

.dr-menu.dr-menu-open ul {
    opacity: 1;
    z-index: 200;
    pointer-events: auto;
    transition: opacity 0s linear 0s;
}

Las dos transiciones son para abrir y cerrar el menú. Cuando se abre el menú no queremos que aparezca de forma inmediata e igual cuando cerramos, queremos que suceda con un retraso y para esto eliminamos la clase. Este retraso se define por la demora del último elemento de la lista como vamos a ver a continuación.

Los elementos de la lista también serán invisibles y vamos a establecer una transición de la opacidad:

.dr-menu ul li {
    display: block;
    margin: 0 0 5px 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}
 
.dr-menu.dr-menu-open ul li {
    opacity: 1;
}

Ahora cada elemento de la lista aparece con un retardo diferente: el primer elemento desaparece de inmediato y el último elemento aparecerá en el final:

.dr-menu.dr-menu-open ul li:nth-child(2) {
    transition-delay: 35ms;
}
 
.dr-menu.dr-menu-open ul li:nth-child(3) {
    transition-delay: 70ms;
}
 
.dr-menu.dr-menu-open ul li:nth-child(4) {
    transition-delay: 105ms;
}
 
.dr-menu.dr-menu-open ul li:nth-child(5) {
    transition-delay: 140ms;
}
 
.dr-menu.dr-menu-open ul li:nth-child(6) {
    transition-delay: 175ms;
}
 
.dr-menu.dr-menu-open ul li:nth-child(7) {
    transition-delay: 205ms;
}

Los enlaces tienen algo de relleno y vamos a establecer como inline-block:

.dr-menu ul li a {
    display: inline-block;
    padding: 0 20px;
    color: #fff;
}

Y vamos a cambiar el color en el hover:

.dr-menu ul li a:hover {
    color: #60a773;
}

Y por último pero no menos importante, vamos a definir los pseudo-elementos del icono:

.dr-icon:before,
.dr-icon:after {
    position: relative;
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
}
 
.dr-menu ul .dr-icon:before {
    margin-right: 15px;
}
 
.dr-icon-bullhorn:before {
    content: "\e000";
}
 
.dr-icon-camera:before {
    content: "\e002";
}
 
.dr-icon-heart:before {
    content: "\e003";
}
 
.dr-icon-settings:before {
    content: "\e004";
}
 
.dr-icon-switch:before {
    content: "\e005";
}
 
.dr-icon-download:before {
    content: "\e006";
}
 
.dr-icon-user:before {
    content: "\e001";
}
 
.dr-icon-menu:before {
    content: "\e007";
}

Con esto terminamos el estilo. Ahora vamos a echarle un ojo al JavaScript.

El JavaScript

Vamos a crear un pequeño script que se encargará de las funciones del menú. Cuando entramos sobre la división del disparador, queremos que el envoltorio del menú obtenga la clase «dr-menu-open». Donde hacemos que la etiqueta se dirija hacia fuera y el icono del menú hacia la derecha. Nos interesa que cierre o se abra sólo cuando hacemos clic en el icono del menú, al igual que ocurre en el menú de YouTube:

var YTMenu = (function() {
 
    function init() {
         
        [].slice.call( document.querySelectorAll( '.dr-menu' ) ).forEach( function( el, i ) {
 
            var trigger = el.querySelector( 'div.dr-trigger' ),
                icon = trigger.querySelector( 'span.dr-icon-menu' ),
                open = false;
 
            trigger.addEventListener( 'click', function( event ) {
                if( !open ) {
                    el.className += ' dr-menu-open';
                    open = true;
                }
            }, false );
 
            icon.addEventListener( 'click', function( event ) {
                if( open ) {
                    event.stopPropagation();
                    open = false;
                    el.className = el.className.replace(/\bdr-menu-open\b/,'');
                    return false;
                }
            }, false );
 
        } );
 
    }
 
    init();
 
})();

Y con esto terminamos. Esperamos que puedan crear un menú como el de Youtube con este tutorial.

Ver DEMO: http://tympanus.net/Tutorials/YouTubeLeftSideMenu/
ARCHIVOS: http://tympanus.net/Tutorials/YouTubeLeftSideMenu/YouTubeLeftSideMenu.zip

Fuente: tympanus.net