Menu fixo retrátil em jQuery

Tutorial HTML, CSS e Javascript

Um menu é um item importantíssimo em um layout, quiçá até o mais importante, já que o papel dele é direcionar o leitor para as principais páginas e permitindo a navegação e incentivando a interação do usuário com o seu blog. Desta forma, um menu sempre visível é fundamental, né? O mais comum que vemos na blogosfera em geral é o menu fixo no topo da página enquanto rolamos a barra de rolagem. E neste tutorial ensinarei duas formas de apresentação de menu retrátil que dá um ar mais elegante em seu layout, e otimiza o espaço de visualização de seu blog sem perder a importância do menu pois ele sempre continuará ali. Basta escolher qual menu mais lhe agrada e seguir o tutorial.

Menu 1     Menu 2

O exemplo 1 apresenta de primeira a barra do menu fixa no topo e logo depois que começa a rolar a barra de rolagem ele desaparece, porém pode ser sempre visualizado pelo item "menu" sempre que precisar. É indicado para menus que podem ocupar um espaço considerável no layout quando aberto. Por outro lado, o exemplo 2 é ótimo para caso você queria fazer algo diferente no cabeçalho de layout e depois quer mostrar o menu para o usuário de uma forma mais simplificada. Vamos aos códigos?


1) Inserindo o jQuery

Antes de mais nada você precisa habilitar o jQuery em seu blog. É ele que permitirá os efeitos dos menus. É necessário que venha acima de toda a lista de scripts do <head>.

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

2) HTML padrão

Esta será a estrutura de HTML básica que funcionará para os dois tipos de menus.

<div class="menu_mluv_retratil">
	<nav>
		<a href="http://link.com/">nome menu</a>
		<a href="http://link.com/">nome menu</a>
		<a href="http://link.com/">nome menu</a>
		<a href="http://link.com/">nome menu</a>
		<a href="http://link.com/">nome menu</a>
	</nav>
	<a class="mostra-esconde-menu" href="javascript:void(0);">esconder ▼</a>
</div>

3) CSS e Script do MENU 1

Segue abaixo os códigos relacionados ao exemplo 1.

3.1) CSS base

/* ==== menu retrátil madlyluv.com ==== */
.menu_mluv_retratil {width: 100%; height: 65px; display: block; background: #f69797; position: fixed; top: 0; z-index: 100;  -webkit-transition:All 0.5s ease; -moz-transition:All 0.5s ease; -o-transition:All 0.5s ease;}
.menu_mluv_retratil.esconder {top: -65px; position: fixed;}
.menu_mluv_retratil nav {margin: 0 20px; padding: 0; list-style: none; float: left;}
.menu_mluv_retratil nav a {line-height: 65px; color: #fff; text-transform: uppercase; padding: 0 10px; text-decoration: none;}
.menu_mluv_retratil nav a:hover {color: #E26767}

.menu_mluv_retratil a.mostra-esconde-menu {width: 98px; height: 25px; display: block; line-height: 25px; background: rgba(0, 0, 0, 0.75); position: absolute; top: 65px; right: 20px; font-size: 9px; font-family: 'Arial', sans-serif; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; text-align: center; color: #fff; z-index: 100; text-shadow: 1px 1px 1px rgba(0,0,0,0.35); text-decoration: none; -webkit-transition:All 0.5s ease; -moz-transition:All 0.5s ease; -o-transition:All 0.5s ease;}
.menu_mluv_retratil a.mostra-esconde-menu.acao-menu {margin-top: -65px;}

Em .menu_mluv_retratil defini sua posição fixa, largura de 100% e uma altura de 65px e efeitos de transição para animação. Fiz uma classe chamada .esconder para ocultar o menu quando eu quiser bem como fiz um link com a classe .mostra-esconde-menu. Estas duas últimas classes mencionadas serão aplicadas por jQuery no momento em que rolar.

3.2) Código jQuery

<script>
$(document).ready(function() {
// mostra esconde menu
  $("a.mostra-esconde-menu").click(function(){
      $(".menu_mluv_retratil").toggleClass('esconder');

      if ($(this).text() == "esconder ▲")
       $(this).text("menu ▼")
        else
       $(this).text("esconder ▼");      
  }); 
});
// menu ao rolar
$(window).bind('scroll', function () {
      if ($(window).scrollTop() > 350) {
        $(".menu_mluv_retratil").addClass('esconder');
        $("a.mostra-esconde-menu").text('menu ▼');
      } else if ($(window).scrollTop() < 350) {
        $(".menu_mluv_retratil").removeClass('esconder');
        $("a.mostra-esconde-menu").text('esconder ▲');
      }
});
</script>

O primeiro item do script é o que vai determinar o texto do link que tem a classe .mostra-esconde-menu, que irá trocar de texto toda vez que este botão for clicado, indicando o "mostrar menu" e o "esconder menu", bem como aplicará e retirará a classe .esconder quando este botão for clicado.

A segunda parte do script é a indicação da barra de rolagem. No script está indicando que, sempre ao rolar, quando ultrapassa 350px do topo, ele esconderá o menu e adicionará o texto "menu" no link .mostra-esconde-menu. Caso contrário, se o usuário ainda não moveu esta barra de rolagem, o menu não estará escondido e o botão estará com o texto "esconder".


4) CSS e Script do MENU 2

Os códigos são bastante parecidos mas possuem uma leve diferença do menu para o menu 2. O menu 2 não precisa do botão de mostrar e esconder, como acontece no primeiro. Veja abaixo a estrutura.

<div class="menu_mluv_retratil">
	<nav>
		<a href="http://link.com/">nome menu</a>
		<a href="http://link.com/">nome menu</a>
		<a href="http://link.com/">nome menu</a>
		<a href="http://link.com/">nome menu</a>
		<a href="http://link.com/">nome menu</a>
	</nav>
</div>

4.1) CSS base

/* ==== menu retrátil madlyluv.com ==== */
.menu_mluv_retratil {width: 100%; height: 65px; display: block; background: #f69797; position: fixed; top: -65px; z-index: 100;  -webkit-transition:All 0.5s ease; -moz-transition:All 0.5s ease; -o-transition:All 0.5s ease;}
.menu_mluv_retratil.mostrar {top: 0; position: fixed;}
.menu_mluv_retratil nav {margin: 0 20px; padding: 0; list-style: none; float: left;}
.menu_mluv_retratil nav a {line-height: 65px; color: #fff; text-transform: uppercase; padding: 0 10px; text-decoration: none;}
.menu_mluv_retratil nav a:hover {color: #E26767}

A diferença de código para o menu 1 deste segundo é que em vez de esconder o menu, ele irá mostrar (através da classe .mostrar).

4.2) Código jQuery

<script>
// menu ao rolar
$(window).bind('scroll', function () {
      if ($(window).scrollTop() > 350) {
        $(".menu_mluv_retratil").addClass('mostrar');
      } else if ($(window).scrollTop() < 350) {
        $(".menu_mluv_retratil").removeClass('mostrar');
      }
});
</script>

O jQuery deste menu é bem mais simples que o primeiro. Ele apenas indica que, logo após o usuário rolar 350px o menu que antes estava oculto, passará a ser visível. ;D

Prontinho! Agora é com você a customização de seu menu. Coloque plano de fundo, brinque com sua marca, com fontes. Seja criativo! *-*

Veja também...

Dica de série: Anne with an E, da Netflix
King's Cross + Tour completo pelos Studios de Harry Potter
Almoço no Las Nenas Café Bistrô (Goiânia)

32 Comentário(s)

(32 pelo blog e pelo facebook)
  • Natália Martins Marques
    Visitar blog
    08 . 07 . 2016

    Aninha, eu uso o layout que você disponibilizou aqui para nós, onde em coloco os códigos nele? Tenho medo de mexer e tirar o blog do ar. Eu já fiz isso uma vez mexendo em outro layout e agora morro de medo kkkk
    Beijos <3

    Responder

    • Aninha
      Visitar blog
      08 . 07 . 2016

      Natália, o CSS vc coloca em style.css e o script você coloca lá no painel "Opções do Tema", na abinha "Scripts" e dai você coloca no campo que aparecerá no topo (o primeiro campo). Você não precisa fazer o passo 1) que é para colocar o jQuery pois o tema mLuv já vem com ele ativado!

      Responder

      • Natália
        Visitar blog
        11 . 07 . 2016

        Flor, coloquei o Script, a minha duvida agora é: onde exatamente eu coloco os outros códigos ( o 4.1 e o HTML padrão)? Eu não entendo muito bem de HTML, não estou sabendo onde colocar certinho no mLuv. Me socorre, pleaaaase kkkkk Beijos

        Responder

        • Aninha
          Visitar blog
          11 . 07 . 2016

          Na pasta "inc" abra o arquivo menu.php e abaixo de <!-- fim menu-topo --> você coloca o código html do menu. Lembrando que ele não será automático como é o menu original do tema, viu? Caso queira que seja automático também sugiro que siga este tutorial e siga a opção 2 dele, que segue a mesma estrutura de html do menu retrátil. E dai em theme_location do código php do seu novo menu é só deixar como 'menu-topo' na frente, como está nos códigos acima dele em menu.php. O código final ficará deste jeito:

          <!-- fim menu-topo -->
          
          <div class="menu_mluv_retratil">
          	<?php 
          	  $menuParameters = array(
          	    'theme_location' 	=> 'menu-topo',
          	    'container'       => false,
          	    'echo'            => false,
          	    'items_wrap'      => '<nav>%3$s<nav>',
          	    'depth'           => 0,
          	  );
          	  echo strip_tags(wp_nav_menu( $menuParameters ), '<a>' );
          	?>
          </div>

  • Kellen
    09 . 11 . 2015

    Amei o tutorial, o menu ta lindo, conheci seu blog através do site da Fran Guarnieri, amando aqui *–*

    Responder

  • Rodrigo Braga
    Visitar blog
    14 . 08 . 2015

    @Aninha, Eu cheguei a ler o comentário da Thamara. Realmente o sinal de menor dá erro na plataforma do Blogger. Isso eu consegui resolver e já consegui incluir o menu no blogger, só não sei porque o menu não volta a se esconder quando rolo a página de volta ao topo. Deve ser porque estou usando um template externo ou sei lá… Se eu descobrir o motivo, te conto aqui. Obrigado mais uma vez. :D

    Responder

  • Rodrigo Braga
    Visitar blog
    14 . 08 . 2015

    Olá Aninha. Em primeiro lugar muito obrigado pela ajuda. Eu precisava muito de uma barra de menu como a do exemplo número 2, só que encontrei um problema: no exemplo, quando rolamos a página de volta, a barra se esconde novamente. A minha barra continua fixa no layout. Gostaria que ela se escondesse quando eu rolasse a página de volta ao topo. Estou utilizando o Blogger. Deve ser algum problema na plataforma deles. Você sabe como resolver esse problema no Blogger?
    Muito, mas muito obrigado mesmo e parabéns pelo Madly Luv! Além de lindo e super macio de navegar,, o conteúdo do blog é super interessante!

    Responder

    • Aninha
      Visitar blog
      14 . 08 . 2015

      @Rodrigo Braga, obrigada pelo elogio! Uma pessoa já veio comentando sobre um erro de interpretação do código pelo blogger aqui nos comentários. Clique aqui e veja (é o comentário da Thamara). Ela mudou o sinal lá no código jQuery e funcionou. Capaz que este seja o mesmo problema que o seu :)

      Responder

  • Ana
    29 . 07 . 2015

    Oi Aninha!!

    Muito obrigada vou tentar isso sim!!

    Bjos e parabéns pelo blog!!! :)

    Responder