Entrar
Cadastre-se
Ajuda
vamos lá.. a minha solução pro Terceiro Menu, foi esta:
http://www.cenasordi...rceiroMenu.html
Veja que a marcação é a mais simples possível:
<ul id="menu"> <li class="home"><a href="terceiroMenu.html">Home</a></li> <li class="game"><a href="terceiroMenu2.html">Game</a></li> <li class="dicas"><a href="#">Detonados</a></li> <li class="voltar"><a href="#">Voltar</a></li> </ul><!-- /menu -->apenas com adição de classes para cada item, para depois conseguirmos fazer o efeito de página atual.
Algumas coisas são básicas, como troca de cor e sublinhados.
Em soluções 'tradicionais', já que temos cantos arredondados, usaríamos uma imagem para cada canto(esquerdo|direito), e uma para se repetir horizontalmente, para poder deixar o menu 'esticável' em largura. Ai totalizaríamos 3 imagens.. e um certo malabarismo para posicionar elas.
Não precisei de elementos vazios. Pois trabalhei com apenas 2 imagens.
Eu consegui isso, pois os meus cantos redondos da esquerda, já possuem a suposta repetição:
Apliquei no LI:
#menu li {
float: left; /* flutuar cada LI, para termos um menu horizontal */
margin-left: 5px; /* espaçamento de um item para o outro */
height: 28px; /* importante definirmos a altura, para que não 'corte' o background */
background: url('bgLIs.png') left center; /* aqui já entra a imagem, posicionada no left do elemento, e com a altura no centro, por causa do css sprit */
}CSS Spritee a outra imagem eu apliquei no outro elemento, o A:
#menu li a {
color: #fff; /* cor do texto */
text-decoration: none; /* retirando o underline no estado :link */
font-weight: bold; /* deixando o texto em negrito */
display: block; /* importante definir o display block, por causa do efeito que eu quis */
padding: 0 25px; /* padding left|right de 25px; para afastar as bordas do texto */
height: 28px; /* a mesma altura do LI */
line-height: 28px; /* para centralizar o texto na vertical, coloco o mesmo valor do height */
text-align: center; /* alinhando o texto no centro horizontal explicitamente, só para garantir */
background: url('cantos.png') no-repeat right center; /* aqui é a outra imagem, com apenas os cantos redondos da direita */
}seguindo no meu css, temos um 'hack' para concertar um bug do IE6:/* bug do IE6 com o display: block; para elementos sem width */
* html #menu li a {
width: 40px;
} é o 'hack estrela html', pois apenas o IE6 aceita um 'pai' para o elemento HTML.Daí em diante vem a 'magica'. O estado de "mouse over".
#menu li a:hover {
background: url('cantos.png') no-repeat right top; /* aqui eu mudo de 'center' para 'top', é o CSS sprite! */
color: #000; /* coloco o texto na cor preta */
text-decoration: underline; /* coloco um underline */
}
#menu li:hover,
#menu li.over {
background: url('bgLIs.png') left top; /* aqui eu troco a imagem dos cantos esquerdos, e do corpo dos items.. e mudo o 'center' para 'top' tb.. aproveitando o css sprite */
} note que a classe '.over' só existe por causa do Javascript que é usado para aplicar :hover no LI, para o IE6.Sem o JS, a minha solução funciona perfeitamente nos outros browsers mais 'standards'.
Oque segue, é para aplicarmos o efeito de 'link atual'. Muitos confundem com o pseudo :active, mas ele é apenas o momento do click.
As outras soluções usaram uma class="current", que deve ser colocada no link da página em questão.
Dessa forma, temos que testar item por item do menu, para sabermos quem vai possuir a classe.. se tivermos um site dinâmico, isso se tornará bem custoso.
body#home ul#menu li.home,
body#game ul#menu li.game,
body#dicas ul#menu li.dicas {/* essa do body#dicas não chega a acontecer nos meus arquivos */
background: url('bgLIs.png') left bottom;
}
body#home ul#menu li.home a,
body#game ul#menu li.game a,
body#dicas ul#menu li.dicas a {
background: url('cantos.png') no-repeat right bottom;
}
body#home ul#menu li.home a:hover,
body#game ul#menu li.game a:hover,
body#dica ul#menu li.dicas a:hover {
color: #ff0;
} Aqui, a técnica, é ficar alterando o id do body do documento.Veja:
terceiroMenu.html
<body id="home">o link atual dele, é o item "Home" do menu.
e o terceiroMenu2.html
<body id="game">o link atual dele, é o item "Game" do menu.
Mais uma vez, uso o css sprit.. para o terceiro estado(link atual).
A técnica foi deixar pro CSS resolver quem é a página. Pois veja que as declarações se tornam falsas.
E só vai aplicar a regra, qndo a id do body bater com a declarada na marcação.
Qualquer dúvida sobre as soluções perguntem. Vamos estudar a melhor forma, e criar efeitos interessantes usando os super poderes do CSS!
Quote
Para todos os demais, só usei HTML e CSS. 
