Curso Criando um Site do Zero - Aula 07 - Menu responsivo I

Nesta 7ª aula aprenderemos como criar o menu responsivo. Para isso utilizaremos as media queries do CSS e a biblioteca JQuery.

Para baixar a biblioteca JQuery acesse o site:

Donwload do JQuery

Após baixar o JQuery e colá-lo na pasta libraries, precisamos linkar a biblioteca no nosso projeto. Para tanto insira o código abaixo entre as tags head da sua index:

<script src="libraries/jquery-2.1.4.min.js"></script>

Vamos criar também um arquivo javascript.js que conterá as funções do javascript. Salve o arquivo na pasta libraries também. Linke o arquivo na index da seguinte maneira:

<script src="libraries/javascript.js"></script>

Passaremos agora a criação do MENU no nosso index.Segue abaixo o código do menu:

<nav>
    <ul>
        <li>Home</li>
        <li>Sobre Nós</li>
        <li>Anúncios</li>
        <li>Contato</li>
        <li>Cadastre-se</li>
    </ul>
</nav>

No html também criaremos o espaço da logomarca e do botão que aparecerá somente nos dispositivos mobile.

<div class="ind-botao">
    <img src="images/botao.png" alt="Botão Mobile" title="Botão Mobile">
</div>

<div class="ind-logo">
    <picture>
        <source media="(max-width: 480px)" srcset="images/mobile-logo.png">
        <source media="(min-width: 481px) and (max-width: 768px)" srcset="images/mobile-logo.png">
        <source media="(min-width: 769px)" srcset="images/desktop-logo.jpg">
        <img src="images/mobile-logo.png" alt="Logomarca WEF Veículos" title="Logomarca WEF Veículos">
    </picture>
</div>

A tag "picture" serve para criação de imagens responsivas.

Após baixar a biblioteca jquery, criar o arquivo javascript.js e criar nossos elementos no HTML, faremos a estilização no CSS.

nav {float: left; width: 100%; font-weight: bold; font-family: Verdana,sans-serif; color: #FFFFFF; }
nav li{float: left;}
nav li:first-child{margin-top: 1px;}

.ind-topo {float: left; width: 100%; background: #000000; }

.ind-logo{position: absolute; width: 25%; left: 0; top: 0; text-align: center;}

/*Smartphone*/
@media only screen and (max-width: 480px){

    nav li{width: 90%; display: none; background: #A9CF46; height: 30px; padding-top: 10px; padding-bottom: 10px; padding-left: 10%; border-bottom: 1px #FFFFFF solid; color: #333333; cursor: pointer;}
    
    .ind-topo {height: 50px; }
    
    .ind-botao{position: absolute; width: 65%; top: 3px; right: 0; cursor: pointer; padding-right: 10%; text-align: right;}

    .ind-logo img{margin-top: 3px; max-height: 40px;}
}

/*Tablet*/
@media only screen and (min-width: 481px) and (max-width: 768px){

    nav li{width: 90%; display: none; background: #A9CF46; height: 30px; padding-top: 10px; padding-bottom: 10px; padding-left: 10%; border-bottom: 1px #FFFFFF solid; color: #333333; cursor: pointer;}

    .ind-topo {height: 60px; }
    
    .ind-botao{position: absolute; width: 65%; top: 9px; right: 0; cursor: pointer; padding-right: 10%; text-align: right;}

    .ind-logo img{margin-top: 3px; max-height: 50px;}
}

/*Desktop*/
@media only screen and (min-width: 769px){
    nav{position: absolute; height: 40px; padding-left: 25%; padding-top: 20px;}
        nav li{width: 15%; text-align: center;}
        nav li:last-child{color: #A9CF46;}
    
    .ind-topo {height: 60px; }
    
    .ind-botao{display: none;}
    
    .ind-logo img{max-width: 100%;}
}

Repare no código acima que temos 03 media queries e que uma parte do código está fora de todas as media queries. Isso significa que certas características servem pra smartphone, outras pra tablet, outras pra notebook e o restante serve para todas as resoluções.

Outro detalhe importante de se observar, é que a classe .ind-botao recebe display:none; para desktop, ou seja, o botão não aparecerá nas telas maiores.

Na segunda aula de construção do menu responsivo realizaremos a codificação do javascript e a finalização da estilização.

Até lá!