Legenda
Barra de navegação em CSS3 e jQuery
O objectivo é simples, fazer um menu de navegação o mais parecido possível ao pacote de navegação em Photoshop que o Eduardo publicou.
Mas não posso usar nenhuma imagem. Nada, zero, nothing!
Claro podia subir a parada e dizer que tem que ser compatível com todos os navegadores! Mas não, vamos deixar esse pequeno detalhe de lado, porque iria ser um pouco mais difícil.
Neste tutorial vamos usar CSS3, por isso qualquer navegador que suporte CSS3 deve funcionar como deve ser. Eu testei esta solução em:
- Firefox
- Google Chrome
Agora que já sabemos o que queremos fazer, vamos pôr mãos à obra.
HTML
Vamos começar pelo o nosso HTML.
<div id="Navegacao">
<ul>
<li><a href="#undefined" title="Página Inicial">Página Inicial</a></li>
<li><a href="#undefined" title="Sobre">Sobre</a></li>
<li><a href="#undefined" title="Contactos">Contactos</a></li>
<li><a href="#undefined" title="Negócios" class="selecionado">Negócios</a></li>
<li><a href="#undefined" title="Suporte">Suporte</a></li>
<li><a href="#undefined" title="Link Muito Grandeeeeeeeeeeeeeeee">Link Muito Grandeeeeee</a></li>
</ul>
<div id="Caixa"></div>
</div>
Nada de complicado, como podemos ver é um markup bastante simples e correcto.
Temos um div com o IDNavegacao vai servir de contentor para a barra de navegação.
Temos uma lista com links, e por fim temos um div com o IDCaixa que vai servir para criar uns quantos efeitos que vamos ver mais tarde.
Se repararem no design do Edumicro podem ver que o link que esta seleccionado tem uma cor de fundo diferente, para tentarmos criar o mesmo efeito vamos usar o Caixa.
Mas antes de começarmos a pensar em funcionalidade, vamos tentar criar esta barra de navegaçãoa mais parecida possível ao design do Edumicro, para tal começamos com CSS.
Explicar um pouco o CSS
No design em Photoshop podemos ver que certos detalhes são um pouco mais difíceis em CSS, mas mesmo assim possíveis, mesmo sem ter o mesmo resultado final podemos quase imitar o original.
Cantos redondos, com o CSS3 já é possível conseguir sem ter que recorrer a grandes truques ou a imagens para tal usamos border-radius.
Gradientes também já é possível, apesar de ainda ser necessário usar uns quantos truques, e o resultado final não ser bem igual para todos os navegadores.
Especialmente porque temos que criar o efeito em três formas diferentes para suportar cada navegador ( FF / Motor Webkit / IE).
Para o firefox usamos:
background: -moz-linear-gradient(top, #2E6FC0 0%, #4491D6 50%, #3A86CA 51%, #2D6FBE 100%);
O top é usado para indicar onde queremos começar, o ponto de partida do nosso gradiente.
O resto usamos para indicar as cores dos gradientes, as posições que começam e acabam.
Para mais informações visitar Mozilla.
Para navegadores baseados no motor WebKit (Safari por exemplo), usamos:
-webkit-gradient(linear, left top, left bottom, color-stop(0%,#2E6FC0), color-stop(50%,#4491D6), color-stop(51%,#3A86CA), color-stop(100%,#2D6FBE));
O primeiro argumento é o tipo de gradiente e pode ser linear ou radial.
O segundo e o terceiro argumento é a posição, e por fim as cores onde começam e onde acabam.
Para mais informações visitar o WebKit.
Por fim temos a solução para o Internet Explorer, que mais uma vez não corresponde aos standards, mas para também não ser tão mauzinho, acho que o Internet Explorer já suporta gradientes desde a versão 5.5.
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2E6FC0', endColorstr='#2D6FBE',GradientType=0 );
Como podemos ver o IE não suporta a possibilidade de controlarmos as posições onde queremos começar uma cor e acabar com outra cor.
Temos também o GradientType, que pode ser 0 para vertical e 1 para horizontal.
Para mais informações visitar o site da Microsoft.
Uma forma mais fácil de fazeres os gradientes é através do site Colorzilla.
Vamos então construir o CSS.
CSS
#Navegacao{
border: 1px solid #004FAA;
padding: 15px 30px 15px 30px;
font-family: arial, serif;
font-size: 18px;
/* Cantos redondos */
-moz-border-radius: 6px;
border-radius: 6px;
/* A posicao e o z-index queremos que a nossa caixa esteja por baixo da barra de navegacao */
position:absolute;
z-index: 2;
/* Gradiente */
/* browsers antigos */
background: #2E6FC0;
/* firefox */
background: -moz-linear-gradient(top, #2E6FC0 0%, #4491D6 50%, #3A86CA 51%, #2D6FBE 100%);
/* webkit */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2E6FC0), color-stop(50%,#4491D6), color-stop(51%,#3A86CA), color-stop(100%,#2D6FBE));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2E6FC0', endColorstr='#2D6FBE',GradientType=0 ); /* ie */
}
#Navegacao ul{
list-style-type: none;
padding:0;
margin:0;
}
#Navegacao ul li{
display: block;
float:left;
padding-right:20px;
}
#Navegacao a:link{
text-decoration: none;
color: #FFFFFF;
}
#Navegacao a:visited{
color: #FFFFFF;
}
#Caixa{
/* z-index para a caixa estar por baixo da navegacao */
position: absolute;
z-index:-1;
border:1px solid #265FB1;
background: #2E6FC0; /* browsers antigos */
background: -moz-linear-gradient(top, #3374C5 0%, #7CB3E2 50%, #74ABDA 51%, #6396CF 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3374C5), color-stop(50%,#7CB3E2), color-stop(51%,#74ABDA), color-stop(100%,#6396CF));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3374C5', endColorstr='#7CB3E2',GradientType=0 ); /* ie */
padding:20px 10px 20px 10px;
/* Cantos redondos */
-moz-border-radius: 3px;
border-radius: 3px;
}
Podemos notar que em termos de estilo a barra de navegação está completa, mas o efeito que foi dado na Caixa de momento não faz sentido.
Para tal vamos usar javascript com ajuda do jQuery, para criar uma animação. Basicamente queremos que a Caixa se mova conforme o rato do usuário.
Se o o usuário passar com o rato pelo o link "Negócios" então queremos que a nossa Caixa se mova até esse link.
Queremos também que a posição inicial da Caixa seja o link que tenha a referência à classe selecionado
Um pequeno aviso, o javascript que vou apresentar é bom já terem um pouco de conhecimento de jQuery.
Vamos então começar o nosso Javascript.
Javascript
$(document).ready(function() { // Documento esta pronto
$("#Navegacao ul li").mouseenter(function(evento) { // O usuario passa com o rato nos nossos links
// Cache
var elemento = $(this);
// Posicao e tamanho do elemento
var Largura = $(elemento).width(); // Largura do li
var PosicaoEsquerda = $(elemento).position().left - 10; // Posicao do li menos 10, pois estamos a adicionar no padding no CSS
var PosicaoTop = $(elemento).position().top - 10; // Posicao do li menos 10, pois estamos a adicionar no padding no CSS
// Animacao
$("#Caixa").stop().animate({ "top": PosicaoTop + "px", "left": PosicaoEsquerda + "px", "width": Largura + "px" }, "slow");
});
// Se o rato sair da barra de navegacao entao chamar a nossa funcao PosicaoSelecionado
$("#Navegacao").mouseleave(function(evento) {
PosicaoSelecionado(false);
});
// Para quando a pagina arranca pela a primeira vez ou o usuario tira o rato da nossa barra de navegacao
function PosicaoSelecionado(PrimeiraVez) {
// cache o elemento selecionado
var Selecionado = $(".selecionado");
//Mover para essa posicao
var PosicaoEsquerda = $(Selecionado).position().left - 10;
var PosicaoTop = $(Selecionado).position().top - 10;
var Largura = $(Selecionado).width();
// Se for a primeira vez que o script arranca então mudar logo para essa posição, senão usar uma animação
if (PrimeiraVez == true) {
$("#Caixa").css({ "top": PosicaoTop + "px", "left": PosicaoEsquerda + "px", "width": Largura + "px" });
} else {
$("#Caixa").stop().animate({ "top": PosicaoTop + "px", "left": PosicaoEsquerda + "px", "width": Largura + "px" }, "slow");
}
}
// Quando a pagina arranca pela a primeira vez e queremos a nossa caixa no link correcto
PosicaoSelecionado(true);
});
Conclusão
Estou contente com o resultado final, mas a verdade tem que ser dita e existe vários pormenores que não consegui igual ao pacote que o Eduardo publicou.
Os gradientes no Photoshop resultam melhor, e os detalhes que o Eduardo deu nas barras de navegação são difíceis de replicar na minha solução.
Porém foi um desafio interessante, fiquei a saber um pouco mais de gradientes em CSS3.
Para uma solução mais realista, acho que se misturarmos este tutorial com o pacote de barras de navegação, acho que é mesmo a melhor solução.
Espero que tenham gostado deste tutorial.
Sobre o autor
2 Respostas sobre Barra de navegação em CSS3 e jQuery
-
Olá, muito bom o artigo, não estou conseguindo baixar o exemplo!
Dezembro 17, 2010
Hehe, ficou porreiro o tutorial.
É sim difícil replicar o efeito, principalmente as inner shadows do “hover”. 