Repente CSS - [Menus]

William Bruno · Julho 28, 2009

Quarto Menu:

Os efeitos, vcs podem criar como acharem melhor, com CSS puro, tentem evitar Javascript(exceto deixar funcionando no IE6), a(s) imagem(s) vcs terão que pegar do meu print, organizem ela(s), e façam os recortes como acharem melhor..
só lembrando das regras que citei, e que a elegância da solução vai contar na avaliação.
Dica:
-> Tem 2 imagens mas se trata apenas de um único arquivo!
-> O efeito principal, é o degradê no menu dropdown.. temos subitens em 2 menus:
Game(Historia, Personagens, Screens) e Dicas e Detonados(Estratégias, Telas e Mapas, Itens Secretos, Inimigos(boss), Outras).
-> Tomem cuidado com as cores. Recortem a(s) imagem(s) necessárias desse screen que postei.

Bom, é isso ai! SE VIREM! :lol:
Boa sorte à todos. :lol:

Menus Entregues: 4 (até o momento)

klonder
William Bruno
Thiago Retondar
Aline Branco

Aguardando: 0

PS: Podem ir postando, dizendo que estão fazendo.. encontrando dificuldades? ou que estão achando muito fáceis meus desafios... (se for o caso, aumento a dificuldade ou abaixo)

William Bruno · Agosto 4, 2009

Códigos Quarto Menu

klonder

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<title>Klonder - Quarto Menu - Repente CSS [Menus]</title>
<style type="text/css">
* {margin:0; padding:0; list-style: none;}
body {background-color:#C6C6C6;	margin-top: 20px;  margin-left:20px;}

#menu {
	padding:0; border:0;
	width:500px; height:46px;
	position: relative;
}

#menu li {
	padding: 0; border:#FFFFFF 1px solid;
	float:left; margin: 0 5px 0 5px;
	position: relative;
}

#menu li a.mn1 {
  	display:block;
	background: url("menu4.jpg"); color:#FFFFFF; text-decoration:none; font-size:16;
	padding: 12px 20px 12px 20px;
	position: relative;
}

#menu li a.mn1:hover {
	display:block;
	background: #245F9A; color:#6BFF9D; text-decoration:none; font-size:16;
	padding: 12px 20px 12px 20px;
	position: relative;
}

#menu li span {
	display:none;
	background:url("menu4_1.jpg");
}

#menu li:hover span {
	display:block;
	background:url("menu4_1.jpg");
	width:100%;
	padding:0 0 10px 0;
	border:#FFFFFF 1px solid;
	left:-1px; top:-1px;
	position:absolute;
}

#menu li:hover span a.top2 {
	display:block;
	padding: 12px 15px 12px 15px;
	color:#FFFFFF; font-size:12pt; text-decoration:none;
	border:0;
}

#menu li:hover span a {
	display:block;
	padding: 5px 0 5px 0;
	font-size:9pt;
	color:#FFFFFF; text-align:center; text-decoration:none;
	border:0;
}

#menu li:hover span a.top2:hover {
	display:block;
	padding: 12px 15px 12px 15px;
	color:#6BFF9D; font-size:12pt; text-decoration:none;
	border:0;
}

#menu li span a:hover {
	display:block;
	padding: 5px 0 5px 0;
	color:#6BFF9D; font-size:9pt; text-align:center; text-decoration:none;
	border:0;
}
</style>

</head>
<body>
<ul id="menu">
	<li><a href="#" class="mn1">Home</a></li>
	<li><a href="#" class="mn1">Game</a>
		<span>
			<span>
			<a class="top2" href="#">Game</a>
			<a href="#">História</a>
			<a href="#">Personagens</a>
			<a href="#">Screens</a>
		</span>
		</span>
	</li>
	<li><a href="#" class="mn1">Dicas e Detonados</a>
		<span>
			<a class="top2" href="#">Dicas e Detonados</a>
			<a href="#">Estratégias</a>
			<a href="#">Telas e mapas</a>
			<a href="#">Itens secretos</a>
			<a href="#">Inimigos (boss)</a>
			<a href="#">Outras</a>
		</span>
	</li>
	<li><a href="#" class="mn1">Voltar</a></li>
</ul>
</body>
</html>

William Bruno

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<title>William Bruno - Quarto Menu - Repente CSS [Menus]</title>
<style type="text/css">
@charset "UTF-8";
* {
	margin: 0;
	padding: 0;
}
body {
	margin: 20px;
	background: #c6c6c6;
}
ul { /* resolver bug do Chrome, declarações que vem antes do seletor global */
	margin: 0;
	padding: 0;
}
#menu li {
	float: left;
	height: 43px;
	line-height: 43px;
	display: block;
	background: url('./bgSub.jpg') center -22px;
	background: url('./bgMenu.jpg');
	margin-left: 10px;
	border: 1.5px solid #fff;
	padding: 0 10px 0 10px;
	position: relative;
	z-index: 10; /* ficar por cima do topo, que está com z-index 1 */
	white-space: nowrap;/* bug estranho do IE6 */
	color: #fff;
	cursor: default;
	text-align: center;
}
#menu li a {
	color: #fff;
	text-decoration: none;
	display: block;
}
#menu li a:hover {
	color: #6bff9d;	
}
#menu li ul {
	display: none;
	position: absolute;
	top: 43px;
	left: -1px;
}
#menu li:hover,
#menu li.over {
	background-image: none;
	background-color: #2e6ba4;
}
#menu li.game {
	width: 70px;
}
#menu li.game:hover {
	background-color: #2e6ba4; /* sobrescrever cor mais clara no degradê do menu, caso 4 sub-itens */
}
#menu li.dicas:hover {
	background-color: #3678b5; /* sobrescrever cor mais clara no degradê do menu, caso 5~6 sub-itens */
}
#menu li:hover ul,
#menu li.over ul {
	display: block;
	background: url('./bgSub.jpg') repeat-x bottom #3678b5;
	border: 1px solid #fff;
	border-top: none;
	font-size: 11px;
}
/* ajuste de cores IE6 */
#menu li.over {
	background-color: #3678b5;
}
#menu li.game {
	background-color: #3371ac;	
}
#menu li.game ul,
#menu li.dicas ul {
	width: 90px;
	padding-bottom: 10px;
	text-align: center;
}
#menu li.dicas ul {
	width: 135px;
}
#menu li.game ul li,
#menu li.dicas ul li {
	height: 25px;
	line-height: 25px;
	background-image: none; /* para não precisar de seletor filho > */
	border: none; /* zerando propriedades */
	background-color: transparent; /* zerando propriedades */
	padding: 0; /* zerando propriedades */
	margin: 0; /* zerando propriedades */
	float: none; /* zerando propriedades */
}
</style>
<script type="text/javascript">
window.onload = function() {
if (document.all&&document.getElementById) {
	navRoot = document.getElementById("menu");
		for (i=0; i<navRoot.childNodes.length; i++) {
			node = navRoot.childNodes[i];
				if (node.nodeName=="LI") {
					node.onmouseover=function() {
					this.className+=" over";
				}
			node.onmouseout=function() {
		this.className=this.className.replace
	(" over", "");
   }
   }
  }
 }
}
</script>
</head>
<body>
	<ul id="menu">
		<li><a href="#">Home</a></li> 
		<li class="game">Game 
			<ul> 
				<li><a href="#">História</a></li> 
				<li><a href="#">Personagens</a></li>
				<li><a href="#">Screens</a></li>
			</ul> 
		</li> 
		<li class="dicas">Dicas e Detonados
			<ul> 
				<li><a href="#">Estratégias</a></li> 
				<li><a href="#">Telas e Mapas</a></li>
				<li><a href="#">Itens Secretos</a></li>
				<li><a href="#">Inimigos (boss)</a></li>
				<li><a href="#">Outras</a></li>
			</ul>		
		</li> 
		<li><a href="#">Voltar</a></li> 
	</ul><!-- /menu --> 
</body>
</html>

Thiago Retondar => http://thiagotestes.site90.com/repentecss/quarto/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="author" content="Thiago Retondar" />
<meta name="reply-to" content="thiagoretondar1@gmail.com" />
<meta http-equiv="content-language" content="pt-br" />
<title>Repente CSS - 4º desafio</title>
<script type="text/javascript">
window.onload = function() {
if (document.all&&document.getElementById) {
        navRoot = document.getElementById("mainnav");
                for (i=0; i<navRoot.childNodes.length; i++) {
                        node = navRoot.childNodes[i];
                                if (node.nodeName=="LI") {
                                        node.onmouseover=function() {
                                        this.className+=" over";
                                }
                        node.onmouseout=function() {
                this.className=this.className.replace
        (" over", "");
   }
   }
  }
 }
}
</script>
<style type="text/css">
*{
	margin: 0;
	padding: 0;
	text-decoration: none;
}
body{
	background: #c6c6c6;
	padding: 20px;
	font-family: serif;
	font-size: 14px;
}
a:hover{
	color: #6bff9d;
}
a{
	color: #fff;
}
ul{
	list-style: none;
}
#mainnav li{
	float: left;
	margin: 0 0 0 10px;
	border: 1px solid #fff;
	background: #3272af url(bgQuarto.gif) repeat-x bottom;
	text-align: center;
	display: inline;
}
.game{
	width: 78px;
}
.dicas{
	width: 137px;
}
#mainnav li a{
	display: block;
	padding: 15px;
}
#mainnav li ul li a{
	font-size: 11px;
	padding: 0px 10px;
	height: 25px;
	line-height: 25px;
}
#mainnav li ul li{
	float: none;
	display: none;
	border: none;
	margin: 0;
	background: none;
}
#mainnav li:hover ul li,
#mainnav li.over ul li{
	display: block;
}
</style>
</head>

<body>
<ul id="mainnav">
	<li><a href="#">Home</a></li>
	<li class="game"><a href="#">Game</a>
		<ul>
			<li><a href="#">História</a></li>
			<li><a href="#">Personagens</a></li>
			<li><a href="#">Screens</a></li>
		</ul>
	</li>
	<li class="dicas"><a href="#">Dicas e Detonados</a>
		<ul>
			<li><a href="#">Estratégias</a></li>
			<li><a href="#">Telas e Mapas</a></li>
			<li><a href="#">Itens Secretos</a></li>
			<li><a href="#">Inimigos(boss)</a></li>
			<li><a href="#">Outras</a></li>
		</ul>
	</li>
	<li><a href="#">Voltar</a></li>
</ul>
</body>
</html>

Aline Branco
http://forum.imasters.com.br/index.php?/topic/354140-repente-css-menus/page__view__findpost__p__1395636

Thiago Retondar · Agosto 9, 2009

Parece que a galera achou esse quarto mais difícil. Apenas três entregaram. =/

Acho que eu fiz merd@! OHAishOAISHIASHOIASHOIAsh Eu só percebi que existiam duas imagens depois que olhei o códigos deles.

Comentem aí.

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

P.S.: Quem quiser pode entregar ainda.

Detonador PHP · Agosto 27, 2009

Olha só... vi que o William Bruno esplicou muito bem as vantagens e desvantagens sobre o terceiro menu. Mas ele poderia postar como ele faria pra mostrar mais ou menos como seria uma forma mais correta de fazer este tipo de menu, pois eu tb estou com o mesmo problema. Gostaria de fazer um menu, sem muito código, apenas usando li e a

Então William Bruno, poderia colocar por favor uma forma boa de como construir o terceiro menu?

já pra aproveitar e tirar dúvidas!

Abraço!

OBS: ótimo post hein! Gostei! Aprendi muito aqui!

William Bruno · Agosto 27, 2009

Opa! mas é lógico ^_^

vamos lá.. a minha solução pro Terceiro Menu, foi esta:

http://www.cenasordidas.hbe.com.br/desafios/terceiroMenu.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 Sprite

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

Detonador PHP · Agosto 27, 2009

Primeiro quero me desculpar pois errei. William já tinha respondido! hehehe

Segundo, gostaria de participar do menu 3 ainda! Fiz com uma marcação extra infelizmente, mas acho que saiu mais limpo no fim.

Deem uma olhada e me digam o que acham:

HTML:

<div id="menu_nivel_01">

    <ul>
        <li><a href="#"><strong>home</strong></a></li>
        <li><a href="#"><strong>estatísticas</strong></a></li>
        <li><a href="#"><strong>usuários</strong></a></li>
        <li><a href="#"><strong>configurações</strong></a></li>
    </ul>

</div>

CSS:

#menu_nivel_01{
	clear:right;
	float:right;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	font-weight:bold;
	text-transform:uppercase;
	color:#B5BDC2;
	padding-right:10px;
}

#menu_nivel_01 ul li{
	float:left;
	list-style:none;
	line-height:25px;
	padding:0px 2px;
}

#menu_nivel_01 a{
	display:block;
	color:#B5BDC2;
	text-decoration:none;
	height:25px;
	padding:0px 8px;
	cursor:pointer;
}

#menu_nivel_01 a:hover{
	color:#092E48;
	background-color:#fff;
	background-image:url(../imagens/cabecalho/menu_dir.jpg);
	background-position:right;
	background-repeat:no-repeat;
	padding:0px 0px 0px 0px;
}

#menu_nivel_01 a:hover strong{
	display:block;
	padding:0px 8px 0px 8px;
	background-image:url(../imagens/cabecalho/menu_esq.jpg);
	background-position:left;
	background-repeat:no-repeat;
	height:25px;
}

OBS: usei strong simplesmente porque pra mim era mais fácil dar um Ctrl + B e ele marcar automaticamente pra mim! Mas se fosse usar realmente outro marcador, seria o span!

William Bruno · Agosto 27, 2009

opa! bacana!

Participa sim cara.. o desafio está sempre aberto.. pode entregar qualquer menu, que já tenhamos discutido.

Poste tb as imagens que você usou... hospeda no http://www.imageshack.us/, pois ai vamos conseguir analisar direitinho como você fez.

Isso aqui:

<div id="menu_nivel_01">

    <ul>

é algo que muitas pessoas andam fazendo.

Nesse caso, é totalmente desnecessário.

bastava:

<ul id="menu_nivel_01">

Detonador PHP · Agosto 27, 2009

No caso aquela div é porque tem mais código ainda no meu html... estou fazendo direto do meu projeto!

Dai pra organizar melhor o código achei melhor colocar o menu dentro de uma div pra separar das outras divs que tenho aqui!

Só uma pergunta: Tem como tirar aquela borda que aparece quando o link fica ativo? E porque a:active não pega no FF?

Olha ai as minhas imagens:

Canto Direito

Canto Esquerdo

Sem Javascript, sem nada! hehehe

Só realmente não gostei da marcação extra! mas paciência!

Eu vi no Majour um efeito em aba, quase o qu queríamos, mas era estático, dai fica mais fácil!

Agora se mechendo assim é complicado!

Qual a nota? E quais as observações (fora a div extra logicamente! hehehe)

Detonador PHP · Agosto 27, 2009

olha ai o menu de exemplo:

Menu

Só não da bola para a localização dele, pois é onde ele esta no meu projeto!

É... realmente agrupar seria muito bom!

uahauhuahaua... é que eu ainda esto aprendendo! Hehehehe!

mas no caso do:

#menu_nivel_01 a:hover{        
   padding:0px 0px 0px 0px;
}

Eu não tinha agrupado pois eu estava testando os padding pra encaixar os cantos, no caso sei que posso usar assim:

padding:0px; ou assim padding:5px 10px;

Mas realmente, os elementos do background ainda não tenho o costume de agrupas, e tenho vício em colocar unidade de medida para valores com 0. Vou ver se melhoro isso! hehehe

No caso eu tenho como tirar a borda do item quando ele fica com o a:active? Pois depois mais adiante, pretendo usar Ajax para carregamento dos menus, então não vai haver recarregamento da página para deixar o menu já selecionado!

E não funciona a:active no Fire Fox?

William Bruno · Agosto 27, 2009

Vamos lá.. o teu ficou interessante.. o efeito é bem diferente do que eu sugeri.. até mais simples eu diria.

Existem diversas coisas desnecessárias.

Agrupar as propriedades é interessante:

background-color:#fff;
        background-image:url('http://www.sistemaremoto.com.br/imagens/menu_dir.jpg');
        background-position:right;
        background-repeat:no-repeat;

viraria:

background :url('http://www.sistemaremoto.com.br/imagens/menu_dir.jpg') #fff no-repeat right;

isso aqui:

#menu_nivel_01 a:hover{
        padding:0px 0px 0px 0px;
}

eu costumo deixar a cargo do seletor global:

* { margin: 0; padding: 0; }

mas você podia ter abreviado.. além de que se é ZERO, não é preciso declarar unidade de medida.

Ficou bom sim.

William Bruno · Agosto 27, 2009

Quinto Menu:

Os efeitos, vcs podem criar como acharem melhor, com CSS puro, tentem evitar Javascript(exceto deixar funcionando no IE6), a(s) imagem(s) vcs terão que pegar do meu print, organizem ela(s), e façam os recortes como acharem melhor..
só lembrando das regras que citei, e que a elegância da solução vai contar na avaliação.
Dica:
-> Tem 2 imagens mas se trata apenas de um único arquivo!
-> É "mais um" dropdown. O item "Dicas e Detonados" do menu, possui submenus. Atenção para a setinha embaixo dele.

Bom, é isso ai! SE VIREM! http://forum.imasters.com.br/public/style_emoticons/default/graduated.gif
Boa sorte à todos. http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

Menus Entregues: 2 (até o momento)

klonder
William Bruno

Aguardando: 2

Imao
Thelon

PS: Podem ir postando, dizendo que estão fazendo.. encontrando dificuldades? ou que estão achando muito fáceis meus desafios... ^_^ (se for o caso, aumento a dificuldade ou abaixo). E podem é claro, entregar 'menus passados'.

William Bruno · Setembro 29, 2009

Códigos Quinto Menu

klonder

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
<head>
 <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
 <title>William Bruno - Primeiro Menu - Repente CSS [Menus]</title>
<style type="text/css">
* {margin:0; padding:0; list-style: none;}
html {overflow-x: auto;} /* fixes MSIE scrollbar bug DO NOT REMOVE, has no effect in Mozilla, or Opera */

 
body{margin:2px; padding: 0px; /* required for Opera to have 0 margin */
}

#divMenu {background:url('mn5.png'); width:470px; position:relative; margin:0 auto;}

ul.Menu {width:470px; height:28px; margin:0 auto; border:0;}
 
ul.Menu li {
position:relative; float:left; 
padding:3px 6px 6px 5px; border:0; margin:0;
}

ul.Menu li a {color:#FFF; font-family:helvetica,arial,tahoma; font-size:10px; text-decoration:none; text-align:left;
padding:4px 3px 4px 3px; 
display:block;
}
 
ul.Menu li a:hover {color:#FFF; background:#9C80A8}
 
ul.Menu li span {position:absolute; z-index:1; top:5px; right:0px; width:1px; height:16px;
background:#FFF;
}

ul.Menu li ul {display:none; width:350px; position:absolute; z-index:-1;
padding:0 0 3px 0; left:12px; background:#FFF; border:0; top:28px;}
 
/* ul.Menu li:hover ul {display:block;} */

ul.Menu li ul li {position:relative; margin:0; border:0; float:left; padding:5px 6px 0 5px;
}

ul.Menu li ul li a {color:#4D224D; font-weight:bold; font-size:10px; 
background:#FFF;
}
ul.Menu li ul li a:hover {color:#FE9900; text-decoration:underline;
background:#FFF;
}

ul.Menu li ul li .seta {position:absolute; z-index:2; top:0px; left:35px; width:14px; height:6px;
background:url("seta_roxa.png");
}
ul.Menu li ul li .borda {position:absolute; z-index:1; top:8px; right:0px; width:1px; height:14px;
background:#4D224D;
}
.spanBusca {position:absolute; width: 122px; right:20px; top:5px; padding:0; 
}
.seta_alaranjada {position:absolute; left:0px; top:4px;
}
.caixa {position:absolute; font-family:helvetica,arial,tahoma; font-size:10px;
padding:2px 0 2px 5px; margin:0; border:0; left:14px;
}

.botao {position:absolute; color:#FFF; font-size:10px; font-weight:bold; font-family:helvetica,tahoma,arial; cursor:pointer;
right:0px; width:25px;
margin:0; border:0; padding:1px 3px 2px 3px;
background:#FE9900; 
}
</style>
<script type="text/javascript">
function mostrar(vl){
var objUl = document.getElementById(vl);
objUl.style.display = "block";
}
function ocultar(vl){
var objUl = document.getElementById(vl);
objUl.style.display = "none";
}
</script>
</head> 
<body> 
<div id="divMenu">
<ul class="Menu"> 
<li><a href="#">HOME</a><span></span></li> 
<li><a href="#">GAME</a><span></span></li> 
<li onmouseover="mostrar('ul2')" onmouseout="ocultar('ul2')"><a href="#">DICAS E DETONADOS</a><span></span>
 <ul id="ul2"> 
<li><a href="#">ESTRATÉGIAS</a><span class="seta"></span><span class="borda"></span></li> 
 <li><a href="#">TELAS E MAPAS</a><span class="borda"></span></li> 
 <li><a href="#">ITENS SECRETOS</a><span class="borda"></span></li> 
 <li><a href="#">OUTRAS</a></li>
 </ul> 
</li> 
<li><a href="#">VOLTAR</a></li> 
</ul> 
<span class="spanBusca"><img src="seta_alaranjada.gif" alt="" class="seta_alaranjada"/>
<input type="text" value="BUSCA" size="12" onclick="this.value=''" class="caixa"/>
<input type="button" value="OK" onclick="javascript:alert('klonder - 2009')" class="botao"/>
</span>
</div>
</body> 
</html>

William Bruno

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
<head>
 <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
 <title>William Bruno - Quinto Menu - Repente CSS [Menus]</title>
<style type="text/css">
* {
 margin: 0;
 padding: 0;
 border: none;
 list-style: none;
}
body {
 margin: 20px;
 font-family: "Trebuchet MS", Tahoma;
 font-size: 11px;
}
#menu {
 background: url('bgMenuQuinto.jpg');
 height: 35px;
 padding: 0px 5px 0 0;
 width: 463px;
}
#menu li {
 float: left;
 height: 24px;
 padding: 5px 0 5px 5px;
 position: relative;
}
#menu li ul {
 display: none;
 position: absolute;
 top: 34px;
 left: 15px;
 width: 360px;
 background: #fff; /* estranho bug do IE6 */
}
#menu li.primeiro {
 background: url('esqMenu.jpg') no-repeat top left;
 padding-left: 10px;
}
#menu li ul li {
 border-right: 1px solid #4d224d;
 height: 15px;
 padding: 0 5px;
 line-height: 15px;
}
#menu li ul li a {
 color: #4d224d;
 font-weight: bold;
 font-size: 10px;
}
#menu li.sub ul li a:hover,
#menu li.sub ul li:hover,
#menu li.sub ul li.over {
 background: none;
}

#menu li ul li a:hover {
 color: #fe9900;
 text-decoration: underline;
}
#menu li a {
 color: #fff;
 text-decoration: none;
 text-transform: uppercase;
 padding: 2px;
 height: 12px;
}
#menu li span {
 padding-right: 5px;
 border-right: 1px solid #fff;
}
#menu li a:hover {
 background: #9c80a8;
}
#menu li.sub:hover, 
#menu li.over {
 background: url('bgHover.jpg') no-repeat bottom center;
}
#menu li.sub:hover ul,
#menu li.over ul {
 display: block;
}
#menu form {
 width: 130px;
 position: absolute;
 right: -209px;
 top: 0;
 background: url('arrow.png') no-repeat left 9px;
 padding-left: 10px;
}
#menu form label.campo input {
 color: #4d224d;
 padding: 0 1px 0 6px;
 font-size: 10px;
 height: 15px;
}
#menu form fieldset {
 padding-top: 2px;
 background: url('dirMenu.jpg') no-repeat right top;
 height: 30px;
}
#menu .semBorda {
 border: none;
}
#ok {
 position: relative;
 top: 4px
}
</style>
<script type="text/javascript">
window.onload = function() {
 if (document.all&&document.getElementById){
 navRoot = document.getElementById('menu');
 for (i=0; i<navRoot.childNodes.length; i++) {
 node = navRoot.childNodes[i];
 if (node.nodeName=='LI' && node.className=='sub'){
 node.onmouseover=function() {
 this.className+=' over';
 }
 node.onmouseout=function() {
 this.className=this.className.replace(' over', '');
 }
 }
 }
 }
}
</script>
</head> 
<body> 
 <ul id="menu"> 
 <li class="primeiro"><span><a href="#">Home</a></span></li> 
 <li><span><a href="#">Game</a></span></li> 
 <li class="sub"><span><a href="#">Dicas e Detonados</a></span>
 <ul> 
 <li><a href="#">Estratégias</a></li> 
 <li><a href="#">Telas e Mapas</a></li> 
 <li><a href="#">Itens Secretos</a></li>
 <li class="semBorda"><a href="">Outras</a></li> 
 </ul> 
 </li>
 <li><a href="#" class="semBorda">Voltar</a></li> 
 <li> 
 <form action="#" method="post"> 
 <fieldset> 
 <label class="campo"><input type="text" name="busca" value="BUSCA" size="12" /></label> 
 <label><input type="image" src="ok.jpg" name="ok" id="ok" value="OK" /></label> 
 </fieldset>
 </form> 
 </li> 
 </ul><!-- /menu --> 
</body> 
</html>

Aline Branco · Setembro 30, 2009

Que pena!!! Só vi agora esse desafio. :(

Fiquei com vontade de participar.

Será q ainda estão abertos???? http://forum.imasters.com.br/public/style_emoticons/default/ermm.gif

Ou só é permitido a participação dos garotos??? rsrsrssss :P

Se ainda tiver tempo, eu entro no desafio.

Aline

Thiago Retondar · Setembro 30, 2009

Aline, pode participar sim. ^_^

Desde o primeiro, se quiser. :D

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Aline Branco · Setembro 30, 2009

Thiago Retondar,

Legal!

Eu só tinha visto até o quarto menu. Prestei tanta atenção nos menus q nem reparei q continuava na página 2. kkkkk

Já q pode participar desde o primeiro... Vou começar de onde vi, do quarto. Depois, penso nos outros.

To no trabalho, logo, posso demorar um pouquinho pra fazer e responder.

Mas já q pelo jeito sou a única mulher no desafio, os cavalheiros irão me aguardar, né?!!! kkkkkk

To nessa!

Aline Branco · Outubro 1, 2009

Vamos lá!

Meu menu. É o QUARTO MENU.

Testado em IE6, IE7, IE8, Firefox, Opera, Safari(windows) e Chrome.

Óbiviamente o único q precisa de "algo mais" é o IE6. Aff!!!! Para todos os demais, só usei HTML e CSS. http://forum.imasters.com.br/public/style_emoticons/default/grin.gif

menu_ab.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Menu - versão da Aline para o desafio.</title>
<link rel="stylesheet" href="menu_style.css" type="text/css" />
<!--[if IE 6]><link rel="stylesheet" href="menu_ie6_style.css" type="text/css" /><![endif]-->

</head>

<body>

<ul id="menu_ab">
	<li> 
    	<a href="#"> Home </a> 
    </li>
    <li id="game">
    	<a href="#"> Game  </a>
        <ul>
            <li><a href="#">História</a></li>
            <li><a href="#">Persinagens</a></li>
            <li><a href="#">Screens</a></li>
       </ul>
    </li>
    <li id="dicas"> 
    	<a href="#"> Dicas e Detonados </a> 
    	<ul>
            <li><a href="#">Estratégias</a></li>
            <li><a href="#">Telas e Mapas</a></li>
            <li><a href="#">Itens Secretos</a></li>
            <li><a href="#">Inimigos(boss)</a></li>
            <li><a href="#">Outras</a></li>
       </ul>
    </li>
    <li> 
    	<a href="#"> Voltar </a> 
    </li>
</ul>

</body>
</html>

menu_style.css

* {
	border:none;
	border:0px;
	margin:0px;
	padding:0px;
	}

body { background-color:#c6c6c6;}

a { 
	color:#fff; 
	cursor:pointer; 	
	text-decoration:none;
	font:bold 14px Georgia, "Times New Roman", Times, serif;
	padding:13px 25px;
	text-align:center;
	display:block;
	}

a:hover {color:#6bff9d;}

ul#menu_ab {margin:20px;}

li {list-style:none; display:block;}

ul#menu_ab li{ 
	overflow:hidden;
	background:#3678b5 url(bg_menup.jpg) repeat-x;
	margin:0 5px;
	float:left;
	border:#fff solid 1px;
	height:43px;
	}

ul#menu_ab li:hover {
	overflow:visible;
	height:auto;
	background:#3678b5 url(bg_menug.jpg) top repeat-x;
		}
			
ul#menu_ab li:hover ul{ 
	display:block;
	height:auto;
	position:relative;
	z-index:200;
	background:#3678b5 url(bg_menug.jpg) bottom repeat-x;
	}
	
ul#menu_ab li ul li { 
	background:none;
	border:none;
	margin:0;
	float:none;
	
	}
ul#menu_ab li ul li:hover {background:none;}

menu_ie6_style.css

body { behavior: url(csshover.htc); } /* inclui efeito :hover, :active e :focus para Internet Explorer 6 */

#game {width:140px; }
#dicas {width:185px;}

#game a {width:140px; padding:13px 0 ; text-align:center;}
#dicas a {width:185px; padding:13px 0; text-align:center; }

csshover.htc

<attach event="ondocumentready" handler="parseStylesheets" />
<script>
/**
 *	Whatever:hover - V2.02.060206 - hover, active & focus
 *	------------------------------------------------------------
 *	(c) 2005 - Peter Nederlof
 *	Peterned - http://www.xs4all.nl/~peterned/
 *	License  - http://creativecommons.org/licenses/LGPL/2.1/
 *
 *	Whatever:hover is free software; you can redistribute it and/or
 *	modify it under the terms of the GNU Lesser General Public
 *	License as published by the Free Software Foundation; either
 *	version 2.1 of the License, or (at your option) any later version.
 *
 *	Whatever:hover is distributed in the hope that it will be useful,
 *	but WITHOUT ANY WARRANTY; without even the implied warranty of
 *	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
 *	Lesser General Public License for more details.
 *
 *	Credits and thanks to:
 *	Arnoud Berendsen, Martin Reurings, Robert Hanson
 *
 *	howto: body { behavior:url("csshover.htc"); }
 *	------------------------------------------------------------
 */

var csshoverReg = /(^|\s)((([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active))|((a|input|textarea)([#.][^ ]+)?:unknown)/i,
currentSheet, doc = window.document, hoverEvents = [], activators = {
	onhover:{on:'onmouseover', off:'onmouseout'},
	onactive:{on:'onmousedown', off:'onmouseup'},
	onunknown:{on:'onfocus', off:'onblur'}
}

function parseStylesheets() {
	if(!/MSIE (5|6)/.test(navigator.userAgent)) return;
	window.attachEvent('onunload', unhookHoverEvents);
	var sheets = doc.styleSheets, l = sheets.length;
	for(var i=0; i<l; i++) 
		parseStylesheet(sheets[i]);
}
	function parseStylesheet(sheet) {
		if(sheet.imports) {
			try {
				var imports = sheet.imports, l = imports.length;
				for(var i=0; i<l; i++) parseStylesheet(sheet.imports[i]);
			} catch(securityException){}
		}

		try {
			var rules = (currentSheet = sheet).rules, l = rules.length;
			for(var j=0; j<l; j++) parseCSSRule(rules[j]);
		} catch(securityException){}
	}

	function parseCSSRule(rule) {
		var select = rule.selectorText, style = rule.style.cssText;
		if(!csshoverReg.test(select) || !style) return;
		
		var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, 'on$1');
		var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, '.$2' + pseudo);
		var className = (/\.([a-z0-9_-]*on(hover|active|unknown))/i).exec(newSelect)[1];
		var affected = select.replace(/:(hover|active|unknown).*$/, '');
		var elements = getElementsBySelect(affected);
		if(elements.length == 0) return;

		currentSheet.addRule(newSelect, style);
		for(var i=0; i<elements.length; i++)
			new HoverElement(elements[i], className, activators[pseudo]);
	}

function HoverElement(node, className, events) {
	if(!node.hovers) node.hovers = {};
	if(node.hovers[className]) return;
	node.hovers[className] = true;
	hookHoverEvent(node, events.on, function() { node.className += ' ' + className; });
	hookHoverEvent(node, events.off, function() { node.className = node.className.replace(new RegExp('\\s+'+className, 'g'),''); });
}
	function hookHoverEvent(node, type, handler) {
		node.attachEvent(type, handler);
		hoverEvents[hoverEvents.length] = { 
			node:node, type:type, handler:handler 
		};
	}

	function unhookHoverEvents() {
		for(var e,i=0; i<hoverEvents.length; i++) {
			e = hoverEvents[i]; 
			e.node.detachEvent(e.type, e.handler);
		}
	}

function getElementsBySelect(rule) {
	var parts, nodes = [doc];
	parts = rule.split(' ');
	for(var i=0; i<parts.length; i++) {
		nodes = getSelectedNodes(parts[i], nodes);
	}	return nodes;
}
	function getSelectedNodes(select, elements) {
		var result, node, nodes = [];
		var identify = (/\#([a-z0-9_-]+)/i).exec(select);
		if(identify) {
			var element = doc.getElementById(identify[1]);
			return element? [element]:nodes;
		}
		
		var classname = (/\.([a-z0-9_-]+)/i).exec(select);
		var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, '');
		var classReg = classname? new RegExp('\\b' + classname[1] + '\\b'):false;
		for(var i=0; i<elements.length; i++) {
			result = tagName? elements[i].all.tags(tagName):elements[i].all; 
			for(var j=0; j<result.length; j++) {
				node = result[j];
				if(classReg && !classReg.test(node.className)) continue;
				nodes[nodes.length] = node;
			}
		}	
		
		return nodes;
	}
</script>

:P Hoje vai ser puxado aqui no trabalho. Quem sabe no fim de semana eu pego outro menu. rsrsss

Aline Branco

William Bruno · Outubro 1, 2009

Bacana Aline!! Ficou muito bom ^_^

Legal que você não usou o comum: display: none|block, mas fez com a propriedade overflow http://forum.imasters.com.br/public/style_emoticons/default/grin.gif

O que você achou ? Eu criei os desafios, em base de menus que já tive que fazer.

Por enqnto, acha q tá muito fácil ? médio ?

Assim, eu recalculo os níveis de efeitos que vou pedir para o próximo menu.

Aline Branco · Outubro 1, 2009

William Bruno,

Certamente, esse não é um menu nada fácil de se fazer. Diria que é difícil. Achei esse fácil, mas eu sou suspeita pra falar, pois html e css é minha praia. Eu gosto. rsrss Também, não sei javascript, então sou obrigada a usar só css mesmo. kkkkk

O chato só é o IE6. Ele, muitas vezes, impede q a gente use coisas mais modernas.

Eu não quis ver com calma o jeito que os outros fizeram antes de fazer o meu. Pra não me deixar influenciar. Depois q postei é q fui olhar. Acho que a galera está encarando bem o desafio, tá arrazando! Dá pra colocar um bem ultra mega dificílimo que a galera vai conseguir encarar sim. Vai tirar onda!!!! kkkkk

Mas também não vai colocar só difíceis, né?!!! Vai misturando.

Penso q fóruns são um excelente lugar pra se aprender. Já aprendi MUITO assim. Então é importante ter de uns fáceis tb. Para que todos possam participar.

Achei EXCELENTE esse desafio.

Vou falar a linguagem masculina: "Em time q tá ganhando, não se mexe!" kkkkkk Continua que tá ótimo. http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

Aline Branco

OBS: Tenho a tendência a evitar display none em menu por causa de acessibilidade (Leitores de tela para cegos). Nunca consegui testar isso direito. Quero aprender mais sobre isso. rsrsss

Anderson Narciso · Novembro 17, 2009

Só pra pega no teu pé Bruno

#ok {

position: relative;

top: 4px

}

cade o ponto e vírgula? :D ASHUHAUSSHUSHU 4px;

Evandro Oliveira · Dezembro 22, 2009

Sim Evandro.. segue ativo sim!

Pode criar a sua versao para os menus anteriores com certeza. Fiquei um pouco sem tempo, mas ja ja posto um 'inedito' !

menu 1

Imagens - 2

http://200.159.108.196:8080/iMasters/menu_1/fear_2.jpg

http://200.159.108.196:8080/iMasters/menu_1/menu1.png

Js - Hack PNGFIX - IE6

http://200.159.108.196:8080/iMasters/menu_1/pngfix.js

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"/>
        <style type="text/css" media="all">
            * {
                margin: 0;
                padding: 0;
            }

            body{background:url('fear_2.jpg') no-repeat}

            .menu {
                list-style-type: none;
                padding: 50px;
            }

            .menu li {
                background: url('menu1.png');
                display: block;
                width: 100px;
                height: 25px;
                margin-bottom: 2px;
                padding: 10px;
            }

            .menu a {
                position: relative;
                display: block;
                width: 96px;
                height: 18px;
                background: white;
                color: black;
                text-decoration: none;
                padding: 2px;
            }

            .menu a span {
                background: white;
                position: absolute;
                display: block;
                top: -10px;
                left: -10px;
                width: 10px;
                height: 10px;
                overflow: hidden;
            }

            .menu a:hover, .menu a:hover span {
                background: #EEB92E;
                color: #652809;
                text-decoration: underline;
                cursor: pointer; /* necessário no IE */
            }
        </style>
        <!--[if lt IE 7]>
            <script type="text/javascript" src="pngfix.js"></script>
        <![endif]-->
        <title>Desafio iMasters - Repente CSS - Menu 1</title>
    </head>
    <body>
        <ul class="menu">
            <li><a href="#"><span></span>Home</a></li>
            <li><a href="#"><span></span>Game</a></li>
            <li><a href="#"><span></span>Dicas</a></li>
            <li><a href="#"><span></span>Voltar</a></li>
        </ul>
    </body>
</html>

http://200.159.108.196:8080/iMasters/menu_1/

Menu 2

Imagens - 0

JS - Nada

Hacks - Nenhum

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"/>
        <title>Desafio iMasters - Repente CSS - Menu 2</title>
        <style type="text/css" media="all">
            * {
                margin: 0;
                padding: 0;
            }

            body{margin:20px 0 0 10px}
            .menu{list-style-type:none}
            .menu li{float:left}

            .menu a {
                display: block;
                position: relative;
                width: 100px;
                height: 20px;
                background: yellow;
                color: red;
                text-align: center;
                margin: 0 10px 0 10px;
                padding: 10px 0 10px 0;
            }

            .menu a span {
                position: absolute;
                background: red;
                height: 0;
                width: 0;
                top: -5px;
                left: 5px;
                z-index: -1;
            }

            .menu a:hover {
                width: 110px;
                margin: 0 5px 0 5px;
                background: red;
                color: yellow;
                text-decoration: none;
                cursor: pointer; /* necessário no IE */
            }

            .menu a:hover span {
                width: 100px;
                height: 50px;
            }
        </style>
  </head>
  <body>
      <ul class="menu">
            <li><a href="#"><span></span>Home</a></li>
            <li><a href="#"><span></span>Game</a></li>
            <li><a href="#"><span></span>Dicas</a></li>
            <li><a href="#"><span></span>Voltar</a></li>
        </ul>
  </body>
</html>

http://200.159.108.196:8080/iMasters/menu_2/

Menu 3

Imagens - 2

http://200.159.108.196:8080/iMasters/menu_3/borda.jpg

http://200.159.108.196:8080/iMasters/menu_3/fundo.jpg

JS - Nada

Hacks - 1 linha, inclusa no arquivo .css

Index.html

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"/>
        <title>Desafio iMasters - Repente CSS - Menu 3</title>
        <link rel="stylesheet" type="text/css" media="all" href="default.css" />
  </head>
  <body>
      <ul class="menu">
            <li><a href="index.html" id="ativo"><span class="esq"></span><span class="link">Home</span></a></li>
            <li><a href="game.html"><span class="esq"></span><span class="link">Game</span></a></li>
            <li><a href="#"><span class="esq"></span><span class="link">Detonados</span></a></li>
            <li><a href="#"><span class="esq"></span><span class="link">Voltar</span></a></li>
        </ul>
  </body>
</html>

Game.html

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"/>
        <title>Desafio iMasters - Repente CSS - Menu 3</title>
        <link rel="stylesheet" type="text/css" media="all" href="default.css" />
  </head>
  <body>
      <ul class="menu">
            <li><a href="index.html"><span class="esq"></span><span class="link">Home</span></a></li>
            <li><a href="game.html" id="ativo"><span class="esq"></span><span class="link">Game</span></a></li>
            <li><a href="#"><span class="esq"></span><span class="link">Detonados</span></a></li>
            <li><a href="#"><span class="esq"></span><span class="link">Voltar</span></a></li>
        </ul>
  </body>
</html>

default.css

* {
    margin: 0;
    padding: 0;
}

body {
    margin: 20px;
    background: black;
    font-weight: bold;
}

.menu {
    list-style-type: none;
    margin-left: 15px;
}

.menu li {
    float: left;
    margin-right: 7px;
}

.menu a {
    color: white;
    text-decoration: none;
    background: url('borda.jpg') bottom right;
    position: relative;
    display: block;
    height: 27px;
}

.menu .esq {
    position: absolute;
    display: block;
    height: 27px;
    width: 3px;
    background: url('borda.jpg') bottom left;
    top: 0px;
}

.menu .link {
    background: url('fundo.jpg') bottom repeat-x;
    padding: 4px 25px 4px 25px;
    margin: 3px;
    position: relative;
    top: 4px;
}

.menu a:hover {
    background-position: top right;
    color: black;
    text-decoration: underline;
}

.menu a:hover .esq{background-position:top left}
.menu a:hover .link{background-position:top}
#ativo{background-position:center right}
#ativo .esq{background-position:center left}
#ativo .link{background-position:center}
#ativo:hover{color:yellow}
* html .menu a{width:20px}

http://200.159.108.196:8080/iMasters/menu_3/

http://200.159.108.196:8080/iMasters/menu_3/game.html

Observações:

a 2ª foi extremamente fácil. Até ser testada no IE6 ...

a 3ª mantive as marcações com span por pura birra...

primeiro você vem e fala que o IE não aplica :hover no LI, dps linka um js que faz a função hehehehehehe...

bom.. temos 2 cenários... 1, sem o IE6, eu poderia utilizar 'rounded-corners' do css3, ou pra poder exibir corretamente no opera/ie7/ie8 eu poderia utilizar :before e :after.. ficaria ULTRA limpo o CSS

com o IE6 foi necessária a aplicação do js para li:hover... mas levanto uma questão que já foi tocada anteriormente... "e caso o browser esteja com JS desabilitado?"

fazendo os testes, o menu fica ilegível... nada contra utilizar, mas tomando os devidos cuidados ^^

último tocante quanto ao 3º menu... caso haja uma opção de menu CLIQUEAQUIPARACONHECERMINHAEMPRESA, desfiguraria sua imagem, que tem um tamanho limite para plano de fundo...

nem vou comentar o CSS Sprite... uso desde a época em que a maior preocupação era a internet discada... impossível ficar aguardando requisições apenas pra deixar o menu "bonitinho"

chato de chegar dps, é que boa parte do código bate com o que já tem aqui... mas td bem.. ainda pegarei um menu do começo pra mostrar minhas idéias =)

quanto à marcação da página ativa, deixo pra ser feita em Server-Side... dá trabalho, dá... mas deixemos pro servidor fazer o trabalho sujo, e o usuário que baixe arquivos sucintos, resumidos e não consuma banda a toa \o/

parabéns pela iniciativa.

Arquivado

Repente CSS - [Menus]

Recommended Posts

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

Detonador PHP 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Detonador PHP 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Detonador PHP 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Detonador PHP 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Aline Branco 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

Aline Branco 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Aline Branco 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Aline Branco 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Anderson Narciso 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

Evandro Oliveira 331