Universal AJAX Live Search

Poder Responsivo! Menu tabs

Si, lo de hoy es que un sitio web no solamente se aprecie en todo su esplendor en un gran monitor de escritorio, sino prácticamente desde cualquier lugar. Progresivamente el Diseño responsivo se ha consolidado como el mejor aliado para romper las barreras de dispositivos y tamaños de pantalla. Es por eso que hoy, probaremos una técnica diferente para dotar de capacidades responsivas a uno de los elementos mas importantes de cualquier sitio web: El menú de navegación.

Recientemente hemos visto lo populares que se han vuelto los menús que se colapsan en versiones móviles de distintos sitios web, la mayoría de las veces usando un icono de tres líneas (Llamado amigablemente "Hamburger menu"),  donde al hacer click, se despliega el menú en forma de listado; Aunque es el enfoque más popular, no siempre es el más adecuado para que nuestros visitantes sepan que opciones tienen para navegar el sitio y en muchas ocasiones esto influye para que alguien se vea motivado a continuar explorando un sitio o definitvamente se retire, ya que no nos dice mucho acerca de que contenido pueden encontrar en cada sección del sitio a primera vista, o peor aún, no nos dice nada adicional sobre el tema del mismo. Es por eso que en este artículo realizaremos un tipo de menú que aun en su versión móvil no deje de ser visualmente llamativo y descriptivo para los visitantes mediante el uso de iconos.

Haz click aqui para ver el Demo del menú con tabs o pestañas Responsivas!  (No olvides disminuir progresivamente el tamaño de tu ventana del navegador para ver el efecto) y si deseas descargar los archivos fuente, podrás encontrarlos aqui

Los iconos utilizados fueron generados usando IcoMoon App, una forma sencilla y genial de integrar iconos en formato icon font a tu diseño :)

Comencemos por crear los archivos del proyecto, nuestra carpeta quedará de la siguiente forma (la carpeta icomoon es exclusivamente para los archivos generados por la app anteriormente mencionada): 

Lo primero que haremos será crear un documento HTML5 al que llamaremos index.html y dentro de la etiqueta <body> necesitaremos las siguientes líneas que son la estructura básica del menú y contenido:

HTML

<div id="tabs" class="tabs"><!--En este div se encuentran tanto el menú como los contenidos divididos por secciones-->
    <nav><!--Menú de navegación-->
        <ul>
            <li><a href="#section-1" class="icon-search"><span>Búsqueda</span></a></li>
            <li><a href="#section-2" class="icon-fav"><span>Favoritos</span></a></li>
            <li><a href="#section-3" class="icon-msg"><span>Mensajes</span></a></li>
            <li><a href="#section-4" class="icon-place"><span>Ubicaciones</span></a></li>
        </ul>
    </nav>
    <div class="content">
        <section id="section-1"><!--Asi dividiremos cada una de nuestras secciones-->
            <div class="mediabox">
                <img src="img/square1.jpg" alt="img01" />
                <h3>Estadísticas</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
            <div class="mediabox">
                <img src="img/square2.jpg" alt="img02" />
                <h3>Opciones</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
            <div class="mediabox">
                <img src="img/square3.jpg" alt="img03" />
                <h3>Eventos</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
        </section>
        <section id="section-2">
            <div class="mediabox">
                <img src="img/square4.jpg" alt="img04" />
                <h3>Documentos</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
            </div>
            <div class="mediabox">
                <img src="img/square5.jpg" alt="img05" />
                <h3>Galería</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
            <div class="mediabox">
                <img src="img/square6.jpg" alt="img06" />
                <h3>Descargas</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
            </div>
        </section>
        <section id="section-3">
            <div class="mediabox">
                <img src="img/square2.jpg" alt="img02" />
                <h3>Opciones</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
            <div class="mediabox">
                <img src="img/square6.jpg" alt="img06" />
                <h3>Descargas</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
            <div class="mediabox">
                <img src="img/square1.jpg" alt="img01" />
                <h3>Estadísticas</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
        </section>
        <section id="section-4">
            <div class="mediabox">
                <img src="img/square3.jpg" alt="img03" />
                <h3>Opciones</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
            <div class="mediabox">
                <img src="img/square1.jpg" alt="img01" />
                <h3>Estadísticas</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
            <div class="mediabox">
                <img src="img/square4.jpg" alt="img04" />
                <h3>Documentos</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
            </div>
        </section>
    </div><!-- /content -->
</div><!-- /tabs -->

 

Una vez que tenemos la estructura, seguro habrás notado que cada elemento ya tiene asignadas clases que definirán su apariencia, lo cuál veremos a continuación, crearemos un archivo llamado estilos.css , dentro de la carpeta css, con las siguientes líneas:

 CSS

/*Iconos generados con la IConmoon App */

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

[class^="icon-"], [class*=" icon-"] {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
/*---------------------------------------*/

/*Estilos Generales*/

body {
    font-family: 'Droid Sans', sans-serif;
    margin: 0;
}


.tabs {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin: 0;
    font-weight: 300;
}
 
/* Nav */
.tabs nav {
    text-align: center;
}
 
.tabs nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: inline-block;
}
 
.tabs nav ul li {
    border: 1px solid #becbd2;
    border-bottom: none;
    margin: 0;
    display: block;
    float: left;
    position: relative;
}
 
.tabs nav li.tab-current {
    border: 1px solid #47a3da;
    border-bottom: none;
    z-index: 100;
}
 
.tabs nav li.tab-current:before,
.tabs nav li.tab-current:after {
    content: '';
    position: absolute;
    height: 1px;
    right: 100%;
    bottom: 0;
    width: 1000px;
    background: #47a3da;
}
 
.tabs nav li.tab-current:after {
    right: auto;
    left: 100%;
    width: 4000px;
}
 
.tabs nav a {
    color: #becbd2;
    display: block;
    font-size: 1.45em;
    line-height: 2.5;
    padding: 0 1.25em;
    white-space: nowrap;
    text-decoration: none;
}
 
.tabs nav a:hover {
    color: #768e9d;
}
 
.tabs nav li.tab-current a {
    color: #47a3da;
}
 
/* Iconos */
.tabs nav a:before {
    display: inline-block;
    vertical-align: middle;
    text-transform: none;
    font-weight: normal;
    font-variant: normal;
    font-family: 'icomoon';
    line-height: 1;
    speak: none;
    -webkit-font-smoothing: antialiased;
    margin: -0.25em 0.4em 0 0;
}
 

.icon-place:before {
	content: "\e600";
}
.icon-msg:before {
	content: "\e601";
}
.icon-search:before {
	content: "\e602";
}
.icon-fav:before {
	content: "\e603";
}



/* Contenido */
.content section {
    font-size: 1.25em;
    padding: 3em 1em;
    display: none;
    max-width: 1230px;
    margin: 0 auto;
}
 
.content section:before,
.content section:after {
    content: '';
    display: table;
}
 
.content section:after {
    clear: both;
}
 
/* Estilos para el caso de no tenr javascript habilitado */
.no-js .content section {
    display: block;
    padding-bottom: 2em;
    border-bottom: 1px solid #47a3da;
}
 
.content section.content-current {
    display: block;
}
 
.mediabox {
    float: left;
    width: 27%;
    padding: 0 25px;
}
 
.mediabox img {
    max-width: 100%;
    display: block;
    margin: 0 auto;
}
 
.mediabox h3 {
    margin: 0.75em 0 0.5em;
}
 
.mediabox p {
    padding: 0 0 1em 0;
    margin: 0;
    line-height: 1.3;
}
 
/*Media Queries para Efecto Responsivo*/
 
@media screen and (max-width: 52.375em) {
    .tabs nav a span {
        display: none;
    }
 
    .tabs nav a:before {
        margin-right: 0;
    }
 
    .mediabox {
        float: none;
        width: auto;
        padding: 0 0 35px 0;
        font-size: 90%;
    }
 
    .mediabox img {
        float: left;
        margin: 0 25px 10px 0;
        max-width: 40%;
    }
 
    .mediabox h3 {
        margin-top: 0;
    }
 
    .mediabox p {
        margin-left: 40%;
        margin-left: calc(40% + 25px);
    }
 
    .mediabox:before,
    .mediabox:after {
        content: '';
        display: table;
    }
 
    .mediabox:after {
        clear: both;
    }
}


 
@media screen and (max-width: 32em) {
    .tabs nav ul,
    .tabs nav ul li a {
        width: 100%;
        padding: 0;
    }
 
    .tabs nav ul li {
        width: 20%;
        width: calc(20% + 1px);
        margin: 0 0 0 -1px;
    }
 
    .tabs nav ul li:last-child {
        border-right: none;
    }
 
    .mediabox {
        text-align: center;
    }
 
    .mediabox img {
        float: none;
        margin: 0 auto;
        max-width: 100%;
    }
 
    .mediabox h3 {
        margin: 1.25em 0 1em;
    }
 
    .mediabox p {
        margin: 0;
    }
}

 

Finalmente necesitamos agregar un poco de Javascript para que el menú de navegación adquiera el efecto "tabs", lo lograremos con ayuda de las funciones que nos comparte codrops.com, este archivo se encuentra en la carpeta de fuentes de este artículo:

JavaScript

/**
 * cbpFWTabs.js v1.0.0
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * Copyright 2014, Codrops
 * http://www.codrops.com
 */
;( function( window ) {
     
    'use strict';
 
    function extend( a, b ) {
        for( var key in b ) { 
            if( b.hasOwnProperty( key ) ) {
                a[key] = b[key];
            }
        }
        return a;
    }
 
    function CBPFWTabs( el, options ) {
        this.el = el;
        this.options = extend( {}, this.options );
        extend( this.options, options );
        this._init();
    }
 
    CBPFWTabs.prototype.options = {
        start : 0
    };
 
    CBPFWTabs.prototype._init = function() {
        // Elementos en formato Tabs
        this.tabs = [].slice.call( this.el.querySelectorAll( 'nav > ul > li' ) );
        // Elementos de contenido
        this.items = [].slice.call( this.el.querySelectorAll( '.content > section' ) );
        // Elemento actual seleccionado
        this.current = -1;
        // Mostrar contenido del elemento seleccionado
        this._show();
        // Iniciar eventos
        this._initEvents();
    };
 
    CBPFWTabs.prototype._initEvents = function() {
        var self = this;
        this.tabs.forEach( function( tab, idx ) {
            tab.addEventListener( 'click', function( ev ) {
                ev.preventDefault();
                self._show( idx );
            } );
        } );
    };
 
    CBPFWTabs.prototype._show = function( idx ) {
        if( this.current >= 0 ) {
            this.tabs[ this.current ].className = '';
            this.items[ this.current ].className = '';
        }
        // Cambiar de elemento tab
        this.current = idx != undefined ? idx : this.options.start >= 0 && this.options.start < this.items.length ? this.options.start : 0;
        this.tabs[ this.current ].className = 'tab-current';
        this.items[ this.current ].className = 'content-current';
    };
 
    // Agregar al espacio de trabajo las funciones
    window.CBPFWTabs = CBPFWTabs;
 
})( window );

 

Para este momento, solo hace falta ligar nuestros archivos css y js al index.html ,dentro de la etiqueta <head> agreguemos las siguientes líneas:

<link rel="stylesheet" href="css/estilos.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>

 

Y justo antes de cerrar la etiqueta <body> lo siguiente:

<script src="js/cbpFWTabs.js"></script>
<script>
    new CBPFWTabs( document.getElementById( 'tabs' ) );
</script>

 

Felicidades! ahora puedes ver tu propio menú tabs responsivo en acción!

Espero este artículo te haya gustado, y que te anime a explorar nuevas técnicas en el uso de Diseño Responsivo, ya que esta en pleno auge y constante cambio, siempre hay algo nuevo que probar!

 

Zae Vega. Diseñadora Web, Amante del Café, la Usabilidad y Front-End.

Dudas o comentarios? Encuéntrame en twitter como @ZaeVega :) Hasta la próxima!