Continuando con la serie de tutoriales para el tema Zerif Lite de ThemeIsle, en este décimo capítulo aprenderemos a transformar el menú estándar en un icono que al hacerle clic desplegará los enlaces.

El icono hamburguesa es un símbolo que consiste en tres líneas horizontales paralelas (≡) y que ha ganado gran difusión en los últimos años gracias a los dispositivos móviles. Pero lejos de ser algo “moderno”, este icono data de los comienzos de la era de la computación personal basada en interfaces gráficas, ya que fue diseñado para la Xerox Star, allá por los albores de la década del 80.

Con frecuencia está ubicado en el extremo superior izquierdo o derecho de las páginas, y se le ha dado ese mote por su supuesta semejanza a un sándwich de hamburguesa. Al hacer clic en este icono se despliega un menú de páginas o de opciones, optimizando el espacio reducido de las pantallas de los dispositivos móviles.

Con meros propósitos estéticos, puede que queramos mantener ocultos los elementos del menú y simplemente mostrar ese icono para animar al usuario a que interactúe.

Menú estándar de Zerif Lite

Para mostrar siempre el icono hamburguesa en Zerif Lite, tendremos que agregar código CSS en la hoja de estilos del tema hijo. Las instrucciones para crear un tema hijo se encuentran en esta entrada anterior.

En el archivo custom.css del tema hijo agregamos lo siguiente:

@media (min-width: 320px) {
 .navbar-header {
    float: none;
 }
 .navbar-left,.navbar-right {
    float: none !important;
 }
 .navbar-toggle {
    display: block;
 }
 .navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px;
 }
 .navbar-collapse.collapse {
    display: none!important;
 }
 .navbar-nav {
    float: none!important;
    margin-top: 7.5px;
 }
 .navbar-nav>li {
    float: none;
 }
 .navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
 }
 .collapse.in{
    display:block !important;
 }

 .navbar-inverse .navbar-nav {
    padding-left: 10px;
    line-height: normal;
    text-align: center;
 }
 .navbar-inverse .navbar-nav>li {
    display: inline-block;
    margin-bottom: 0;
 }
 .navbar-inverse .navbar-nav > li {
    width: 100%;
    border-bottom: 1px solid #EDEDED;
    position: relative;
    margin: 8px 0 0 0;
    padding: 0 0 8px 0;
 }
 .navbar-inverse .navbar-nav > li  a {
    text-align: left;
 }
 .navbar-inverse .navbar-nav ul.sub-menu {
    display: none !important;
    position: relative;
    top: 0;
    box-shadow: none;
    width: 100%;
 }
 .navbar-inverse .navbar-nav li.this-open > ul {
    display: block !important;
 }
 .navbar-inverse .navbar-nav ul.sub-menu li {
    width: 100%;
    float: left;
 }
 .navbar-inverse .navbar-nav ul.sub-menu li a {
    width: 100%;
    float: left;
    padding: 8px 25px 8px 0;
    border-bottom: 1px solid #EDEDED;
 }
 .navbar-inverse .navbar-nav ul.sub-menu li:last-child a {
    border-bottom: none;
 }
 .navbar-inverse .navbar-nav ul.sub-menu ul.sub-menu {
    position: relative;
    left: 0;
    top: 0;
 }
 #main-nav {
    overflow: visible;
 }
 #main-nav, #main-nav.fixed {
    position: relative;
 }
 .navbar-collapse {
    max-height: 100%;
 }
 .navbar-inverse .navbar-nav ul.sub-menu li {
    padding-left: 20px;
 }
 .navbar-inverse .navbar-nav ul.sub-menu li {
    padding-bottom: 0;
    padding-top: 0;
 }
 .dropdownmenu {
    display: block;
    position: absolute;
    z-index: 9;
    right: 0;
    top: 5px;
    width: 25px;
    height: 25px;
    margin: 0;
    padding: 0;
    border-radius: 3px;
    background: url(images/menu-icon.png) center center no-repeat #e96656;
 }
 .navbar-inverse .navbar-nav ul.sub-menu li{
    margin-right: 0;
    padding-right: 0;
 }
 .navbar-inverse .navbar-nav > li > a:hover {
    color: #404040 !important;
 }
 .this-open > a {
    color: #e96656 !important;
 }
 ul.nav > li.current_page_item > a:before {
    content: "";
    left: 0px;
    width: 50px;
 }
 #site-navigation {
    width: 100%;
 }
 .navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
    float: left !important;
 }
 #main-nav {
    overflow: hidden !important;
 }
}

El resultado es el siguiente:

Icono hamburguesa en Zerif Lite

En el caso de que haya añadido el código mediante la opción CSS adicional (más info sobre esta nueva característica de WordPress en esta entrada), recuerde usar la ruta completa a la imagen del icono en la clase .dropdownmenubackground: url(http://su-sitio-wordpress.com/wp-content/themes/zerif-lite/images/menu-icon.png) center center no-repeat #e96656;

Tutorial original en inglés: How to show hamburger menu starting from 1024px in Zerif

Caribdis Diseño Web

Caribdis Diseño Web

Ana Ayelén Martínez - Buenos Aires, Argentina
Técnica en electromecánica, periodista, entusiasta de los idiomas y enamorada de WordPress. Amante de la lectura, la música y el mate, y fanática de las series de J.J. Abrams.
Caribdis Diseño Web