Categorias
CSS Design HTML Programação

Menu slide para mobile – JQuery

No artigo de hoje vamos ver como é possível, de maneira bastante fácil e rápida, criar um menu estilo slide, utilizado muito nos meio mobile.

Muitos já devem ter reparado que os sistemas para telemóveis usam, ou usaram, muito o menu que vamos exemplificar agora, alem de ficar esteticamente bonito e agradável é bastante fácil de ser feito.

Estes menus, nativos, ficam na sua maioria (iOS7) escondidos na esquerda e após algum opção eles aparecem ‘empurrando’ o conteúdo para o lado esquerdo. Para este exemplo vamos usar CSS, HTML e claro o nosso companheiro de efeito JQuery.

Resultado pretendido

Como referido anteriormente o resultado que queremos é um menu escondido que ira ficar visível após alguma opção seja activo, no nosso exemplo vamos usar um botão para activar o aparecimento do menu. Quando o menu ficar visível ele vai entrar em cena com o efeito de empurrar o conteúdo a sua direita, ora vejamos como fica:

resultado

HTML

Criamos uma estrutura simples ordenado como: Header, Menu e Main. Uma estrutura simples como esta trás uma grande compatibilidade, sendo não temos de ‘partir’ a cabeça para que dê em todas as plataformas.

<body>
    <header>
        <span class="menu-anchor"></span>
        <h1><a href="">tableless.com.br</a></h1>
    </header>

    <menu>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Produtos</a></li>
            <li><a href="#">Serviços</a></li>
            <li><a href="#">Sobre</a></li>
            <li><a href="#">Contato</a></li>
        </ul>
    </menu>

    <section class="main">
        <div class="post">
            <h1>Um título</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec purus neque, adipiscing malesuada lectus non, ullamcorper gravida augue. Donec rutrum augue eu dolor cursus, id luctus felis tincidunt. Pellentesque consectetur luctus dui quis adipiscing. Donec volutpat varius nulla, pretium vestibulum quam imperdiet et. Sed semper a erat nec mattis. In elementum nibh mauris, sit amet aliquet quam pharetra in. Nullam magna mauris, tempus a tellus varius, hendrerit mattis neque. Duis lacinia commodo magna eget scelerisque. Integer molestie fermentum nisl a bibendum. Donec congue, diam nec commodo elementum, tortor mauris vestibulum erat, adipiscing aliquet enim quam sit amet nulla. Maecenas dignissim varius mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas ligula lectus, rhoncus eget scelerisque in, consectetur eu nulla. Vestibulum eu sem massa.</p>
        </div>
        <div class="post">
            <h1>Pellentesque consectetur luctus</h1>
            <p>Nullam magna mauris, tempus a tellus varius, hendrerit mattis neque. Duis lacinia commodo magna eget scelerisque. Integer molestie fermentum nisl a bibendum. Donec congue, diam nec commodo elementum, tortor mauris vestibulum erat, adipiscing aliquet enim quam sit amet nulla. Maecenas dignissim varius mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas ligula lectus, rhoncus eget scelerisque in, consectetur eu nulla. Vestibulum eu sem massa.</p>
        </div>
        <div class="post">
            <h1>Nullam magna mauris</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec purus neque, adipiscing malesuada lectus non, ullamcorper gravida augue. Donec rutrum augue eu dolor cursus, id luctus felis tincidunt. Pellentesque consectetur luctus dui quis adipiscing. Donec volutpat varius nulla, pretium vestibulum quam imperdiet et. Sed semper a erat nec mattis. In elementum nibh mauris, sit amet aliquet quam pharetra in. Maecenas ligula lectus, rhoncus eget scelerisque in, consectetur eu nulla. Vestibulum eu sem massa.</p>
        </div>
    </section>
</body>

CSS

Com a ajuda do CSS vamos dar forma e cor a nossa estrutura bem simples… No CSS também é onde fica a magia toda deste menu o efeito de empurra e não simplesmente ficar por cima, entre outros efeitos…

* {
    margin: 0;
    padding: 0;
}

/* isto é para nao existe o famoso scroll horizontal, quando 'empurramos' o conteudo para o lado */
html, body {overflow-x: hidden;}

body {
        font: 100% arial, verdana, tahoma, sans-serif;
        color: #FFF;
        background-color: #f1c40f;
}

header {
        background: #f49c14;
        padding: 30px;
        overflow: hidden;
}

header h1 {
        display: inline-block;
        vertical-align: middle;
        text-align: center;
        width: 80%;
        font-size: 1.5em;
}
h1 a {color: #FFF; text-decoration: none;}

header input {
        float: right;
        padding: 10px;
        width: 200px;
        border: none;
}

.main {
        padding: 30px;
}
.main p {
        font-size: .9em;
        line-height: 1.2em;
        margin-bottom: 20px;
}

.menu-anchor {
        width: 40px;
        height: 32px;
        display: inline-block;
        vertical-align: middle;
        position: relative;
        text-indent: -9999px;
        overflow: hidden;
        cursor: pointer;
        background: #FFF;
}

.menu-anchor:before {
        content: "";
        display: block;
        margin: 7px auto;
        width: 70%;
        height: 0.25em;
        background: #f49c14;
        box-shadow: 0 .45em 0 0 #f49c14, 0 .9em 0 0 #f49c14;
}

.menu-active .menu-anchor {background: #000000}

menu {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1;
        width: 220px;
        height: 100%;
        padding-top: 10px;
        background: #000000;
        box-shadow: inset -5px -10px 10px 0 rgba(0,0,0,.3)
}

menu li a {
        display: block;
        border-bottom: 1px solid rgba(255,255,255,.3);
        margin: 0 10px;
        padding: 10px;
        color: #FFF;
        text-decoration: none;
}

menu li a:hover {
        background: #FFF;
        color: #000000;
}


/* Aqui esconde-mos o menu para fora */
menu {
        -webkit-transform: translateX(-220px);
        -moz-transform: translateX(-220px);
        -ms-transform: translateX(-220px);
        transform: translateX(-220px);
        -webkit-transition: all .25s linear;
        -moz-transition: all .25s linear;
        -ms-transition: all .25s linear;
        transition: all .25s linear;
}

/* Aqui marcamos a posição original do header e do main */
header, .main {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
        -webkit-transition: all .25s linear;
        -moz-transition: all .25s linear;
        -ms-transition: all .25s linear;
        transition: all .25s linear;
}

/* Com a classe menu-active na tag HTML */
.menu-active menu {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
}

.menu-active header, 
.menu-active .main {
        -webkit-transform: translateX(220px);
        -moz-transform: translateX(220px);
        -ms-transform: translateX(220px);
        transform: translateX(220px);
}

JQuery

Usamos um codigo bem simples, visto que queremos que funcione em todas as plataformas, e alem do mais nao queremos complicar mas sim fazer um menu bem simples. Aqui usamos dois eventos o “click” e “touchstart”. Para quem não sabe o JQuery já tem de forma nativa a leitura do touch, aumentado assim a performance.

$(document).ready(function(){
    $('.menu-anchor').on('click touchstart', function(e){
        $('html').toggleClass('menu-active');
        e.preventDefault();
    });
})

Pode fazer download do resultado final aqui.

Neste artigo é tudo, até a próxima e comentem acerca deste simples e atractivo menu!



2 comentários a “Menu slide para mobile – JQuery”

Gostaria de parabenizá-lo pelo post. Embora você não tenha explicado os detalhes, os scripts são simples o suficiente e evitam o uso dos plug-ins de jQuery de difíceis customizações. Obrigado

Faltou apenas colocar o link para o jQuery no código de exemplo que está disponível para download. Usuários distraídos ou menos experientes poderão se confundir.

Deixe um comentário

O seu endereço de email não será publicado. Campos obrigatórios marcados com *