Documentação para Web Designers

Crie seus próprios layouts na Nuvem Shop

Navegação Mobile

No universo dos websites existem várias soluções a respeito da Navegação Mobile. Se podem encontrar Abas, dropdowns, menús suspensos ou OffCanvas, entre outros.

Nesse artigo nós vamos aprender a implementar um menú offcanvas através de um plugin JavaScript chamado Pushy.js.

Este plugin oculta e mostra a navegação através de um botão (comumente chamado de "hamburger" - com tres linhas horizontais) como se pode ver na imagem abaixo:

Passos para adicionar o Pushy a sua loja:

Vamos aprender passo-a-passo como adicionar essa navegação, usando como exemplo o template Luxury. Mas não se preocupe, os passos são os mesmos para qualquer Template Nuvem ou template personalizado. 

1. Faça o download e adicione o plugin Pushy.js com todos os seus arquivos JS e CSS em uma pasta chamada pushy dentro da pasta static/js da loja. Você pode baixar o plugin entrando nesse link: https://github.com/christophery/pushy.

2. Adicione uma chamada dos arquivos CSS e JS no arquivo layouts/layout.tpl.

Lembre-se que o CSS deve estar dentro da tag <head>

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

Adicione o JS dentro da tag <body> debaixo de todo conteúdo e antes da tag de fechamento </body>. É importante que seja depois das chamadas dos JavaScripts do Bootstrap e jQuery 

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

E continuando, um exemplo de como se vê o javascript do plugin em uma loja, nesse caso no 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. No arquivo layouts/layout.tpl adicione o JavaScript abaixo. Ele é necessário para mostrar as subcategorias escondidas dentro da navegação mobile. Mais uma vez, recomendamos que seja adicionado debaixo de todas as chamadas jQuery e Bootstrap, onde se encontra o javaScript geral da loja toda.

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

4. Insira todo o conteúdo HTML que mostra o corpo do site (navegação, slider, produtos, etc) dentro de uma div com o ID "container", como se mostra abaixo:

<div id="container">
    CONTEÚDO DO LAYOUT
</div>

5. Crie um novo snipplet dentro da pasta snipplets com o nome navigation-mobile.tpl (Se já está criado, somente precisará ser modificado) e use o seguinte 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. No arquivo layouts/layout.tpl adicione por fora (e antes) da div com id="container" criado no passo 4, uma chamada para o snipplet navigation-mobile.tpl e a div com a class="overlay" que servirá de fundo para o nosso menu:

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

Depois, adicione o botão "hamburguer" que vai mostrar/ocultar a navegação. A posição e desenho desse botão depende de cada demplate. Esse exemplo usa as classes do Bootstrap 3 para ocultar e mostrar o botão para desktop e mobile

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

7. Finalmente adicione os seguintes estilos (você pode utilizar CSS comum ou um arquivo SASS). O seguinte exemplo se refere ao Luxury. 

7.1 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*/

7.2 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*/