Documentación para Diseñadores

Crea tus propias plantillas en Tienda Nube

Navegación Mobile

En el mundo de los sitios web existen varias soluciones con respecto a navegación mobile. Se pueden encontrar pestañas, dropdowns o desplegables y menues offcanvas, entre otras.

En este artículo vamos a aprender a implementar un menú offcanvas a traves del plugin de Javascript llamado Pushy.js .

Este plugin oculta y muestra la navegación a través de un botón comúnmente llamado "Hamburguer" (visualmente es un cuadrado con tres líneas horizontales) como se puede ver en la siguiente imagen:

Pasos para agregar Pushy en tu tienda

A continuación, vamos a aprender paso a paso cómo agregar esta navegación usando como ejemplo la plantilla Luxury. Mas allá de que los pasos son los mismos para todas las tiendas, puede haber variaciones con respecto a los estilos de cada plantilla.

1. Agregar el plugin con todos sus archivos JS CSS. Para hacer esto hay que crear una carpeta dentro del directorio /static/js/ de la tienda con el nombre pushy

El plugin se puede descargar entrando al link: https://github.com/christophery/pushy.

2. Agregar el llamado al CSS y el JS en layout.tpl.

Ubicar el CSS dentro del tag <head>:

{{ 'js/pushy/pushy.css' | static_url | css_tag }}

Agregar el JS dentro del <body> debajo de todo y previo al cierre de este tag. Es importante que sea luego de los llamados al JS de bootstrap y jquery.

{{ 'js/pushy/pushy.js' | static_url | script_tag }}

A continuación, un ejemplo de cómo se ve el Javascript del plugin en una tienda, en este caso Luxury:

$(function() {
    var pushy = $('.pushy'), //menu css class
        body = $('body'),
        container = $('#container'), //container css class
        push = $('.push'), //css class to add pushy capability
        siteOverlay = $('.site-overlay'), //site overlay
        pushyClass = "pushy-left pushy-open", //menu position & menu open class
        pushyActiveClass = "pushy-active", //css class to toggle site overlay
        containerClass = "container-push", //container open class
        pushClass = "push-push", //css class to add pushy capability
        menuBtn = $('.menu-btn'), //css classes to toggle the menu
        menuSpeed = 200, //jQuery fallback menu speed
        menuWidth = pushy.width() + "px"; //jQuery fallback menu width

    function togglePushy(){
        body.toggleClass(pushyActiveClass); //toggle site overlay
        pushy.toggleClass(pushyClass);
        container.toggleClass(containerClass);
        push.toggleClass(pushClass); //css class to add pushy capability
    }

    function openPushyFallback(){
        body.addClass(pushyActiveClass);
        pushy.animate({left: "0px"}, menuSpeed);
        container.animate({left: menuWidth}, menuSpeed);
        push.animate({left: menuWidth}, menuSpeed); //css class to add pushy capability
    }

    function closePushyFallback(){
        body.removeClass(pushyActiveClass);
        pushy.animate({left: "-" + menuWidth}, menuSpeed);
        container.animate({left: "0px"}, menuSpeed);
        push.animate({left: "0px"}, menuSpeed); //css class to add pushy capability
    }

    //checks if 3d transforms are supported removing the modernizr dependency
    cssTransforms3d = (function csstransforms3d(){
        var el = document.createElement('p'),
        supported = false,
        transforms = {
            'webkitTransform':'-webkit-transform',
            'OTransform':'-o-transform',
            'msTransform':'-ms-transform',
            'MozTransform':'-moz-transform',
            'transform':'transform'
        };

        // Add it to the body to get the computed style
        document.body.insertBefore(el, null);

        for(var t in transforms){
            if( el.style[t] !== undefined ){
                el.style[t] = 'translate3d(1px,1px,1px)';
                supported = window.getComputedStyle(el).getPropertyValue(transforms[t]);
            }
        }

        document.body.removeChild(el);

        return (supported !== undefined && supported.length > 0 && supported !== "none");
    })();

    if(cssTransforms3d){
        //toggle menu
        menuBtn.click(function() {
            togglePushy();
        });
        //close menu when clicking site overlay
        siteOverlay.click(function(){ 
            togglePushy();
        });
    }else{
        //jQuery fallback
        pushy.css({left: "-" + menuWidth}); //hide menu by default
        container.css({"overflow-x": "hidden"}); //fixes IE scrollbar issue

        //keep track of menu state (open/close)
        var state = true;

        //toggle menu
        menuBtn.click(function() {
            if (state) {
                openPushyFallback();
                state = false;
            } else {
                closePushyFallback();
                state = true;
            }
        });

        //close menu when clicking site overlay
        siteOverlay.click(function(){ 
            if (state) {
                openPushyFallback();
                state = false;
            } else {
                closePushyFallback();
                state = true;
            }
        });
    }
});

3. En layout.tpl agregar el siguiente Javascript, necesario para desplegar las subcategorías escondidas dentro de la navegaión mobile. Es recomendable agregarlo en el .tpl debajo de todo y luego de linkear Jquery y el Javascript de Bootsrap, donde se encuentra el Javascript general de toda la tienda.

<script type="text/javascript">
//Hamburguer Menu Javascript
$(".mobile-dropdown").click(function(){
    $(this).next("#accordion").slideToggle(300);
    $(this).toggleClass("dropdown-selected");
});
</script>

4. Insertar todo el HTML que muestra el cuerpo del sitio (navegacón, slider, productos, etc) dentro de un div con ID "container" como se muestra a continuación:

<div id="container">
    CONTENIDO DEL LAYOUT
</div>

5. Crear un nuevo snipplet dentro de la carpeta snipplets con el nombre navigation-mobile.tpl (si ya esta creado solamente hay que modificarlo) y usar el siguiente código:

{% for item in navigation %}
        {% if item.subitems %}
        <div class="subitems">
            <li class="{{ item.current ? 'selected' : '' }} mobile-subitems-container">
                <a href="{{ item.url }}" {% if item.url | is_external %}target="_blank"{% endif %}>
                    {{ item.name }}
                </a>
                <li class="mobile-dropdown"><i class="fa fa-chevron-down"></i></li> 
                <ul id="accordion">
                    {% snipplet "navigation-mobile.tpl" with navigation = item.subitems %}
                </ul>
             </li>
        </div>
        {% else %}
        <li class="{{ item.current ? 'selected' : '' }}">
            <a href="{{ item.url }}" {% if item.url | is_external %}target="_blank"{% endif %}>
                {{ item.name }}</a>
         </li>
        {% endif %}
{% endfor %}

6. En layout.tpl agregar por fuera (y antes) del div con id="container" creado en el paso 4, el llamado al snipplet navigation-mobile.tpl y la sombra (también llamado overlay) que va a aparecer por encima del contenido al desplegarse la nueva navegación mobile.

<!-- Pushy Menu -->
<nav class="pushy pushy-left">
    <ul>
         {% snipplet "navigation-mobile.tpl" %}
    </ul>
</nav>
<!-- Site Overlay -->
<div class="site-overlay"></div>

Luego, agregar el botón "hamburguer" que va a mostrar u ocultar la navegación. La posición y diseño de este botón depende de cada plantilla. Este ejemplo usa clases de Bootstrap 3 para ocultar o mostrar el botón para desktop o mobile.

<div class="mobile mobile-nav visible-phone visible-tablet">
    <div class="menu-btn"><i class="fa fa-bars"></i></div>
</div>

7. Finalmente agregar los siguientes estilos tanto en el CSS común como en el archivo de SASS . El siguiente ejemplo refiere a Luxury:

CSS

/*Hamburguer Navigation*/
.pushy-active{
overflow-x: hidden;
}
.pushy{
z-index: 99999;
left: -50px;
}
.pushy{
    width: 250px; /* Changed the width to 400px */
}
.pushy-left{
    transform: translate3d(-250px,0,0); /* Updated the values */
    /* Don't forget the vendor prefixes */
}
.pushy-open{
    left: 0px;
}
.container-push, .push-push{
    transform: translate3d(250px,0,0); /* Updated the values */
    /* Don't forget the vendor prefixes */
}
.pushy a{
    border-bottom: 0px;
    padding: 13px 20px;
    color: #F2F2F2;
    font-weight: normal;
}
.pushy i{
    font-size: 8px;
    margin-top: 6px;
    float: left;
    margin-right: 5px;
}
#accordion{
    display: none;
}
.mobile-dropdown{
    position: absolute;
    top: 0px;
    right: 0px;
}
.mobile-dropdown i{
    font-size: 15px;
    padding: 16px 10px;
    margin: 0px;
}
.subitems{
    position: relative; 
}
.pushy > ul > .subitems > ul#accordion{
    background: rgb(73, 73, 73);
}
.pushy ul > .subitems > ul#accordion > .subitems > ul#accordion{
    background: rgb(95, 95, 95);
}
.pushy ul > .subitems > ul#accordion > .subitems > ul#accordion > .subitems > ul#accordion{
    background: rgb(113, 113, 113);
}
.mobile-nav{
    width: 45px;
    float: left;
    margin-top: 30px;
}
/*Hamburguer Navigation end*/

SASS

/*Hamburguer Navigation*/
.pushy a:hover{
    background:$primary;
    text-decoration:none;
}
.mobile-dropdown i{
    background:rgba(131, 131, 131, 0.4);
    color:white;
}
.mobile-dropdown.dropdown-selected > i{
    background:$primary;
}

.subitems > ul#accordion > .subitems > .mobile-dropdown.dropdown-selected > i{
    background:rgba(131, 131, 131, 0.4);
    color:white;
}
.subitems > ul#accordion > .subitems > ul#accordion > .subitems > .mobile-dropdown.dropdown-selected > i{
    background:rgba(131, 131, 131, 0.4);
    color:white;
}
.subitems > ul#accordion > .subitems > ul#accordion > .subitems >  ul#accordion > .subitems .mobile-dropdown.dropdown-selected > i{
    background:rgba(131, 131, 131, 0.4);
    color:white;
}
.mobile-dropdown.dropdown-selected > .fa-chevron-down:before{
 content: "\f077";   
}
/*Hamburguer Navigation end*/

Sin compromiso de compra ni estadía mínima. No hay costo de registro o cancelación.