Repente CSS - [Menus]

William Bruno · Dezembro 28, 2009

Sexto Menu:

Detalhes:

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 3 imagens mas se trata apenas de um único arquivo!
-> É "mais um" dropdown. O item "Dicas e Detonados", e o "Game" do menu, possuem submenus.
-> Não usem CSS3 !! (esse menu é uma réplica do menu do iMasters, e lá usando CSS3, então para justificar o desafio, façam os efeitos dele com imagens!

O desafio mora em justamente apartir dessas imagens que coloco, chegar no código CSS e xHTML que faça o menu funcionar com os efeitos em vários browsers.
CSS3 não funciona no IE6. E 'como sempre', vamos dar suporte à ele.

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: 0 (até o momento)

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). E podem é claro, entregar 'menus passados'.

Evandro Oliveira · Janeiro 6, 2010

Opa... voltando das "férias".

Vou entregar os menus em ordem... portanto entregarei o 4º, 5º e só então o sexto.

mesmo já tendo mais noção de como farei o último do que o quinto hehehe...

até daqui a pouco

William Bruno · Janeiro 14, 2010

Códigos Sexto Menu

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>
	<title>William Bruno - Sexto Menu</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
	list-style: none;
}
body {
	background: url('bg-body.jpg') repeat-x;
	width: 980px;
	margin: 231px auto 0 auto;
}
#menu {
	background: #fff;
	height: 20px;
	line-height: 20px;
	border-bottom: 1px solid #cfcfcb;
	padding: 5px;
}
#menu li {
	float: left;
	position: relative;
	height: 20px;
	overflow: hidden;
}
#menu li ul {
	position: absolute;
	top: 20px;
	left: 0px;
	background: #fff;
	padding: 0 2px;
	border: 1px solid #cfcfcb;
}
/* bug IE6 com elementos de width 100% */
* html #menu li ul {
	width: 129px;
}
#menu li a {
	color: #333;
	padding: 0 10px;
	text-decoration: none;
}
#menu li:hover,
#menu li.over {
	background: url('bg-menu-li.jpg') no-repeat left top;
	overflow: visible;
}
#menu li:hover a,
#menu li.over a {
	background: url('bg-menu-li-a.jpg') no-repeat right top;
	color: #fff;
	height: 20px;
}
#menu li ul li {
	height: 22px;
	margin: 2px 0;
	border-bottom: 1px solid #f4f4f4;
}
#menu li:hover ul li a,
#menu li:hover ul li,
#menu li.over ul li a,
#menu li.over ul li {
	background: none;
	color: #333;
}
#menu li ul li:hover,
#menu li ul li.over {
	background: url('bg-menu-ul-li.jpg') no-repeat;
}
#menu li ul li:hover a,
#menu li ul li.over a {
	background: url('bg-menu-ul-li-a.jpg') no-repeat right top;
	text-decoration: underline;
	height: 22px;
}
#menu li ul li a {
	display: block;
}
#menu li ul li {
	display: block;
	width: 100%;
}
</style>
<script type="text/javascript">
window.onload = function() {
	if (document.all&&document.getElementById){
		navRoot = document.getElementById('menu');
		for (var i=0; i<navRoot.childNodes.length; i++) {
			node = navRoot.childNodes[i];
			if (node.nodeName=='LI')
				hoverIE( node );
		}
		var sub = navRoot.getElementsByTagName('ul');
		
		for( var i=0;i<sub.length;i++ )
		{
			for( var j=0;j<sub[i].childNodes.length;j++ )
			{
				var node = sub[i].childNodes[j];
				hoverIE( node );
			}
		}
	}
}
function hoverIE( node )
{
	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><a href="#">Game</a>
			<ul>
				<li><a href="#">Inimigos</a></li>		
				<li><a href="#">Truques</a></li>
			</ul>		
		</li>
		<li><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="#">Outras</a></li>
			</ul>		
		</li>
		<li><a href="#">Voltar</a></li>	
	</ul><!-- /menu -->
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet tristique justo. 
	Aenean sit amet erat turpis, vel scelerisque mauris. Proin aliquet hendrerit augue, ut commodo 
	velit fringilla nec. Vivamus feugiat bibendum sem, tincidunt accumsan ligula pretium id. Pellentesque 
	habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin eget mauris
	magna, vel ullamcorper arcu. Sed et lectus dui. Cras est metus, sodales id lacinia eget, bibendum 
	ut neque. Aenean dapibus pharetra purus vel fringilla. Nulla aliquet, urna eget faucibus malesuada,
	ante risus sollicitudin ipsum, quis lobortis velit tortor non nisi. Mauris vitae lectus ut lacus
	semper tincidunt eu ut mauris. In id urna eget orci tincidunt imperdiet non et mauris. Vestibulum
	accumsan, nulla ac vestibulum pretium, lorem sapien adipiscing arcu, non malesuada libero enim 
	eget nisi. Vivamus placerat felis vitae tortor pellentesque ut mattis nisi sollicitudin. 
	Pellentesque eget hendrerit ligula. Sed viverra mi et turpis cursus varius. Donec venenatis
	sagittis enim eget mattis. Donec in urna sapien, vel commodo eros. Nullam ac sem ante, 
	ac pretium sem. Cras scelerisque venenatis ipsum.</p>
	
</body>
</html>

Pablo RD · Janeiro 15, 2010

Caramba William, pensei que o código seria mais complicado... Mas ainda bem que eu tou conseguindo entender já... ^^

ps: Só a parte de JS que não entendo ainda...

Evandro Oliveira · Janeiro 18, 2010

Terminei até o quinto e revisei todos os menus feitos anteriormente. O endereço dos exemplos também foi alterado (por causa do cache do meu proxy interno)

quem não tiver a fim de abrir os spoilers, pode consultar diretamente por aqui.

vamos lá

1. O número de imagens utilizadas

2. Quão crossbrowser é o efeito que você criou

3. Ausência de hacks, comentários condicionais(esses contam pontos negativos, caso usados)

4. A elegância da solução*

5. Código válido pela w3c

6. Quão próximo do efeito final você chegou

O item 2. se aplica a todos os menus:

Os testes foram feitos no Chrome, Firefox3.6, Opera, IE8, IE7 e IE6 todos com sucesso

O item 4. fica a cargo do desafiante

O item 5. se aplica a todos os menus:

Marcação XHTML1.1 - 100% válida, sem erros ou avisos

Estilos CSS2.1 - 100% válida, sem erros ou avisos

----

primeiro:

1. 2 imagens - background do menu e background dos itens do menu

3. DD_belatedPNG versão 0.0.8a - Transparência PNG para IE6 - http://www.dillerdesign.com/experiment/DD_belatedPNG/

6. 100% igual à proposta

html

<!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" />
<title>Repente CSS - Primeiro menu</title>
<link rel="stylesheet" type="text/css" media="all" href="default.css" />
<script type="text/javascript" src="DD_belatedPNG_0.0.8a-min.js"></script>
</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>

css

@charset "utf-8";
* {
    margin: 0;
    padding: 0;
}

.menu {
    background: black url(bg.jpg);
    height: 200px;
    width: 300px;
    padding: 50px;
}

.menu li {
    background: url(bg.png);
    display: block;
    height: 25px;
    list-style: none;
    margin-bottom: 5px;
    padding: 10px;
    width: 100px;
}

.menu a {
    background: white;
    color: black;
    display: block;
    height: 22px;
    line-height: 22px;
    position: relative;
    text-decoration: none;
    text-indent: 5px;
    width: 100px;
}

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

.menu a:hover, .menu a:hover span {
    background: #EFBA2F;
    color: #652809;
    cursor: pointer;
    text-decoration: underline;
}

segundo:

1. Nenhuma imagem

3. Nenhum hack

6. 100% igual à proposta

html

<!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" />
<title>Repente CSS - Segundo menu</title>
<link rel="stylesheet" type="text/css" media="all" href="default.css" />
</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>

css

@charset "utf-8";
* {
    margin: 0;
    padding: 0;
}

.menu {
    margin: 20px 10px;
}

.menu li {
    float: left;
    list-style: none;
}

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

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

.menu a:hover {
    background: red;
    color: yellow;
    cursor: pointer;
    margin: 0 5px;
    text-decoration: none;
    width: 110px;
}

.menu a:hover span {
    width: 100px;
}

terceiro:

1. 3 imagens utilizando CSS_Sprite - borda esquerda, borda direita e meio

3. Whatever:hover versão 3.11 - Pseudo-classes :hover e :focus para IE6 - http://www.xs4all.nl/~peterned/

6. 98% - Pequena diferença no margeamento direito

html

<!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" />
<title>Repente CSS - Terceiro menu</title>
<link rel="stylesheet" type="text/css" media="all" href="default.css" />
<!--[if IE 6]><style type="text/css" media="all">body { behavior: url(../csshover3.htc); }</style><![endif]-->
</head>

<body>
    <ul class="menu">
        <li id="ativo"><a href="./">Home<span></span></a></li>
        <li><a href="game.html">Game<span></span></a></li>
        <li><a href="#">Detonados<span></span></a></li>
        <li><a href="../">Voltar<span></span></a></li>
    </ul>
</body>
</html>

css

@charset "utf-8";
* {
    margin: 0;
    padding: 0;
}

body {
    background: black;
    margin: 20px;
}

.menu li {
    background: url(meio.jpg) top repeat-x;
    float: left;
    list-style: none;
    margin-left: 5px;
    position: relative;
}

.menu li a {
    background: url(bordad.jpg) top right no-repeat;
    color: white;
    display: block;
    font-weight: bold;
    line-height: 28px;
    padding: 0 25px;
    text-decoration: none;
}

.menu li span {
    background: url(bordae.jpg) top left no-repeat;
    display: block;
    height: 28px;
    left: 0;
    position: absolute;
    top: 0;
    width: 4px;
}

.menu li:hover {
    background-position: bottom;
}

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

.menu li:hover span {
    background-position: bottom left;
}

#ativo {
    background-position: center;
}

#ativo a {
    background-position: center right;
}

#ativo span {
    background-position: center left;
}

#ativo a:hover {
    color: yellow;
}

quarto:

1. 2 imagens - menu default e menu over

3. Whatever:hover (já mencionado no terceiro menu)

6. 99% - Não é possível comparar o submenu "Game"

html

<!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" />
<title>Repente CSS - Quarto menu</title>
<link rel="stylesheet" type="text/css" media="all" href="default.css" />
<!--[if IE 6]><style type="text/css" media="all">body { behavior: url(../csshover3.htc); }</style><![endif]-->
</head>

<body>
    <ul class="menu">
        <li><a href="./">Home</a></li>
        <li><p>Game</p>
            <ul>
                <li><a href="#">História</a></li>
                <li><a href="#">Personagens</a></li>
                <li><a href="#">Screens</a></li>
            </ul>
        </li>
        <li><p>Dicas e Detonados</p>
            <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 (bosses)</a></li>
                <li><a href="#">Outras</a></li>
            </ul>
        </li>
        <li><a href="../">Voltar</a></li>
    </ul>
</body>
</html>

css

@charset "utf-8";
* {
    margin: 0;
    padding: 0;
}

body {
    background: #c5c5c5;
}

.menu {
    margin: 20px;
}

.menu li {
    background: url(bg.jpg) repeat-x;
    border: 1px solid white;
    float: left;
    height: 43px;
    list-style: none;
    margin-left: 10px;
    overflow: hidden;
    text-align: center;
}

.menu li a, .menu li p {
    color: white;
    display: block;
    line-height: 43px;
    padding: 0 10px;
    text-decoration: none;
}

.menu ul {
    padding-bottom: 10px;
    width: auto;
}

.menu ul li {
    background: none;
    border: none;
    float: none;
    font-size: 11px;
    height: auto;
    margin: 10px 0;
    overflow: visible;
}

.menu ul li a {
    display: inline;
    line-height: normal;
    padding: 0 15px;
}

/* Início dos estados :hover */

.menu li:hover {
    background: #3577b4 url(bgover.jpg) bottom repeat-x;
    height: auto;
}

.menu a:hover {
    background: #2d6aa3;
    color: #6aff9c;
}

.menu ul a:hover, .menu ul li:hover {
    background: none;
}

quinto:

1. 5 imagens:

1.1 - bordas do menu em CSS_Sprite

1.2 - Fundo do menu

1.3 - Botão OK

1.4 - Flecha à esquerda do formulário de busca

1.5 - Flecha para baixo do submenu

3. Whatever:hover (Já mencionado no terceiro menu)

6. 95%

6.1 - O menu é 1px mais largo que o proposto

6.2 - Os submenus não seguem o espaçamento proposto

html

<!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" />
<title>Repente CSS - Quinto menu</title>
<link rel="stylesheet" type="text/css" media="all" href="default.css" />
<!--[if IE 6]><style type="text/css" media="all">body { behavior: url(../csshover3.htc); }</style><![endif]-->
</head>

<body>
    <ul class="menu">
        <li class="first"><a href="./">Home</a></li>
        <li><a href="#">Game</a></li>
        <li><p>Dicas e detonados</p>
            <ul class="submenu">
                <li class="first"><a href="#">Estratégias</a></li>
                <li><a href="#">Telas e mapas</a></li>
                <li><a href="#">Itens secretos</a></li>
                <li><a href="#">Outras</a></li>
            </ul>
        </li>
        <li><a href="../">Voltar</a></li>
           <li class="last"><form action="" method="get" target="_self">
                <fieldset>
                    <label><input type="text" name="q" value="Busca" class="q" /></label>
                    <label><input type="image" src="ok.jpg" class="ok" /></label>
                </fieldset>
            </form>
        </li>
    </ul>
</body>
</html>

css

* {
    margin: 0;
    padding: 0;
}

.menu {
    background: url(meio.jpg) repeat-x;
    height: 50px;
    margin: 20px;
    padding-top: 5px;
    width: 470px;
}

.menu li {
    border-left: 1px solid white;
    float: left;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 11px;
    height: 16px;
    list-style: none;
    padding: 0 5px;
    text-transform: uppercase;
}

.menu li.first, .menu li.last {
    background: url(bordas.jpg) no-repeat;
    border: none;
    height: 28px;
    position: relative;
    top: -5px;
}

.menu li.first {
    background-position: top left;
    line-height: 26px;
    padding-left: 10px;
}

.menu li.last {
    background-position: bottom right;
    float: right;
}

.menu a, .menu p {
    color: white;
    padding: 2px;
    position: relative;
    text-decoration: none;
}

.menu p {
    padding: 0 2px;
}

.menu form {
    background: url(busca.jpg) top left no-repeat;
    padding-left: 10px;
    width: 130px;
}

.menu fieldset {
    border: none;
    padding-top: 2px;
}

.menu input.q {
    border: 1px solid white;
    color: #4d224d;
    font-size: 11px;
    height: 13px;
    padding-left: 5px;
    text-transform: uppercase;
    width: 73px;
}

.menu input.ok {
    height: 15px;
    position: relative;
    top: 4px;
    width: 20px;
}

.submenu {
    overflow: hidden;
    padding: 14px 0 0 4px;
    position: absolute;
    width: 0;
}

.submenu li {
    font-size: 10px;
    font-weight: bold;
    padding: 0;
}

.submenu li.first {
    background: url(submenu.jpg) top center no-repeat;
    padding-top: 2px;
    position: relative;
    top: -7px;
}

.submenu a {
    border-left: 1px solid #4d224d;
    color: #4d224d;
    height: 15px;
    padding: 0 7px;
}

.submenu li.first a {
    border: none;
}

/* :hover */

.menu li:hover .submenu {
    width: auto;
}

.menu a:hover {
    background: #9c80a8;
}

.submenu a:hover {
    background: none;
    color: orange;
    text-decoration: underline;
}

William Bruno · Janeiro 18, 2010

Ficaram todos muito bons @Evandro Oliveira !

Parabéns! :lol:

Eu não entendi a sua escolha por usar class nos menus, ao invés de id. Menus geralmente são únicos, ainda mais esses com esses efeitos.. ID cai como uma luva nesse caso.

Até agora só eu postei menus desafiadores( você achou fácil demais? )

Diz ai oque achou do Repente até agora. Se quiser sugerir algo, já vou pensando em algo pro Sétimo!

Evandro Oliveira · Janeiro 19, 2010

Eu não entendi a sua escolha por usar class nos menus, ao invés de id. Menus geralmente são únicos, ainda mais esses com esses efeitos.. ID cai como uma luva nesse caso.

Estilos aplicados às #id's se sobrepõem aos aplicados às .classe's.

então eu começo modificando as classes e, caso eu precise de alguma alteração arbitrária, eu aplico um ID para que este elemento, independentemente da CSS que tenha recebido, se modifique da maneira que eu quero.

Seria algo como deixar a ID como uma salvaguarda caso eu precise fazer modificações de emergência.

Existe outro motivo também:

Eu vim da programação para a diagramação... e não o contrário como seria considerado o 'certo'. Então ID pra mim é mais um seletor de JavaScript do que um modificador de estilo. Sem contar também que é apenas uma questão de costume, não altera em nada no resultado final hehehehehe.

Uma curiosidade que pouca gente percebe: Você ganha alguns milisegundos (talvez segundos depenendo de quem digita) se utilizar um PONTO do que utilizar SUSTENIDO para criar a folha de estilos. Imagine que você é diagramador, só trabalha nas CSS's dos clientes e estiliza cerca de 2000 elementos por dia. Se colocarmos uma diferença de 4ms (tempo padrão do reflexo humano) são 8 segundos por dia ;). Como dizem aqui mesmo no fórum Tempo é dinheiro kkkkk

Até agora só eu postei menus desafiadores( você achou fácil demais? )

Diz ai oque achou do Repente até agora. Se quiser sugerir algo, já vou pensando em algo pro Sétimo!

Acredito que mais desafiador seja criar coragem pra abrir a página que funciona perfeitamente no Opera para testes no IE6.

E o mais interessante é que, aplicando pouquíssimos ou até NENHUM hack, depois das correções você consegue um resultado idêntico e passa a refletir que nem toda a culpa é do IE6, às vezes os diagramadores que estilizam com 'preguiça' e não tomam certos cuidados.

De todos os menus propostos, o único hack (além do png) por mim utilizado foi o Whatever:hover, por comodidade. Mantém a CSS limpa. Mas seria facilmente contornado com um 'onmouseover/onmouseout' como você utiliza nas suas soluções. Isso prova que, por mais problemático que seja, o IE6 ainda é um navegador tragável. Só precisamos deixar a preguiça de lado e trabalhar com um pouco mais de capricho.

Quanto à dificuldade...

menus 1, 2 e 3 são facilmente compostos em, no máximo, 2 horas. Apenas o menu2 que eu tomei um susto quando fui abrir no IE kkkk. Estava utilizando display, e o mesmo não voltava para a posição 'default'. Solução, foquei a largura do elemento como 'efeito' ao invés do display

os menus 4 e 5 estavam de matar, até eu "descobrir a roda": Não é nenhum crime utilizar <p> dentro de <li> !!!!

depois disso o menu 4 fluiu até o fim, e o quinto apresentou um pequeno bug no IE7. bug resolvido, menus resolvidos

Eu gostei da qualidade dos efeitos que podem ser conseguidos aplicando estilos simples.

E sugestão pra proposta... Gostaria de ver um menu com mais de um nível de submenu (ao estilo iniciar do windows).

Existe um outro ponto também que gerou uma certa dificuldade:

Como já mencionei, venho da programação para a diagramação, por isso ao criar menus, tento fazê-los o mais flexíveis possível. Olhando as CSS's, verá que não declarei nenhuma height/width absoluta, o que faz com que, se o menu for gerado dinamicamente, ele seja renderizado corretamente independentemente do número de opções ou subopções que o menu apresente

Evandro Oliveira · Janeiro 28, 2010

Desisto! kkkkkkkkk

A demora na entrega foi porque eu quis deixar perfeito, mas fazem uns 3 dias que estou apanhando e nada :(

requisitos

1. O número de imagens utilizadas

5 Imagens:

1.1 - cinza.jpg - degradê cinza do menu pai

1.2 - borda_cinza.jpg - bordas laterais do menu em css_sprite

1.3 - azul.jpg - degradê azul do menu filho

1.4 - borda_azul.jpg - bordas laterais do menu filho em css_sprite

1.5 - bg.jpg - plano de fundo do BODY

2. Quão crossbrowser é o efeito que você criou

Testado em :

2.1 - Opera

2.2 - Firefox

2.3 - Chrome

2.4 - Safari

2.5 - IE 8

2.6 - IE 7

2.5 - IE 6

ALL 100% com leves diferenças entre eles

3. Ausência de hacks, comentários condicionais(esses contam pontos negativos, caso usados)

- Sem hacks

- Um comentário condicional inclui:

--- Whatever:hover - Já mencionado no menu 3

--- changecss.js - Altera dinamicamente as propriedades de uma classe/elemento em CSS - disponível em http://www.shawnolson.net/a/503/altering-css-class-attributes-with-javascript.html - Seu uso será comentado no spoiler do Javascript

--- Correção de bug para IE6/7 onde, se definida uma altura em um elemento de bloco herdado, sua largura passa a ser 100% da tela, e não do elemento pai. Declarada uma largura absoluta

--- Correção para a correção anterior, white-space: nowrap impede que o texto quebre a linha dentro de elementos de largura menor que a necessária (Juntas, as duas correções acima 'copiam' as características Standard dos elementos de bloco herdados

4. A elegância da solução* - A cargo do desafiante

5. Código válido pela w3c

- HTML e CSS 100% válidos sem erros nem avisos.

6. Quão próximo do efeito final você chegou

- Opera - 100%

- FF, Chrome, Safari, IE8 - 99% [Quando o submenu tem largura menor que o menu, as bordas ficam 2px mais largas que o menu pai]

- IE 7 - 80% - Não herda as larguras corretamente

- IE 6 - 75% - Não herda as larguras corretamente, aplica a margem-esquerda do menu incorretamente

html

<!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" />
		<title>Repente CSS - Sexto menu</title>
		<link rel="stylesheet" type="text/css" media="all" href="default.css" />
		<!--[if lte IE 7]>
			<style type="text/css" media="all">
				body { behavior: url(../csshover3.htc); }
				.menu ul a { white-space: nowrap; width: 1px; }
			</style>
			<script type="text/javascript" src="changecss.js"></script>
			<script type="text/javascript" src="actions.js"></script>
		<![endif]-->
	</head>

	<body>
		<ul class="menu">
			<li><a href="./">Home</a></li>
			<li><span>Game</span>
				<ul>
					<li><a href="#">Inimigos</a></li>
					<li><a href="#">Truques</a></li>
				</ul>
			</li>
			<li><span>Dicas e Detonados</span>
				<ul>
					<li><p><a href="#">Estratégias</a></p></li>
					<li><a href="#">Telas e Mapas</a></li>
					<li><a href="#">Itens secretos</a></li>
					<li><a href="#">Outros</a></li>
				</ul>
			</li>
			<li><a href="../">Voltar</a></li>
		</ul>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pharetra diam nec nunc dapibus quis porta nisl vehicula. Integer eget nunc eros. Nunc eget eros et lectus bibendum convallis sed quis nunc. Suspendisse tellus justo, porttitor eu fringilla id, condimentum vel orci. Aliquam eu placerat metus. Sed a dolor neque, nec hendrerit quam. Pellentesque at velit sit amet odio suscipit porta. Morbi non urna augue, sit amet venenatis sapien. Nam pharetra lacus vel lectus pellentesque dapibus. Cras libero est, tristique at suscipit condimentum, commodo ut purus. Nam fringilla scelerisque lacus at interdum. Donec mauris erat, pellentesque eget rutrum a, aliquam et risus.</p>
	</body>
</html>

css

@charset "utf-8";
* {
	margin: 0;
	padding: 0;
}

body {
	background: url(bg.jpg) top left repeat-x;
	margin: 235px 0 0 230px;
}

p {
	clear: both;
}

.menu {
	background: url(cinza.jpg) top repeat-x;
	float: left;
	margin: 0 0 5px 10px;
}

.menu li {
	background: #fff;
	float: left;
	list-style: none;
	position: relative;
}

.menu a, .menu span {
	color: #333;
	display: block;
	line-height: 20px;
	padding: 0 10px;
	text-decoration: none;
}

.menu ul {
	background: url(azul.jpg);
	border: 1px solid #cecece;
	display: none;
	min-width: 100%;
	position: absolute;
}

.menu ul li {
	float: none;
	margin: 2px 0 4px 0;
}

.menu ul a {
	height: 22px;
	line-height: 22px;
	padding: 0 12px;
}

.menu li:hover {
	background: url(borda_cinza.jpg) top left no-repeat;
}

.menu li:hover a, .menu li:hover span {
	background: url(borda_cinza.jpg) bottom right no-repeat;
	color: #fff;
}

.menu li:hover ul {
	display: block;
}

.menu li:hover li {
	background: #fff;
}

.menu li:hover ul a {
	background: none;
	color: #333;
}

.menu ul li:hover {
	background: url(borda_azul.jpg) top left no-repeat;
}

.menu ul li:hover a {
	background: url(borda_azul.jpg) bottom right no-repeat;
	text-decoration: underline;
}

js

window.onload = function(){
	changecss('.menu ul','display','block');
	var span = document.getElementsByTagName('span');
	for(i = 0; i < span.length; i++) {
		largura = span.item(i).offsetWidth;
		links = span.item(i).parentNode.getElementsByTagName('a');
		for(j = 0; j < links.length; j++) if(largura < (links.item(j).offsetWidth))
			largura = links.item(j).offsetWidth;
		for(j = 0; j < links.length; j++) links.item(j).style.width = largura + 'px';
	};
	changecss('.menu ul','display','none');
};

Explicação:

-changess para tornar todos os submenus visíveis (para cálculo de largura)

-procuro por todas as tag's SPAN

-para cada tag SPAN encontrada, faço o seguinte [

--guardo a largura da tag (com o padding) em uma variável de nome largura

--procuro dentro do elemento que contem a SPAN (pai), por elementos que contenham links (tags A) [ procura por siblings e nephews ]

--para cada link encontrado, verifico se tal possui largura maior que a largura do span. Quando verdadeiro, a largura passa a armazenar tal valor

--aplico a maior largura encontrada a todos os links

-oculto novamente os menus

PS.: O Javascript é meramente cosmético e descartável

William Bruno · Maio 15, 2010

Sétimo Menu:

Os efeitos, vcs podem criar como acharem melhor, com CSS puro, tentem evitar Javascript, 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:
-> O único efeito é a troca da seta e do background durante o hover

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)

João Batista Neto
João Prado

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)

João Batista Neto · Maio 15, 2010

Bom, para um inimigo declarado do CSS, acho que não ficou tão ruim http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Sétimo Menu

João Prado · Maio 15, 2010

Bom, não sou expert em CSS mas resolvi fazer este menu para ver como me saia

Me preocupei em conseguir fazer, e consegui

Testei apenas nos navegadores: IE8, Chrome 4.1 e Firefox 3.6

Nestes esta funcinando perfeitamente

CSS validado

Donwload

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

Talvez depois eu faça algo para todos os browser mas por enquanto deixa assim :P

William Bruno · Maio 29, 2010

Como preciso que os códigos fiquem no fórum, estou repostando a solução de vocês.

João Batista Neto

<!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" xml:lang="pt-BR"> 
	<head> 
		<title>Repente CSS</title> 
		<link rel="stylesheet" href="public/css/setimo.css" type="text/css" /> 
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
	</head> 
	<body> 
		<div class="menu"> 
			<strong>Menu <img src="public/images/h3.png" alt="h3" title="h3" /></strong> 
			<ul class="menuitems"> 
				<li id="mi1"><a href="#home">Home</a></li> 
				<li id="mi2"><a href="#game">Game</a></li> 
				<li id="mi3"><a href="#detonados">Detonados</a></li> 
				<li id="mi4"><a href="#estrategias">Estratégias</a></li> 
				<li id="mi5"><a href="#telas">Telas</a></li> 
				<li id="mi6"><a href="#secretos">Itens Secretos</a></li> 
				<li id="mi7"><a href="#inimigos">Inimigos</a></li> 
				<li id="mi8"><a href="#voltar">Voltar</a></li> 
			</ul> 
		</div> 
		<p id="w3c"> 
			<a href="http://validator.w3.org/check?uri=referer"> 
				<img src="http://www.w3.org/Icons/valid-xhtml11" alt="Valid XHTML 1.1" height="31" width="88" /> 
			</a> 
			<a href="http://jigsaw.w3.org/css-validator/check/referer"> 
				<img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="CSS válido!" /> 
			</a> 
		</p> 
		<script src="http://imasters.com.br/crossbrowser/fonte.js" type="text/javascript"></script> 
	</body> 
</html>

setimo.css

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

body {
	background			: #FFFFFF;
	font-family			: Helvetica;
}

div.menu {
	background			: #9A0000;
	padding-left		: 5px;
	height				: 302px;
	width				: 181px;
}

div.menu strong {
	display				: block;
	text-transform		: uppercase;
	font-size			: 24px;
	height				: 30px;
	padding				: 30px 0px 0px 10px;
	color				: #CC0000;
	background			: #FFFFFF;
}

div.menu ul.menuitems {
	background			: url( "../images/bgmenu.png" ) #FFFFFF no-repeat;
	padding-top			: 1px;
	height				: 242px;
	width				: 181px;
}

div.menu ul.menuitems li {
	list-style			: none;
	width				: 180px;
	height				: 30px;
}

div.menu ul.menuitems li a {
	display				: block;
	text-align			: right;
	color				: #FFFFFF;
	text-decoration		: none;
	padding-right		: 24px;
	line-height			: 30px;
	background			: url( "../images/a.png" ) no-repeat;
}

div.menu ul.menuitems li a:hover {
	background			: url( "../images/ahover.png" );
	background-repeat	: no-repeat;
	color				: #CC0000;
}

div.menu ul.menuitems li#mi1 a {
	background			: url( "../images/atop.png" );
}

div.menu ul.menuitems li#mi1 a:hover {
	background			: url( "../images/atophover.png" );
}

div.menu ul.menuitems li#mi8 a {
	background			: url( "../images/abottom.png" );
}

div.menu ul.menuitems li#mi8 a:hover {
	background			: url( "../images/abottomhover.png" );
}

p#w3c a img {
	border				: none;
	margin				: 5px 0px 0px 5px;
}

João Prado

<!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" xml:lang="pt-BR"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Repente CSS - Sétimo Menu</title> 
<style type="text/css"> 
*{margin:0; padding:0;}
#divmenu{border-left:7px solid #970000;	height:320px; width:185px;}
.title{font-family:Arial, Helvetica, sans-serif; font-size:12px; height:50px; padding:47px 0 0 15px; width:auto;}
.title h1{color:#D10015; float:left;}
ul#menu{background:url(bg_center.png) no-repeat 0 28px; height:230px; list-style:none; text-align:right; width:180px;}
ul#menu a{color:#FFFFFF; float:right; font-family:Arial, Helvetica, sans-serif; margin-right:30px; text-decoration:none;}
ul#menu li{height:28px;}
ul#menu a:hover{color:#CC0000;}
.center{line-height:27px;}
.center:hover{background:url(hover.png) no-repeat;}
.link1{background:url(bg_top.png) no-repeat; height:29px; line-height:28px;}
.link1:hover{background:url(hover_top.png) no-repeat;}
.link8{background:url(bg_bottom.png) no-repeat; height:29px; line-height:28px; margin-top:-1px;}
.link8:hover{background:url(hover_bottom.png) no-repeat;}
</style> 
</head> 
 
<body> 
	<div id="divmenu"> 
    	<div class="title"><h1>MENU</h1><img src="lines.png" alt="lines" title="lines" /></div> 
    	<ul id="menu"> 
        	<li class="link1"><a href="#">Home</a></li> 
            <li class="link2 center"><a href="#">Game</a></li> 
            <li class="link3 center"><a href="#">Detonados</a></li> 
            <li class="link4 center"><a href="#">Estrategias</a></li> 
            <li class="link5 center"><a href="#">Telas</a></li> 
            <li class="link6 center"><a href="#">Itens Secretos</a></li> 
            <li class="link7 center"><a href="#">Inimigos</a></li> 
            <li class="link8"><a href="#">Voltar</a></li> 
        </ul> 
    </div>	
</body> 
</html>

William Bruno · Maio 29, 2010

Oitavo Menu:

Os efeitos, vcs podem criar como acharem melhor, com CSS puro, a(s) core(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:
-> É um accordion! Brincadeirinha de abre e fecha...

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: 1 (até o momento)

William Bruno

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 · Junho 11, 2010

Códigos Oitavo Menu

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 - Oitavo Menu - Repente CSS [Menus]</title> 
<style type="text/css"> 
* {
	margin: 0;
	padding: 0;
	border: none;
	list-style: none;
}
#menu {
	width: 200px;
}
#menu a {
	border-left: 5px solid #428c8c;
	padding: 2px 0 2px 20px;
	display: block;
	color: #213636;
	font-size: 13px;
	line-height: 20px;
}
#menu li {
	background: #d5eaea;
	margin-bottom: 2px;
}
* html #menu {
	padding-top: 3px;
}
* html #menu li {
	height: 20px;
	margin-top: -4px;
}
#menu ul {
	border-top: 2px solid #fff;
	border-left: 5px solid #c1dddd;
}
#menu li li a {
	font-size: 11px;
	border: none;
	padding: 2px 0px 2px 20px;
	display: block
}
#menu li a:hover {
	background: #fff;
	cursor: pointer;
}
#menu li:hover li {
	background: #d5eaea;
}
</style> 
<script type="text/javascript"> 
function byId( el ){
	return document.getElementById( el );
};
function byTagName( el, tag ){
	return el.getElementsByTagName( tag );
};
function toggle( el ){
	el.style.display = el.style.display=='none' ? 'block' : 'none';
	el.className = el.className=='' ? 'none' : '';
};
function hideUls(){
	var uls = byTagName( byId('menu'), 'ul' );
	for( var i=0;i<uls.length;i++ )
	{
		uls[i].style.display = 'none';
	}	
};
window.onload = function()
{
	hideUls();
	var lis = byTagName( byId('menu'), 'li');
	for( var i=0;i<lis.length;i++ )
	{
		lis[i].onclick = function(){
			hideUls();//depois comenta essa linha
			toggle( byTagName( this, 'ul' )[0] );
		};
	}
};
</script> 
</head> 
<body> 
	<ul id="menu"> 
		<li><a href="#">Home</a> 
			<ul> 
				<li><a href="">Início</a></li> 
				<li><a href="">Hein?!</a></li> 
			</ul> 
		</li> 
		<li><a href="#">Game</a></li> 
		<li><a href="#">Detonados</a> 
			<ul> 
				<li><a href="">Estratégias</a></li> 
				<li><a href="">Telas</a></li> 
				<li><a href="">Itens Secretos</a></li> 
			</ul>			
		</li> 
		<li><a href="#">Inimigos</a> 
			<ul> 
				<li><a href="">Estratégias</a></li> 
				<li><a href="">Telas</a></li> 
				<li><a href="">Itens Secretos</a></li> 
			</ul>			
		</li> 
		<li><a href="#">Voltar</a></li>			
	</ul><!-- /menu --> 
</body> 
</html>

William Bruno · Junho 25, 2010

Nono Menu:

Os efeitos, vcs podem criar como acharem melhor, com CSS puro, a(s) core(s)/imagens 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:
-> Os labels de cada item do submenu, aparecem embaixo do label do menu principal, antes do sub estar aberto e desaparece no hover
-> Não tem seta nos itens que não tem submenu
-> É possível fazer todo o efeito sem javascript!

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)

William Bruno
André da Silva

Aguardando: 1

Evandro Oliveira

PS: Esse eu realmente acho que está difícil! Quero ver boas soluções !

Evandro Oliveira · Junho 26, 2010

Vou postar uma qualquer coisinha no desafio em PHP e entrego os 3 menus que estou devendo ;)

Pode por meu nome no aguardando.

William Bruno · Julho 6, 2010

Códigos Nono Menu

<!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 - Nono Menu - Repente CSS [Menus]</title> 
<style type="text/css"> 
* { margin: 0; padding: 0; list-style: none; }
body {
	font-size: 12px;
	font-family: Tahoma, Georgia, sans-serif;
	margin: 50px;
}
a { text-decoration: none; }
a:hover { text-decoration: underline; }
#menu li {
	float: left;
	height: 25px;
	line-height: 30px;
	width: 200px;
	margin-right: 10px;
	position: relative;
	text-align: center;
	color: #105330;
	font-size: 20px;
	font-weight: bold;
	background: url('seta.jpg') no-repeat 172px 18px;
	padding-top: 5px;
}
#menu span {
	position: absolute;
	font-size: 10px;
	left: 0px;
	bottom: -9px;
	width: 200px;
	text-align: center;
	display: block;
	backg round: #f0f;
	line-height: 10px;
}
#menu li:hover,
#menu li.over {
	background: url('bg-menu-li.jpg') #990100 no-repeat;
	color: #fff;
	cursor: pointer;
}
#menu li:hover a,
#menu li.over a {
	background: url('bg-menu-ul.jpg') #990100 no-repeat left bottom;
	color: #fff;
}
#menu li:hover li a,
#menu li.over li a {
	background: none;
}
#menu li:hover ul,
#menu li.over ul {
	display: block;
}
#menu li:hover li, 
#menu li.over li {
	background: none;
}
#menu li li {
	margin: 0;
}
#menu a {
	color: #105330;	
	display: block;
	background: #fff;
	padding-bottom: 5px;
}
#menu ul a {
	color: #fff;
	font-size: 16px;
	background: none;
}
#menu ul {
	display: none;
	position: absolute;
	top: 30px;
	left: 0;
	width: 200px;
	background: url('bg-menu-ul.jpg') #990100 no-repeat left bottom;
	padding-bottom: 5px;
}
#menu li li {
	background: none;
	line-height: 20px;
}
</style>
<script type="text/javascript">
window.onload = function(){
	if( document.all ){
		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>Game <span>Inimigos, Truques</span>
			<ul>
				<li><a href="">Inimigos</a></li>
				<li><a href="">Truques</a></li>
			</ul>
		</li>
		<li><a href="">Dicas</a></li>
		<li>Detonados <span>Estratégias, Telas, Itens Secretos</span>
			<ul>
				<li><a href="">Estratégias</a></li>
				<li><a href="">Telas</a></li>
				<li><a href="">Itens Secretos</a></li>
			</ul>
		</li>
	</ul><!-- /menu -->
</body>
</html>

usei apenas 3 imagens

e o js só existe para funcionar o menu no ie6

Imagem Postada

André Severino · Agosto 20, 2010

William eu fiz de uma forma, mas não consegui por essa mensagem embaixo, agora que vi que tem que utilizar o span vou tentar e posto o código, o menu está em http://www.andrewd.com.br/menu-desafio/menu.html

Tenho que corrigir os erros nas versões antigas do ie :(

William Bruno · Agosto 21, 2010

hehe ^^ legal cara..

ficou boazinha a tua solução...

mas atente ao fato de você ter sujado o HTML sem necessidade.

Você está desperdiçando classes de mais.. isso polui o teu código, e torna mais dificil a manutenção, pois num site grande, você vai demorar para lembrar de onde eram tantas classes.. e veja a diferença na quantidade de seletores.. eu usei bem menos que você.

Uma coisa, se você está trabalhando nos padrões, básico do básico, é passar pelo validador:

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.andrewd.com.br%2Fmenu-desafio%2Fmenu.html

Dica, qndo estiver mais acostumado, mude para o DOCTYPE strict ^_^

poste a tua solução aqui no fórum, usando o bbcode [ code ]

E pode tentar fazer os outros menus anteriores se quiser.. garanto que é um bom treino/aprendizado.

Henrique Barcelos · Agosto 21, 2010

Ta aí o meu...

To usando imagens pra funcionar no IE7+

Nem fiz o javascript pro IE6 pq não tenho como testar...

<!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=ISO-8859-1"/>
		<title>Nono Menu</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			body {
				font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
			}
			
			ul {
				list-style: none;
			}
			
			ul#main {
				width: 800px;
				margin: 20px auto;
			}
			
			ul#main > li {
				display: inline-block;
				vertical-align: top;
				position: relative;
				width: 195px;
			}
			
			ul#main > li.parent:hover {
				background-image: url(images/arrow.png);
				background-position: 170px 20px;
				background-repeat: no-repeat;
			}
			
			ul#main > li a {
				display: block;
				line-height: 30px;
				color: #105330;
				text-align: center;
				text-decoration: none;
			}
			
			ul#main > li > a {
				font-size: 14pt;
				padding: 5px 0;
				font-weight: bold;
			}
			
			ul#main > li:hover a {
				color: #FFF;
				
			}
			
			ul#main > li a:hover {
				text-decoration: underline;
			}
			
			ul#main > li span {
				position: absolute;
				width: 10px;
				height: 10px;
			}
			
			ul#main > li:hover {
				background-color: #990100;
			}
			
			ul#main > li:hover span {
				background-image: url(images/corners.png);
			}
			
			ul#main > li span.top_left {
				top: 0;
				left: 0;
				background-position: top left;
			}
			
			ul#main > li span.top_right {
				top: 0;
				right: 0;
				background-position: top right;
			}
			
			ul#main > li span.bottom_left {
				bottom: 0;
				left: 0;
				background-position: bottom left;
			}
			
			ul#main > li span.bottom_right {
				bottom: 0;
				right: 0;
				background-position: bottom right;
			}
			
			ul#main li ul {
				text-align: center;
				position: absolute;
				top: 25px;
				width: 100%;
				margin-bottom: 5px;
			}
			
			ul#main li ul li {
				display: inline-block;
				text-align: center;
			}
			
			ul#main li ul li a {
				font-size: 7pt;
				font-weight: bold;
			}
			
			ul#main li ul li a:hover {
				text-decoration: underline;
			}
			
			ul#main > li:hover ul {
				position: relative;
				top: 0;
			}
			
			ul#main > li:hover ul li {
				display: block;
				text-align: left;
			}
			
			ul#main > li:hover ul li a {
				font-size: 12pt;
				font-weight: normal;
			}
			
		</style>
	</head>
	<body>
		<ul id="main">
			<li><span class="top_left"></span><span class="top_right"></span><span class="bottom_left"></span><span class="bottom_right"></span><a href="">Home</a></li>
			<li class="parent"><span class="top_left"></span><span class="top_right"></span><span class="bottom_left"></span><span class="bottom_right"></span><a href="">Game</a>
				<ul class="sub">
					<li><a href="">Inimigos</a></li>
					<li><a href="">Truques</a></li>
				</ul>
			</li>
			<li><span class="top_left"></span><span class="top_right"></span><span class="bottom_left"></span><span class="bottom_right"></span><a href="">Dicas</a></li>
			<li class="parent"><span class="top_left"></span><span class="top_right"></span><span class="bottom_left"></span><span class="bottom_right"></span><a href="">Detonados</a>
				<ul class="sub">
					<li><a href="">Estratégias</a></li>
					<li><a href="">Telas</a></li>
					<li><a href="">Itens Secretos</a></li>
				</ul>
			</li>
		</ul>
	</body>
</html>

Print:

Imagem Postada

Arquivado

Repente CSS - [Menus]

Recommended Posts

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Evandro Oliveira 331

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

Pablo RD 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

Evandro Oliveira 331

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

Evandro Oliveira 331

Compartilhar este post

Link para o post

Compartilhar em outros sites

Evandro Oliveira 331

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

João Batista Neto 448

Compartilhar este post

Link para o post

Compartilhar em outros sites

João Prado 64

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

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Evandro Oliveira 331

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

André Severino 3

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

Henrique Barcelos 290