Publicado em por Paulo Künzel

Menu Lateral Básico


O menu lateral é bem comum no caso de websites voltados para o desenvolvimento mobile. E o legal dele é também o fato que ele mostra diversas funcionalidades de HTML5, CSS3 e JavaScript/JQuery.

O exemplo abaixo, baseado no código fonte do site (Menu lateral com push), mostra como fazer um menu simples e que pode ser adaptado para dentro de praticamente qualquer website.

Conhecimentos necessários 

  • HTML 5
  • CSS 3
  • JavaScript
  • JQuery

O código fonte:

HTML:

A parte HTML é bem simples, cria-se uma sessão para o menu que começará sempre fora da tela. A outra será para o corpo ou conteúdo do site.

<!DOCTYPE html>
<html>

<head>
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>

<body>
    <div class="menu">
        <!-- Botão de Fechar -->
        <!-- Pode ser trocado por uma imagem ou icone -->
        <div class="icon-close">
            <h1>X</h1>
        </div>
        <!-- Menu -->
        <ul>
            <li>
                <a href="#">Menu 1</a>
            </li>
            <li>
                <a href="#">Menu 2</a>
            </li>
            <li>
                <a href="#">Menu 3</a>
            </li>
            <li>
                <a href="#">Menu 4</a>
            </li>
        </ul>
    </div>
    <!-- Corpo do Site -->
    <div class="container">
        <div class="icon-menu">
            <p>Menu</p>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
</body>

</html>

CSS:

As classes abaixo são bem simples, elas ajudarão a esconder o menu e a difinir o layout básico. Aqui você pode remover muita coisa sem alterar a funcioanalidade do site.

/* corpo do site */
/* Talvez você não precise deste layout, mas ele ajuda a evitar alguns erros de tela*/
body {
    left: 0;
    margin: 0;
    overflow: hidden;
    position: relative;
}

/* O menu */
/* O menu começara escondido */
.menu {
    background: #686868 repeat left top;
    left: -350px;
    height: 100%;
    top: 0;
    position: fixed;
    width: 350px;
}

.menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu li {
    line-height: 45px;
    padding-bottom: 3px;
    padding-left: 20px;
    padding-top: 3px;
}

.menu a {
    color: #fff;
    font-size: 18px;
    text-decoration: none;
    border-bottom: 2px solid;
}

.icon-close {
    cursor: pointer;
    padding-right: 30px;
    text-align: right;
    padding-top: 10px;
}

.icon-close h1 {
    cursor: pointer;
    padding-left: 10px;
    color: #fff;
    font-weight: 600;
}

.icon-menu {
    cursor: pointer;
    font-size: 30px;
    padding-bottom: 25px;
    padding-left: 25px;
    text-decoration: none;
}

.icon-menu i {
    margin-right: 5px;
}

.icon-menu p {
    border-bottom: 2px solid;
    max-width: 79px;
}

Javascript/JQuery:

Utilizando o Jquery e funções arrow, é possível usar poucas linhas de código para criar o efeito de exibir e esconder o menu.

function moverMenu(distMenu, distBody) {
    $('.menu').animate({
        left: distMenu + "px"
    }, 200);

    $('body').animate({
        left: distBody + "px"
    }, 200);
}

$(document).ready(() => {
    $('.icon-menu').click(() => { moverMenu(0, 350) });
    $('.icon-close').click(() => { moverMenu(-350, 0) });
});

Conclusão:

Como você pode ver, montar um menu é algo muito fácil e que você pode fazer com poucas linhas de código. Para outros exemplos e download do código fonte, acesse o site http://www.opensites.com.br/category/componentes/menu/

 

 

Deixe um comentário