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.

Tutorial: Crie um menu de navegação jQuery!

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

Tutorial: Crie um menu de navegação jQuery!

Tutorial: Crie um menu de navegação jQuery!

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:

Tutorial: Crie um menu de navegação jQuery!

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:

Tutorial: Crie um menu de navegação jQuery!

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”:

Tutorial: Crie um menu de navegação jQuery!

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:

Tutorial: Crie um menu de navegação jQuery!

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

Tutorial: Crie um menu de navegação jQuery!

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:

Tutorial: Crie um menu de navegação jQuery!

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

Tutorial: Crie um menu de navegação jQuery!

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:

Tutorial: Crie um menu de navegação jQuery!

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

Tutorial: Crie um menu de navegação jQuery!

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

Tutorial: Crie um menu de navegação jQuery!

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

Tutorial: Crie um menu de navegação jQuery!

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:

Tutorial: Crie um menu de navegação jQuery!

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:

Tutorial: Crie um menu de navegação jQuery!

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:

Tutorial: Crie um menu de navegação jQuery!

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%):

Tutorial: Crie um menu de navegação jQuery!

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

Tutorial: Crie um menu de navegação jQuery!

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:

Tutorial: Crie um menu de navegação jQuery!

De seguida clique em File / Save As

Tutorial: Crie um menu de navegação jQuery!

e guarde com o nome fundo, em formato PNG:

Tutorial: Crie um menu de navegação jQuery!

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

Tutorial: Crie um menu de navegação jQuery!

De seguida clique em Edit / Copy Merged

Tutorial: Crie um menu de navegação jQuery!

Clique em File / New

Tutorial: Crie um menu de navegação jQuery!

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

Tutorial: Crie um menu de navegação jQuery!

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

Tutorial: Crie um menu de navegação jQuery!

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

Tutorial: Crie um menu de navegação jQuery!

Delete:

Tutorial: Crie um menu de navegação jQuery!

De seguida clique em File / Save As

Tutorial: Crie um menu de navegação jQuery!

E guarde com o formato PNG com o nome capa:

Tutorial: Crie um menu de navegação jQuery!

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:

Tutorial: Crie um menu de navegação jQuery!

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

Abraço!

 

Autor: Diogo Espinha

Blog do Autor | Artigos do Autor:

Workaholic e totalmente viciado em computadores, Internet e desporto motorizado. Adora praticar desporto, é um curioso da programação em PHP, CSS e HTML5 e não dispensa a companhia do seu Mac OSX 86 Snow Leopard!

Templates Incríveis para seus Projetos:

  • HelpDesk - Ticket Support & Knowledge Drupal Theme
  • CityCab - Taxi Company Responsive Joomla Template
  • Maya - Smart & Powerful Joomla Theme
  • SIM - One Page Parallax Joomla Template
  • Yunik - Responsive Multipurpose Drupal 7 Theme
  • Barrister - Responsive Law Business Joomla Template
  • Leaders – Creative Multipurpose Drupal Theme
  • Jawda - Responsive Multipurpose Joomla Theme
  • illusion - Premium Multipurpose Drupal Theme
  • Hoxa - Responsive Multipurpose Joomla Template
  • Element-Multipurpose Drupal Theme
  • Wisten - One Page Parallax Joomla Template

Gostou deste artigo? Então torne-se fã do Blog no Facebook!



Comentários dos Alunos


  1. Junior Net
    15 de maio de 2013

    Se o tutorial funcionar e o resultado for tecnicamente satisfatório…. parabéns então. A página será uma boa referência para quem quiser estudar um pouco da verdadeira programação web (e design ao mesmo tempo – photoshop).

    Responder

Comente o Artigo!

RSS
Twitter
Facebook
Comentários
ASSINANTES
SEGUIDORES
FÃS
COMENTÁRIOS
7678

Subscrever Newsletter
Subscreva a Newsletter:



Aplicativos Android, iPhone e Muito Mais!




Assine a Escola Criatividade Assine a Newsletter da Escola Criatividade Escola Criatividade no Twitter Escola Criatividade no Facebook Escola Criatividade no Youtube Escola Criatividade no Google Buzz