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! *-*
