• Tweet
• Email

• Tweet
• Email

O menu de navegação de um website é um dos primeiros locais para onde os visitantes olham, uma vez que é o local onde poderão navegar dentro do seu website. Como tal, este necessita de ser vistoso, com boa usabilidade e que realmente funcione. Enquanto navega na internet no seu dia-a-dia certamente já se deparou com menus de navegação confusos e com mau aspecto, que não potenciam a usabilidade de um website, complicando a experiência de navegação dos seus visitantes. Por outro lado certamente já se deparou com menus fantásticos que são tudo aquilo que você procura: um menu bonito, funcional e que não dificulta a navegação dentro do website, potenciando de forma positiva a experiência do usuário na navegação do seu website. Para si que procura criar um fantástico menu de navegação para si ou para um cliente, no artigo de hoje vamos-lhe mostrar como o fazer, utilizando jQuery, HTML, CSS e Adobe Photoshop. Curioso? Não perca mais tempo, através de simples passos você irá conseguir criar o seu próprio menu de navegação jQuery animado!

1. DESIGN

O primeiro passo fazer o design do nosso menu jQuery, e para tal vamos utilizar a tão conhecida ferramenta da Adobe, o Photoshop. Comecemos por criar um fundo, com 1000 x 800 px de largura, com uma cor à sua escolha. De notar que você poderá optar por não utilizar uma imagem de fundo e sim utilizar CSS para dar cor – ficará ao seu critério. No entanto neste tutorial vamos mesmo criar um background em Photoshop.

Crie um novo documento e preencha o fundo com uma cor à sua escolha. Neste caso utilizámos a cor creme, bastante subtil para o efeito. Depois de criado o documento, adicione um filtro Noise de 2% – Clique em Filter / Noise / Add Noise

Clique em OK e o efeito irá ser aplicado ao documento. De seguida crie um rectângulo onde irão ficar os links de navegação deste tutorial. Comece por criar um rectângulo centrado no documento, com uma cor ligeiramente mais escura que aquela que definiu para o fundo:

Quanto ao tamanho, dê um tamanho a rondar os 750/800px, será o ideal para a conclusão deste tutorial. O próximo passo é desenhar o elemento que irá dar alguma vida ao menu, através de jQuery. Para isso crie um retângulo com cerca de 130 x 200px de uma cor à sua escolha. No nosso caso utilizámos um azul bastante vistoso, que chama à atenção:

Se depois de desenhar o retângulo não estiver contente com o seu aspecto, prima CTRL+T e irá ter a possibilidade de alterar o seu tamanho. Depois de criar o retângulo, crie uma linha de guia para o auxiliar no próximo passo. Para o fazer, primeiro tem de ter as réguas ativas, para isso clique em View e seleccione a opção “Rulers”:

Depois de ativadas as réguas, para adicionar uma linha de guia simplesmente clique na régua situada do lado esquerdo do documento, e sem largar o clique arraste para dentro do documento, irá surgir uma linha, e quando a largar será criar a linha de guia:

Depois de largada, a linha de guia fica bastante visivel:

De seguida vamos dar forma ao retângulo, cortando um pedaço no fundo para dar uma bonita forma. Para isso vamos tirar partido da linha de guia, e usando a Polygonal Lasso Tool vamos criar um pequeno triângulo no fundo da forma criada, para remover e criar o desenho pretendido:

Depois de seleccionado, prima a tecla Delete para remover a zona seleccionada:

Para fazer o mesmo do lado contrário, há que primeiro tirar partido das funcionalidades de Adobe Photoshop. Clique com o botão direito do rato sobre a selecção e no menu clique em Transform Selection:

De seguida, clique novamente com o botão direito do rato sobre a seleção e clique em Flip Horizontal:

De seguida basta arrastar a seleccção para o local pretendido:

Depois de posicionado, resta premir a tecla Delete para remover a selecção:

Depois deste passo já podemos apagar a linha de guia, para isso simplesmente arraste-a para fora do documento.

Agora vamos estilizar o elemento, criando um gradiente de cores, desde um azul mais escuro para um azul mais claro:

Agora vamos adicionar uma linha á volta do elemento, chamada de Stroke. Utilize uma cor mais escura em comparação à base que está a utilizar, aplicando uma linha de 2px alinhada por dentro:

O próximo passo é adicionar um Inner Glow para embelezar um pouco mais o elemento, para isso utilize uma cor ligeiramente mais clara, defina a opacidade a 100%, 50% de Choke e size 3px:

De seguida vamos dar o toque final, adicionamos uma sombra ao elemento, um pormenor que dá bastante qualidade visual. O ideal é colocar a 90º e definir a opacidade entre os 20% e os 30% (neste caso utilizámos 25%):

De seguida poderá criar as palavras do menu para ter uma ideia visual de como irá ficar no final:

2. GUARDAR IMAGENS

Depois de criados os elementos, é importante guarda-los. Para guardar o fundo, primeiro vá às Layers do docuemento e deixe apenas o fundo e a caixa que criámos para o menu à vista:

De seguida clique em File / Save As

e guarde com o nome fundo, em formato PNG:

Neste momento já tem o fundo. Repita o processo para o elemento visual que criámos anteriormente, seleccionando-o primeiro:

De seguida clique em Edit / Copy Merged

Clique em File / New

E o programa automaticamente irá definir o tamanho do novo documento de acordo com o tamanho do elemento copiado:

Clique em Ok e de seguida cole o elemento dentro do novo documento:

Uma vez que não pretendemos ter um fundo neste elemento, vá às layers e faça delete no background:

Delete:

De seguida clique em File / Save As

E guarde com o formato PNG com o nome capa:

3. PROGRAMAÇÃO

A programação é o que irá juntar todos os elementos e criar o efeito desejado. Em primeiro lugar temos o HTML do documento, onde definimos a lista dos menus com os devidos links, que neste caso não irão estar preenchidos:

HTML:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- saved from url=(0071)http://line25.com/wp-content/uploads/2011/animated-menu/demo/index.html -->
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Tutorial: Crie um menu de navegação jQuery!</title>

<link href="style.css" rel="stylesheet" type="text/css" media="screen">

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/animate-bg.js" type="text/javascript"></script>
<script src="js/scripts.js" type="text/javascript"></script>
</head>

<body>

<div id="container">
	<ul id="nav">
		<li><a href="#" class="js">Inicio</a></li>
		<li><a href="#" class="js">Servicos</a></li>
		<li><a href="#" class="js">Portefolio</a></li>
		<li><a href="#" class="js">Contatos</a></li>
	</ul>
</div>

</body>
</html>

Outro passo importante é a estilização utilizando CSS:

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
	margin: 0; padding: 0; border: 0;
}

body {
	background: #F2DBA9;
}

#container {
	height: 800px;
	background: url(imagens/fundo.png) center top no-repeat;
}

ul#nav {
	width: 850px; margin: 0 auto; text-align: center; overflow: hidden;
}
	ul#nav li {
		float: left; list-style: none;
	}
		ul#nav li a {
			display: block; width: 126px; height: 190px;
			padding: 105px 0 0 0; margin: 0 30px 0 32px;
			font: bold 14px Verdana, Geneva, sans-serif; text-transform: uppercase;
			color: #494dd7; text-shadow: 0 1px 3px #c4bda6; text-decoration: none;

			background: url(imagens/capa.png) 0 -200px no-repeat;
		}
			#nav li a:hover {
				background: url(images/capa.png) 0 0 no-repeat;
				color: #eee9d9; text-shadow: 0 2px 3px #4c2222;

			}

			ul#nav li a.js:hover {
				background: url(imagens/capa.png) 0 -149px no-repeat;
			}

Javascript. Ainda assim, falta o elemento que irá fazer com que o efeito hover seja brilhante e suave, denotando qualidade em todo o seu esplendor. Crie um ficheiro scripts.js e insira o seguinte código:

$(document).ready(function() {
	$("ul#nav li a").addClass("js");
	$("ul#nav li a").hover(
      function () {
        $(this).stop(true,true).animate({backgroundPosition:"(0 0)"}, 200);
        $(this).animate({backgroundPosition:"(0 -5px)"}, 150);
      },
      function () {
        $(this).animate({backgroundPosition:"(0 -200px)"}, 500);

      }
    );

});

Resta fazer uma chamada de atenção, para que os efeitos jQuery funcionem necessita de primeiro incluir a biblioteca javascript no documento (feito no documento HTML) e incluir um script da animação + o script criado por nós. Para lhe facilitar a execução deste tutorial, deixamos-lhe os ficheiros fonte ( incluíndo um ficheiro PSD) que poderá baixar aqui.

Aqui fica uma imagem com o resultado final:

Se tiver alguma dúvida, não hesite em perguntar.

Abraço!