Repente CSS - [Menus] - iMasters Fóruns

(2 Páginas)
1
2
→

Novo tópico
Responder

Repente CSS - [Menus] Desafios curtos.

#1 William Bruno

Grupo: Moderadores
Posts: 5688
Cadastrado: 08-janeiro 08
Sexo:Masculino
Localização:São Paulo - SP

Postou 18 julho 2009 - 12:18

Bom Dia galera dos padrões web!!! :grin:

Acordei essa manhã com vontade de desafiar todos! Muahahaaaa!!
A idéia desse tópico, é fazer lindos menus, usando apenas xHTML e CSS!(e algumas poucas imagens, dependendo do caso)

Funciona assim:
Eu faço um menu bonitinho(depois tento estender para outros assuntos) aqui, que vi por ai.. posto uma screen do efeito final que desejo, e vcs quebram a cabeça para resolver o efeito!
Oque acham ?

Algumas coisas que influenciarão na avaliação da solução proposta:

Quote

-> O número de imagens utilizadas
-> Quão crossbrowser é o efeito que você criou
-> Ausência de hacks, comentários condicionais(esses contam pontos negativos, caso usados)
-> A elegância da solução*
-> Código válido pela w3c
-> Quão próximo do efeito final você chegou

Os códigos finais devem ser para mim por PM. Assim que atingirmos um certo número de trabalhos entregues, eu crio um post, com todas as soluções, nomeando o autor de cada uma, e posto logo em seguida a minha.

* Scripts prontos, como .htc(que resolvem bugs), bibliotecas(jQuery), estão liberados nesses desafios.
Apenas use com coerência, o uso desnecessário ou indevido causará desconto de pontos obtidos.
Evitem ao máximo hacks, cc, js.. mas oque for inevitável, como os bugs do IE, não serão contados como infrações.

O repente que não permitir o uso de nada mais além de CSS e xHTML, irei avisar com fontes garrafais.

Menus já feitos:

Primeiro Menu

Segundo Menu

Terceiro Menu

Quarto Menu

Quinto Menu (aguardando participantes)..

#2 Thiago Retondar

Moderador Webstandards http://twitter.com/thiagoretondar

Grupo: Moderadores
Posts: 3700
Cadastrado: 04-março 08
Sexo:Masculino
Localização:São Paulo - SP

Postou 18 julho 2009 - 12:31

Gostei da ideia. Vou esperar ficar mais movimentado o tópico para pendurar por alguns dias.

Seria interessante que o primeiro usuário que entregasse, tivesse o direito de colocar o próximo menu à ser feito. O que acha?

Estou sem tempo agora, mas moderador vai poder participar, não é? :hehehe:

#3 Lucas Guima

aloalo

Grupo: Membros
Posts: 266
Cadastrado: 07-julho 09
Sexo:Masculino
Localização:Campinas

Postou 18 julho 2009 - 12:42

Gostei... não custa tentar! :joia:

#4 William Bruno

Grupo: Moderadores
Posts: 5688
Cadastrado: 08-janeiro 08
Sexo:Masculino
Localização:São Paulo - SP

Postou 18 julho 2009 - 12:45

Primeiro Menu:

Vamos lá... o menu com o efeito que quero, só pra esquentar é este:

Abaixo sempre vou colocar as matérias primeiras obrigatórias:
Matéria Prima:
http://4.bp.blogspot...s400/fear_2.jpg

Os outros efeitos, vcs podem criar como acharem melhor, com CSS puro, com outras imagens, com Javascript..
só lembrando das regras que citei, e que a elegância da solução vai contar na avaliação.
Dica: O segundo menu, está no estado :hover (por isso o cursor pointer e tal)

Bom, é isso ai! SE VIREM! :graduated:

Boa sorte à todos. :joia:

PS: No caso desse menu, o uso de Comentário Condicional se fará necessário por causa de problemas com o IE6.(se alguém conseguir fazer sem, merece meus Parabéns :graduated:

), ai serão contabilizadas a quantidade de regras aplicadas dentro do CC.
Mas entreguem os trabalhos, mesmo que não funcionando neste ou naquele navegador... conforme forem conseguindo, postem aqui.

Menus Entregues: 6

Lucas Guima;
XauDH;
klonder;
Thiago Retondar;
William Bruno;
Kay_.

Aguardando: 1

Ehtnies

Depois de um tempo, eu posto o meu código que gerou a imagem do menu com o efeito que pedi.

#5 Lucas Guima

aloalo

Grupo: Membros
Posts: 266
Cadastrado: 07-julho 09
Sexo:Masculino
Localização:Campinas

Postou 18 julho 2009 - 17:13

-> O número de imagens utilizadas [ Uma (além do background) ]
-> Quão crossbrowser é o efeito que você criou [ Testado: FF3.0/IE7 ]
-> Ausência de hacks, comentários condicionais(esses contam pontos negativos, caso usados) [ Não há ]
-> A elegância da solução [ Código? ]
-> Código válido pela w3c [ XHTML e CSS ]
-> Quão próximo do efeito final você chegou [ Mínima diferença de alinhamento do texto no Hover do link ]

#6 XauDH

Grupo: Membros
Posts: 42
Cadastrado: 29-julho 08
Sexo:Masculino
Localização:Campos do Jordão - SP

Postou 18 julho 2009 - 17:48

Gostei da ideia :grin:

Já fiz meu menu mas... me veio uma curiosidade, como entrego os arquivos?

[]'s

#7 William Bruno

Grupo: Moderadores
Posts: 5688
Cadastrado: 08-janeiro 08
Sexo:Masculino
Localização:São Paulo - SP

Postou 18 julho 2009 - 17:52

Hum... vamos fazer o seguinte:
Me mandem os códigos por PM... qndo tivermos mais alguns entregues, eu crio um post com a solução de cada um, e posto logo embaixo a minha, que funciona no IE6(com UM comentário condicional).

#8 Thiago Retondar

Moderador Webstandards http://twitter.com/thiagoretondar

Grupo: Moderadores
Posts: 3700
Cadastrado: 04-março 08
Sexo:Masculino
Localização:São Paulo - SP

Postou 18 julho 2009 - 18:30

Acabei um site para um cliente aqui agora, e vou começar à fazer o meu menu. ^_^

#9 Ehtnies

xhtml+css+wordpress

Grupo: Membros
Posts: 187
Cadastrado: 01-fevereiro 08
Sexo:Masculino
Localização:Itajaí - SC - BR

Postou 18 julho 2009 - 19:12

Me aguarde (6) Muahahaha

#10 William Bruno

Grupo: Moderadores
Posts: 5688
Cadastrado: 08-janeiro 08
Sexo:Masculino
Localização:São Paulo - SP

Postou 18 julho 2009 - 23:44

Códigos Primeiro Menu

Lucas Guima:
primeiroMenu.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><title>F.E.A.R.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="menu.css" type="text/css" />
<script type="text/javascript" src="menu.js"></script>
</head>
<body>
<div id="cont_menu">
        <div class="link">
                <div class="detalhe" id="d1"></div>
                <a href="#" onmouseover="aHover('l1', 'd1')" onmouseout="aLink('l1', 'd1')"><span class="texto" id="l1">Home</span></a>
        </div>
<div class="space"></div>
        <div class="link">
                <div class="detalhe" id="d2"></div>
                <a href="#" onmouseover="aHover('l2', 'd2')" onmouseout="aLink('l2', 'd2')"><span class="texto" id="l2">Game</span></a>
        </div>
<div class="space"></div>
        <div class="link">
                <div class="detalhe" id="d3"></div>
                <a href="#" onmouseover="aHover('l3', 'd3')" onmouseout="aLink('l3', 'd3')"><span class="texto" id="l3">Dicas</span></a>
        </div>
<div class="space"></div>
        <div class="link">
                <div class="detalhe" id="d4"></div>
                <a href="#" onmouseover="aHover('l4', 'd4')" onmouseout="aLink('l4', 'd4')"><span class="texto" id="l4">Voltar</span></a>
        </div>
</div>
</body>
</html>

menu.css

body {
        background: url(http://4.bp.blogspot.com/_6uelXRSeyRA/SXxcrvKPtiI/AAAAAAAAJwM/1-tODdGMMiU/s400/fear_2.jpg) no-repeat 0 0;
        margin: 0;
        }
#cont_menu {
        margin: 50px 0 0 50px;
        width: 120px;
        height: 195px;
        }
a:Link {
        color: #000;
        cursor: hand;
        }
a:Visited {
        color: #000;
        cursor: hand;
        }
a:Hover {
        color: #682800;
        cursor: hand;
        }
.texto:Hover {
        text-decoration: underline;
        }
.space {
        width: 10px;
        height: 5px;
        }
.link {
        background: url(bg.png) no-repeat center center;
        width: 120px;
        height: 45px;
        }
.texto {
        background-color: #FFF;
        float: right;
        margin: 10px 10px 0 0;
        padding-left: 5px;
        width: 95px;
        height: 22px;
        }
.detalhe {
        background-color: #FFF;
        float: left;
        width: 10px;
        height: 10px;
        }

menu.js

function aHover(vl, vd){
        var vvl = document.getElementById(vl);
        var vvd = document.getElementById(vd);
        vvl.style.backgroundColor="#EFBA2C";
        vvd.style.backgroundColor="#EFBA2C";
        }
function aLink(vl, vd){
        var vvl = document.getElementById(vl);
        var vvd = document.getElementById(vd);
        vvl.style.backgroundColor="#FFF";
        vvd.style.backgroundColor="#FFF";
        }

XauDH:
primeiroMenu.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>Desafio iMasters - Menu</title> 
<style type="text/css" media="screen,projection"> 
body {background:#000; margin:0; padding:0; font:14px Verdana;}
#menu {
	background:url('http://www.rafaelhonorio.com.br/menu/imgs/bg.jpg');
	width:400px;
	height:300px;
	position:absolute;
}
#menu ul {
	margin:50px 0 0 50px;
	padding:0;
	list-style:none;
}
#menu ul li {
	line-height:45px;
	text-indent:15px;
}
#menu ul li a {
	background:url('http://www.rafaelhonorio.com.br/menu/imgs/menu.png');
	width:120px;
	height:45px;
	margin:5px;
	text-decoration:none;
	color:#000;
	display:block;
}
#menu ul li a:hover {
	background:url('http://www.rafaelhonorio.com.br/menu/imgs/menuhover.png');
	text-decoration:underline;
	cursor:pointer;
}
</style> 
<script type="text/javascript" src="http://www.rafaelhonorio.com.br/menu/jquery.js"></script> 
<script type="text/javascript" src="http://www.rafaelhonorio.com.br/menu/png.js"></script> 
<script type="text/javascript"> 
$(document).ready(function () {$(document).pngFix();});
</script> 
</head> 
 
<body> 
 
<div id="menu"> 
	<ul> 
		<li><a href="#">Home</a></li> 
		<li><a href="#">Game</a></li> 
		<li><a href="#">Dicas</a></li> 
		<li><a href="#">Voltar</a></li> 
	</ul> 
</div> 
 
</body> 
</html>

jquery.js
http://www.rafaelhon.../menu/jquery.js
png.js
http://www.rafaelhon....br/menu/png.js

klonder
primeiroMenu.html

<html>
<head>
</head>
<style type="text/css">
#principal {border:0px; width:400; height:300; background-image:url('http://4.bp.blogspot.com/_6uelXRSeyRA/SXxcrvKPtiI/AAAAAAAAJwM/1-tODdGMMiU/s400/fear_2.jpg');}
td.mnOUT {
background-color:#FFFFFF; width:100; height:22;
font-family:'times new roman,tahoma,arial'; font-size: 13px;
padding-left:5px;
}

td.mnOVER {
background-color:#EFBA2C; width:100; height:22; color:#6E2715;
font-family:'times new roman,tahoma,arial'; font-size: 13px;
padding-left:5px;
}

td.mnPeqOUT {background-color:#FFFFFF; width:10; height:10;}
td.mnPeqOVER {background-color:#EFBA2C; width:10; height:10;}

a.link1:link {color:#000000; text-decoration:none;}
a.link1:visited {color:#000000;}
a.link1:hover {color:#6E2715; text-decoration:underline;}

td.bordas {opacity:0.7; filter:alpha(opacity=70);}
</style>

<script type="text/javascript">
function efeitoON(mn) {
var objMn = document.getElementById("menu"+mn);
var objMnPeq = document.getElementById("menuPeq"+mn);
	objMn.className = 'mnOVER';
	objMnPeq.className = 'mnPeqOVER';
}

function efeitoOFF(mn) {
var objMn = document.getElementById("menu"+mn);
var objMnPeq = document.getElementById("menuPeq"+mn);
	objMn.className = 'mnOUT';
	objMnPeq.className = 'mnPeqOUT';
}
</script>

<body>
<table id="principal">
<tr>
	<td width="50px">&nbsp;</td>
	
	<td width="120px">
		<table border="0" cellpadding="0" cellspacing="0" style="position:relative; margin-top:5px;">
		<tr><td id="menuPeq1" class="mnPeqOUT" onmouseover="efeitoON(1)" onmouseout="efeitoOFF(1)"></td>
			<td colspan="2" class="bordas" style="background-color:#506545; width:110; height:10"></td>
		</tr>		
		<tr>
			<td class="bordas" style="background-color:#506545; width:10; height:22"></td>
			<td id="menu1" class="mnOUT" onmouseover="efeitoON(1)" onmouseout="efeitoOFF(1)"><a class="link1" href="home.htm" style="width:100px; height:100%; padding-top:3px;">Home</a></td>
			<td class="bordas" style="background-color:#506545; width:10; height:22"></td>
		</tr>		
		<tr>
			<td colspan="3" class="bordas" style="background-color:#506545; width:120; height:13"></td>
		</tr></table>
		
		<table border="0" cellpadding="0" cellspacing="0" style="position:relative; margin-top:5px;">
		<tr><td id="menuPeq2" class="mnPeqOUT" onmouseover="efeitoON(2)" onmouseout="efeitoOFF(2)"></td>
			<td colspan="2" class="bordas" style="background-color:#506545; width:110; height:10"></td>
		</tr>		
		<tr>
			<td class="bordas" style="background-color:#506545; width:10; height:22"></td>
			<td id="menu2" class="mnOUT" onmouseover="efeitoON(2)" onmouseout="efeitoOFF(2)"><a class="link1" href="games.htm" style="width:100px; height:100%; padding-top:3px;">Games</a></td>
			<td class="bordas" style="background-color:#506545; width:10; height:22"></td>
		</tr>		
		<tr>
			<td colspan="3" class="bordas" style="background-color:#506545; width:120; height:13"></td>
		</tr></table>
		
		<table border="0" cellpadding="0" cellspacing="0" style="position:relative; margin-top:5px;">
		<tr><td id="menuPeq3" class="mnPeqOUT" onmouseover="efeitoON(3)" onmouseout="efeitoOFF(3)"></td>
			<td colspan="2" class="bordas" style="background-color:#506545; width:110; height:10"></td>
		</tr>		
		<tr>
			<td class="bordas" style="background-color:#506545; width:10; height:22"></td>
			<td id="menu3" class="mnOUT" onmouseover="efeitoON(3)" onmouseout="efeitoOFF(3)"><a class="link1" href="dicas.htm" style="width:100px; height:100%; padding-top:3px;">Dicas</a></td>
			<td class="bordas" style="background-color:#506545; width:10; height:22"></td>
		</tr>		
		<tr>
			<td colspan="3" class="bordas" style="background-color:#506545; width:120; height:13"></td>
		</tr></table>
		
		<table border="0" cellpadding="0" cellspacing="0" style="position:relative; margin-top:5px;">
		<tr><td id="menuPeq4" class="mnPeqOUT" onmouseover="efeitoON(4)" onmouseout="efeitoOFF(4)"></td>
			<td colspan="2" class="bordas" style="background-color:#506545; width:110; height:10"></td>
		</tr>		
		<tr>
			<td class="bordas" style="background-color:#506545; width:10; height:22"></td>
			<td id="menu4" class="mnOUT" onmouseover="efeitoON(4)" onmouseout="efeitoOFF(4)"><a class="link1" href="voltar.htm" style="width:100px; height:100%; padding-top:3px;">Voltar</a></td>
			<td class="bordas" style="background-color:#506545; width:10; height:22"></td>
		</tr>		
		<tr>
			<td colspan="3" class="bordas" style="background-color:#506545; width:120; height:13"></td>
		</tr></table>
</td>
	
	<td>&nbsp;</td>
</tr>	
</table>
</body>
</html>

Thiago Retondar
primeiroMenu.html

<!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">
<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" />
<meta http-equiv="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="index,follow" />
<title>Thiago Retondar - Repente CSS - Primeiro Menu</title>
<style type="text/css">
*{
	margin: 0;
	padding: 0;
}

body{
	background: url(http://4.bp.blogspot.com/_6uelXRSeyRA/SXxcrvKPtiI/AAAAAAAAJwM/1-tODdGMMiU/s400/fear_2.jpg) no-repeat;
	color: #fff;
}
ul{
	list-style: none;
	width: 120px;
	height: 195px;
	margin: 50px 0 0 50px;
}
ul li{
	width: 120px;
	height: 45px;
	margin: 0 0 5px 0;
	background: url(backgroundLi.png) repeat;

}
ul li a{
	width: 95px;
	height: 22px;
	color: #000;
	background: #fff;
	margin: 10px 0 0 10px;
	padding: 0 0 0 5px;
	font-size: 16px;
	float: left;
}
ul li a span{
	width: 10px;
	height: 10px;
	background: #fff;
	margin: -10px 0 0 -15px;
	float: left;
}
ul li a:hover, ul li a:hover span{
	background: #EFBA2C;
	color: #682B0F;
	
}
</style>
</head>

<body>
<!--
Browsers testados:
Mozilla Firefox 3.5.1 - Linux & Windows
Epiphany 2.26.1 - Linux
Flock 2.5 - Linux 
Safari 4.0(530.17) - Windows
Google Chrome 2.0.180.0 - Widnows
Opera 9.64 - Windows
Internet Explorer 7 - Windows
Internet Explorer 8 - Windows

Preferi não dar suporte ao Internet Explorer 6, por ser um desafio e por que esse browser já deveria estar em desuso à muito tempo. Quem sabe no próximo, até por que nesse era aplicar o haslayout.
-->
	<ul>
		<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>

William Bruno
primeiroMenu.html

<!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;
}
#menu {
	background: url('fear_2.jpg');
	height: 250px;
	width: 350px;
	padding: 50px 0 0 50px;

}
#menu li {
	background: url('bgLi.png');
	height: 25px;
	line-height: 22px;
	width: 100px;
	padding: 10px;
	margin-bottom: 5px;
	position: relative;
}
#menu li a {
	color: #000;
	background: #fff;
	display: block;
	text-decoration: none;
	padding-left: 10px;
	overflow: hidden;
}
#menu li a:hover {
	color: #672912;
	text-decoration: underline;
	background: #efba2c;
	display: block;
}
#menu li a:hover span {
	background: #efba2c;
}
#menu li a span {
	background-color: #fff;
	display: block;
	position: absolute;
	height: 10px;
	width: 10px;
	top: 0;
	left: 0;
	overflow: hidden;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
#menu li {
	position: static;
}
</style>
<script src="./DD_belatedPNG_0.0.7a.js" type="text/javascript"></script>
<script type="text/javascript">
	DD_belatedPNG.fix('#menu li');
</script>
<![endif]-->
</head>
<body>
	<ul id="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><!-- /menu -->
</body>
</html>

DD_belatedPNG_0.0.7a.js
(unicamente para correção do problema de transparência em PNGs do Internet Explorer 6)
http://www.dillerdes...edPNG_0.0.7a.js
Imagem que usei:
bgLi.png

Kay_

<!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">
        <head>
                <meta http-equiv="Content-Type" content="text/html; utf-8" />
                <title>Primeiro Menu por Kay_(victorwd)</title>
                <style type="text/css">
                        * {
                                margin: 0px;
                                padding: 0px;
                                list-style: none;
                                text-decoration: none;
                                color: black;
                        }
                        
                        body {
                                background: url(http://4.bp.blogspot.com/_6uelXRSeyRA/SXxcrvKPtiI/AAAAAAAAJwM/1-tODdGMMiU/s400/fear_2.jpg) no-repeat;
                        }
                        
                        #menu {
                                margin: 50px 50px;
                        }
                        
                        li {
                                width: 100px;
                                height: 20px;
                                background-color: white;
                                border: #7d8764 solid 10px;
                                margin-bottom: 5px;
                                
                        }
                        
                        li border {
                                opacity:0.40;
                                -moz-opacity: 0.40;
                                filter: alpha(opacity=40);
                        }
                        
                        .quadrado{
                                position: absolute;
                                width: 10px;
                                height: 10px;
                                background-color: white;
                                top: -10px;
                                left: -10px;
                        }
                        
                        a {
                                position: relative;
                                display: block;
                                width: 100px;
                                height: 21px;
                        }
                        
                        #menu a:hover {
                                text-decoration: underline;
                        }
                        
                        #menu a:hover .quadrado, #menu a:hover{
                                background-color: #efba2c;
                        }
 
.formatacao_texto {
        margin-left: 5px;
}
                </style>
        </head>
        <body>
                <div id="menu">
                <ul>
                        <li><a href="#"><span class="quadrado"></span><span class="formatacao_texto">Home</span></a></li>
                        <li><a href="#"><span class="quadrado"></span><span class="formatacao_texto">Game</span></a></li>
                        <li><a href="#"><span class="quadrado"></span><span class="formatacao_texto">Dicas</span></a></li>
                        <li><a href="#"><span class="quadrado"></span><span class="formatacao_texto">Voltar</span></a></li>
                </ul>
                </div>
        </body>
</html>

#11 Lucas Guima

aloalo

Grupo: Membros
Posts: 266
Cadastrado: 07-julho 09
Sexo:Masculino
Localização:Campinas

Postou 19 julho 2009 - 00:09

Curti essa... nem me liguei em fazer com lista.

Como vai fazer a avaliação? Podia colocar todos pra rodar, pra todos verem.

#12 William Bruno

Grupo: Moderadores
Posts: 5688
Cadastrado: 08-janeiro 08
Sexo:Masculino
Localização:São Paulo - SP

Postou 19 julho 2009 - 00:16

Avaliações:

Online:

Lucas Guima
XauDH
klonder
Thiago Retondar
William Bruno

Em geral, todos conseguiram reproduzir o efeito.
Achei bem bacana, que cada um seguiu uma linha diferente...

Quote

Estado :link
Lucas Guima: Está com underline, e não deveria
XauDH: Correto
klonder: Correto
Thiago: Está com underline, e não deveria

Estado :hover (o detalhe aqui, é que coloquei o pointer na imagem longe da palavra, e o underline apareceu)
Lucas Guima: --
XauDH: Correto
klonder: Só funciona na palavra
Thiago: --

Ninguém usou hacks, mas eu precisei de um CC para ativar o IE6, e de um position static, por causa de um bug do DD_belatedPNG.fix.
O do klonder é o único que não valida, por causa do uso das propriedades proprietárias 'opacity' no css, falta de DTD e charset.

Quanto a marcação:
Lucas Guima: Achei um pouco suja, DIVMANIA
XauDH: A mais clean de todas, mas por causa disso, teve que usar 2 imagens uma para cada estado do link.
Mas cometeu um 'tropeço' comum, ao usar uma DIV desnecessária, como pai do UL.
klonder: Tabelas um pouco confusas.. deve ter dado um bom trabalho
Thiago: Afeta todos os ULs da página

Suporte ao IE6
Lucas Guima: Os itens do menu se separaram muito, não corrigiu a transparência, bug do haslayout deixa o quadradinho com mais altura do que foi declarado(overflow: hidden, resolve)
XauDH: faltou a cor do hover
klonder: funcionou igual
Thiago: Imagens não transparentes, faltou o quadradinho no canto
Meu: funcionou igual (e ai de mim, se eu não fizesse funcionar.. hAUhauha )

Essa é a minha avaliação inicial.

Quote

Kay_
Eu nao entendi essa declaracao aqui: li border {
pelo menos no meu FireFox3.0 nao funcionou. você usou muitas classes desnecessarias, fez uma DIV de container pro UL, que poderia nao existir tb, pois o UL ja eh um elemento nivel de bloco muito bom.
No mais, a solucao ficou bacana, mas poderia ter evitado essa montoeira de spans, e classes.

#13 Thiago Retondar

Moderador Webstandards http://twitter.com/thiagoretondar

Grupo: Moderadores
Posts: 3700
Cadastrado: 04-março 08
Sexo:Masculino
Localização:São Paulo - SP

Postou 19 julho 2009 - 00:55

Pessoal, comentem aí o que acharam do desafio.

Para não ficaram tímidos, começo eu:

Achei todos bem legais, com exceção de um. O do klonder. Eu não entendi o por que de usar tabelas. :blink:

Mas foi até bom, pois o pessoal vê como é mais fácil usar um código semântico.

Sobre os comentários do Bruno, só não concordo com uma coisa:

Quote

Thiago: Afeta todos os ULs da página

Como só vai haver somente esse conteúdo, achei totalmente desnecessário colocar um id. Entendeu? Mas está boa.

Todos se sairam muito bem!

E comentem aí, pessoal.

:thumbsup:

P.S.: Só agora que vi que não tinha underline nos links. :blink:

AiohOIAhsoIAhoiHAoISHoiHOIAsOIAshoisHAIOshhsIOSHaio

#14 William Bruno

Grupo: Moderadores
Posts: 5688
Cadastrado: 08-janeiro 08
Sexo:Masculino
Localização:São Paulo - SP

Postou 19 julho 2009 - 12:49

Segundo Menu:

@Edit: Mudei um detalhezinho pequeno

Os efeitos, vcs podem criar como acharem melhor, com CSS puro, com Javascript, mas tentem não utilizar imagens..
só lembrando das regras que citei, e que a elegância da solução vai contar na avaliação.
Dica: O terceiro item do menu, está no estado :hover (por isso o cursor pointer e tal)

Bom, é isso ai! SE VIREM! :graduated:

Boa sorte à todos. :joia:

Menus Entregues: 6 (até o momento)

Thiago Retondar;
~Tiu Talk~;
William Bruno;
XauDH;
pslucasps;
klonder.

Aguardando: 1

Lucas Guima

#15 Lucas Guima

aloalo

Grupo: Membros
Posts: 266
Cadastrado: 07-julho 09
Sexo:Masculino
Localização:Campinas

Postou 19 julho 2009 - 12:52

Quote

Estado :link
Lucas Guima: Está com underline, e não deveria

Tá não...

EDIT: Ah, no IE6... :pinch:

E deu certo o overflow, valeu! :grin:

Quote

Estado :hover (o detalhe aqui, é que coloquei o pointer na imagem longe da palavra, e o underline apareceu)
Lucas Guima: --

Não entendi os tracinhos... :blink:

E realmente, tô saindo da Divmania agora. :blush:

Gostei de ver várias maneiras e soluções! :clap:

Bora pro próximo! :thumbsup:

#16 William Bruno

Grupo: Moderadores
Posts: 5688
Cadastrado: 08-janeiro 08
Sexo:Masculino
Localização:São Paulo - SP

Postou 19 julho 2009 - 15:08

Lucas Guima, em 19 julho 2009 - 12:52 , disse:

Não entendi os tracinhos... :blink:

é que você já tinha errado o estado :link, então não tinha com acertar o :hover
A idéia é fazer aparecer o underline, e não que ele fique constante lá.

#17 Thiago Retondar

Moderador Webstandards http://twitter.com/thiagoretondar

Grupo: Moderadores
Posts: 3700
Cadastrado: 04-março 08
Sexo:Masculino
Localização:São Paulo - SP

Postou 19 julho 2009 - 15:40

@Pessoal que está fazendo o segundo menu:

podem me entregar por MP os códigos, ou ao Bruno, depois eu posto aqui todos.

O meu já está pronto. Fiz rapidinho, pois estou sem tempo, então antes que apareça algo, já o fiz.

:thumbsup:

#18 ~TiuTalk~

Desenvolvimento Ético, por uma WEB melhor.

Grupo: Moderadores
Posts: 1292
Cadastrado: 02-maio 08
Sexo:Masculino
Localização:Rio de Janeiro

Postou 19 julho 2009 - 16:47

Mandei o meu...

:graduated:

#19 Lucas Guima

aloalo

Grupo: Membros
Posts: 266
Cadastrado: 07-julho 09
Sexo:Masculino
Localização:Campinas

Postou 19 julho 2009 - 17:21

Alguém tem alguma dica de como alinhar e como fazer esse efeito?

Tô tentando deixar a Divmania... :yay:

#20 Thiago Retondar

Moderador Webstandards http://twitter.com/thiagoretondar

Grupo: Moderadores
Posts: 3700
Cadastrado: 04-março 08
Sexo:Masculino
Localização:São Paulo - SP

Postou 19 julho 2009 - 18:06

Bem, três pessoas já postaram. Cada uma com uma solução diferente.

Tente aí, e posta a solução que você acha mais cabível.

:thumbsup:

#21 XauDH

Grupo: Membros
Posts: 42
Cadastrado: 29-julho 08
Sexo:Masculino
Localização:Campos do Jordão - SP

Postou 19 julho 2009 - 18:11

Gostei do primeiro hehehe,
Usar div com pai do ul, sempre faço isso <_<

tenho que parar eheheh

Vou tentar o segundo aqui, se der tempo envio também :grin:

#22 Thiago Retondar

Moderador Webstandards http://twitter.com/thiagoretondar

Grupo: Moderadores
Posts: 3700
Cadastrado: 04-março 08
Sexo:Masculino
Localização:São Paulo - SP

Postou 19 julho 2009 - 18:19

Esse desafio está sendo muito bom!

Estou começando à rever meus conceitos. O Bruno sabe do que estou falando. :coolio:

#23 pslucasps

Grupo: Membros
Posts: 120
Cadastrado: 26-dezembro 08
Sexo:Masculino

Postou 19 julho 2009 - 18:38

@William Bruno: Parabéns pela a iniciativa. Muito boa mesmo, ela iinclusive ajuda a aprender mais sobre o assunto. Bom tentei aqui mas como bom novato não consegui :blush:

Bom, deixa pra próxima. Estou ancioso pra ver como o pessoal solucionou essa.

#24 Lucas Guima

aloalo

Grupo: Membros
Posts: 266
Cadastrado: 07-julho 09
Sexo:Masculino
Localização:Campinas

Postou 19 julho 2009 - 19:21

Peço pra sair, preciso estudar mais essas listas muito loucas... :pinch:

#25 XauDH

Grupo: Membros
Posts: 42
Cadastrado: 29-julho 08
Sexo:Masculino
Localização:Campos do Jordão - SP

Postou 19 julho 2009 - 19:24

Enviei o meu :grin:

Só não me dei muito bem com o IE6. E ainda acho que minha solução ainda não é a melhor hehehe

#26 William Bruno

Grupo: Moderadores
Posts: 5688
Cadastrado: 08-janeiro 08
Sexo:Masculino
Localização:São Paulo - SP

Postou 19 julho 2009 - 19:42

Lucas Guima, em 19 julho 2009 - 17:21 , disse:

Alguém tem alguma dica de como alinhar e como fazer esse efeito?

Rapaz.. fiquei um bom tempo aqui pensando, em como te responder isso.
Vamos lá.

Eu não fiz 'milagres', e nem usei alguma propriedade esquecida/desconhecida do CSS.
As soluções já apresentadas para o Segundo Menu, diferem bastante uma da outra.

Mas vou tentar falar como penso quando tenho que resolver problemas assim:
HTML é estritamente quadrado, não existe nenhum elemento ou propriedade, para deixar redondo, inclinado..
Procure enchergar os poligonos.

O Segundo Menu do desafio, se você olhar bem, fica maior no estado :hover(passar do mouse), do que no estado :link(normal).
Mas ele não fica por completo.. tem os recortezinhos nos quatro cantos.. você pode pensar tanto, em fazer os recortes(as técnicas de arredondamento com CSS pensam assim), como fazer o 'novo elemento', no passar do mouse.

Quantas 'partes' você encherga ? dependendo do caminho que vai seguir, você pode enxergar a cruz, ou enxergar os cubos nos cantos.

Bom galera, quem tá vendo o tópico agora, pode fazer e entregar o Primeiro Menu, ou anteriores tb!(quando estivermos avançado mais)
Sintam-se a vontade!!!

Enviou pra quem XauDH ? eu não recebi ..

#27 Thiago Retondar

Moderador Webstandards http://twitter.com/thiagoretondar

Grupo: Moderadores
Posts: 3700
Cadastrado: 04-março 08
Sexo:Masculino
Localização:São Paulo - SP

Postou 19 julho 2009 - 20:52

O XauDH enviou para mim.

Vou adicionar lá.

:thumbsup:

#28 pslucasps

Grupo: Membros
Posts: 120
Cadastrado: 26-dezembro 08
Sexo:Masculino

Postou 19 julho 2009 - 21:11

Ae nem acredito que consegui através das dicas do @William Bruno. Não foi uma solução muito boa mas foi totalmente com CSS e funcionou no Firefox, Opera, Safari(Windowns) e Chrome. Só não conseguir fazer funcionar no IE7 :cry:

#29 klonder

Klonder

Grupo: Moderadores
Posts: 728
Cadastrado: 25-dezembro 06
Sexo:Masculino
Localização:Goiânia

Postou 19 julho 2009 - 21:57

Quote

Achei todos bem legais, com exceção de um. O do klonder. Eu não entendi o por que de usar tabelas.

Pois é... eu também não sei... kkk!!!

Bom, o importante é que parece que aprendi muitas coisas em CSS. Sinceramente, eu não sabia o poder disso. Já sabia o básico, mas o código do William me ensinou muito!

O meu também já está pronto... só terminei agora à noite porque que tive de sair à tarde.
Estou enviando!

#30 Thiago Retondar

Moderador Webstandards http://twitter.com/thiagoretondar

Grupo: Moderadores
Posts: 3700
Cadastrado: 04-março 08
Sexo:Masculino
Localização:São Paulo - SP

Postou 19 julho 2009 - 22:54

Que bom que aprendeu! Eu também estou revendo meus conceitos. muito bom mesmo! :clap:

#31 Thiago Retondar

Moderador Webstandards http://twitter.com/thiagoretondar

Grupo: Moderadores
Posts: 3700
Cadastrado: 04-março 08
Sexo:Masculino
Localização:São Paulo - SP

Postou 20 julho 2009 - 11:51

Códigos Segundo Menu

Thiago Retondar:

<!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>Thiago Retondar - Repente CSS - Segundo Menu</title>
<style type="text/css">
*{
	margin: 0;
	padding: 0;
}
body{
	font-family: serif; /*Colocado para browser que, por padrão, têm fonte sans-serif =^) */
}
ul#menu{
	list-style: none;
	height: 50px;
	width: 540px;
}
ul#menu li{
	float: left;
	margin: 20px 0 0 20px;
	width: 110px;
	height: 50px;
	text-align: center;
	cursor: pointer;
	display: inline;
}
ul#menu li a{
	background: #FFFF01;
	color:  #FD0200;
	display: block;
	padding: 11px 0;
	margin: 5px;
	font-size: 16px;
}
ul#menu li:hover a{
	color: #FFFF01;
	background: none;
}
ul#menu li:hover{
	background: url(backgroundLi.gif);
}
</style>
<!--[if lte IE 6]>
   <style type="text/css">
        body { behavior:url(csshover.htc); }
   </style>
<![endif]-->
</head>

<body>
<!--
Browser testados:
	Mozilla Firefox 3.5.1 » Linux & Windows
	Konqueror 4.2.2 » Linux
	Flock 2.5 » Linux
	Epiphany 2.26.1 » Linux
	Safari 4.0(530.17) » Windows
	Google Chrome 2.0.180.0 » Windows
	Opera 9.64 » Windows
	Internet Explorer 5.5 » Windows
	Internet Explorer 6 » Windows
	Internet Explorer 7 » Windows
	Internet Explorer 8 » Windows

Validados:
	XHTML 1.1 » This document was successfully checked as XHTML 1.1!
	CSS 2.1 » Parabéns! Não foram encontrados erros na sua folha de estilo.

Imagens usadas:
	Apenas uma « backgroundLi.gif » 146 bytes » GIF de duas cores
-->
	<ul id="menu">

		<li><a href="#">Home</a></li>
		<li><a href="#">Game</a></li>
		<li><a href="#">Dicas</a></li>
		<li><a href="#">Voltar</a></li>
	</ul>
</body>
</html>

~Tiu Talk~:

<!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>
    <title>Teste</title>
    <script language="Javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script language="Javascript" src="http://malsup.com/jquery/corner/jquery.corner.js" type="text/javascript"></script>
    <script type="text/javascript">
      $(function() {
        $('ul#menu li a').hover(
            function() { $(this).corner('notch 5px') },
            function() { $(this).uncorner(); }
        );
      });
    </script>
    <style type="text/css">
      ul#menu {
        list-style: none;
      }
      ul#menu li {
        margin: 20px 10px;
        float: left;
      }
      ul#menu li a {
        padding: 10px 20px;
        background: yellow;
        color: red;
        display: block;
      }
      ul#menu li a:hover {
        background: red;
        color: yellow;
        text-decoration: none;
      }
    </style>
</head>

<body>
    <ul id="menu">
        <li><a href="#" title="Home">Home</a></li>
        <li><a href="#" title="Game">Game</a></li>
        <li><a href="#" title="Dicas">Dicas</a></li>
        <li><a href="#" title="Voltar">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 - Segundo Menu - Repente CSS [Menus]</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
	list-style: none;
}
body {
    margin-top: 20px;
}
#menu li {
	margin-left: 20px;
	background-color: #ff0;
	width: 100px;
	height: 40px;
	float: left;
	position: relative;
}
#menu li a {
	color: #f00;
	display: block;
	width: 100px;
	height: 30px;
	text-align: center;
	padding-top: 10px;
	text-decoration: underline;
}
#menu li a:hover {
	color: #ff0;
	background: #f00;
	height: 40px;
	padding: 0;
	width: 110px;
	position: absolute;
	left: -5px;
	cursor: hand;
	text-decoration: none;
}
#menu li a:hover span {
	background: #f00;
	display: block;
	height: 35px;
	width: 100px;
	padding: 15px 0 0 0;
	position: absolute;
	top: -5px;
	left: 5px;
}
</style>

</head>
<body>
	<ul id="menu">
		<li><a href="#"><span>Home</span></a></li>
		<li><a href="#"><span>Game</span></a></li>
		<li><a href="#"><span>Dicas</span></a></li>
		<li><a href="#"><span>Voltar</span></a></li>
	</ul>
</body>
</html>

XauDH

<!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>Desafio iMasters - Menu2</title>
<style type="text/css">
body {
margin:0;
padding:0;
}
#menu {
margin:0;
padding:0;
list-style:none;
}
#menu li {
background:#ff0;
width:100px;
height:40px;
margin:10px;
line-height:40px;
text-align:center;
color:#F00;
float:left;
display:block;
}
#menu li:hover {
background:#f00;
width:110px;
margin:10px 5px 10px 5px;
text-decoration:none;
color:#ff0;
}
#menu li span {
background:#F00;
width:100px;
height:40px;
line-height:40px;
margin:0 auto;
margin-top:-5px;
}
#menu li span {*background:#FF0} /* IE6 */
#menu li span a {
display:block;
color:#F00;
}
#menu li span a:hover {
background:#F00;
width:100px;
height:50px;
margin:0 auto;
text-decoration:none;
color:#FF0;
line-height:50px;
margin-top:-5px;
}
</style>
</head>

<body>
<ul id="menu">
<li><span><a href="#">Home</a></span></li>
<li><span><a href="#">Game</a></span></li>
<li><span><a href="#">Dicas</a></span></li>
<li><span><a href="#">Voltar</a></span></li>
</ul>
</body>
</html>

pslucasps
HTML

<!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" lang='pt-br'>

<head>
<title>Desafio Menus 2</title>

<meta http-equiv='content-type' content='text/html; charset=UTF-8' />
<meta http-equiv='content-language' content='pt-br' />

<!--Inicio CSS link-->
<link href='estilo.css' rel='stylesheet' type='text/css' media='all' />
<!--Fim CSS link-->
</head>

<body>

<div id='bloco1'></div>
<div id='bloco2'></div>
<div id='bloco3'></div>
<div id='bloco4'></div>
<div id='bloco5'></div>
<div id='bloco6'></div>
<div id='bloco7'></div>
<div id='bloco8'></div>
<div id='bloco9'></div>
<div id='bloco10'></div>

<ul id='menu'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Game</a></li>
<li><a href='#'>Dicas</a></li>
<li><a href='#'>Voltar</a></li>
</ul>

</body>
</html>

CSS

@charset "UTF-8";

*
{
margin:0;
padding:0;
border:0;
font-family:"times new roman", serif;
}

ul#menu
{
margin:20px 0 0 20px;
}

ul#menu li
{
width:100px;
height:40px;
background-color:#FF0;
float:left;
list-style:none;
margin:10px;
text-align:center;
}

ul#menu li a
{
color:#F00;
padding:10px 25px;
display:block;
}

ul#menu li a:hover
{
text-decoration:none;
color:#FF0;
background-color:#F00;
border:#F00 solid;
border-width:8px;
margin:-8px;
display:block;
}

div#bloco1,
div#bloco2,
div#bloco3,
div#bloco4,
div#bloco5,
div#bloco6,
div#bloco7,
div#bloco8,
div#bloco9,
div#bloco10
{
width:20px;
height:8px;
background-color:#FFF;
position:absolute;
}

div#bloco1
{
top:22px;
left:10px;
}

div#bloco2
{
top:22px;
left:130px;
}

div#bloco3
{
top:22px;
left:250px;
}

div#bloco4
{
top:22px;
left:370px;
}

div#bloco5
{
top:22px;
left:490px;
}

div#bloco6
{
top:70px;
left:10px;
}

div#bloco7
{
top:70px;
left:130px;
}

div#bloco8
{
top:70px;
left:250px;
}

div#bloco9
{
top:70px;
left:370px;
}

div#bloco10
{
top:70px;
left:490px;
}

klonder
segundoMenu.html

<!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 - Segundo Menu - Repente CSS [Menus]</title>
<style type="text/css">
* {margin:0; padding:0;}

#menus {position: relative; width:528px; height:50px; border:0; margin:auto; margin-top:20px; clear:both; overflow: hidden;}

#menus div {position:relative; float:left; border:0; text-align:center; width:110px; padding: 5px 10px 5px 10px;}

#menus div a {background-color:#FFFF00; color:#FF0000; display:block; padding: 10px 0 10px 0;outline:0;}
#menus div a:hover {background-color:#FF0000; color:#FFFF00; display:block; padding: 10px 0 10px 0; text-decoration:none;}

#menus div a:hover span{position: absolute; z-index:-1;	display: block;	height: 110px;width: 100px;	top:0px; left:15px;
background-color:#FF0000;}

#menus div a:hover span.bot1 {position: absolute; display:block; height:5px; width:100px; top:60px; left:15px;	background-color:#FF0000;}
</style>
</head>
<body>
<div id="menus">
<div><a href="#"><span></span>Home</a></div>
<div><a href="#"><span></span>Game</a></div>
<div><a href="#"><span></span>Dicas</a></div>
<div><a href="#"><span></span>Voltar</a></div>
</div>
</body>
</html>

P.S.: Mais tarde, eu ou o Bruno, postaremos as análises.

#32 Gui.BAR

Guilherme Barbosa

Grupo: Membros
Posts: 186
Cadastrado: 07-setembro 06
Sexo:Masculino
Localização:Belo Horizonte

Postou 20 julho 2009 - 18:23

Não tô tendo tempo de participar disso. Mas queria mto!
Putz.. a solução do Willian Bruno pro menu 2 ficou fantástica.

#33 William Bruno

Grupo: Moderadores
Posts: 5688
Cadastrado: 08-janeiro 08
Sexo:Masculino
Localização:São Paulo - SP

Postou 20 julho 2009 - 19:29

Terceiro Menu:

Os efeitos, vcs podem criar como acharem melhor, com CSS puro, com Javascript, as imagens vcs terão que pegar do meu print, organizem elas, 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 pois são 2 arquivos!
-> Quero um efeito de link atual. A primeira imagem é da página do link Home do menu, e a segunda imagem, é da página do link Game
-> O background amarelo, é o estado :hover dos itens.
Resumindo:
:hover = Background Amarelo
:link = Background Preto
atual = Background Vermelho

Bom, é isso ai! SE VIREM! :graduated:

Boa sorte à todos. :joia:

Menus Entregues: 4 (até o momento)

Thiago Retondar
William Bruno
Eliseu M.
klonder

Aguardando: 0

#34 Thiago Retondar

Moderador Webstandards http://twitter.com/thiagoretondar

Grupo: Moderadores
Posts: 3700
Cadastrado: 04-março 08
Sexo:Masculino
Localização:São Paulo - SP

Postou 20 julho 2009 - 20:34

Gui.BAR, em 20 julho 2009 - 18:23 , disse:

Não tô tendo tempo de participar disso. Mas queria mto!

Guilherme,

este menu ficará por uns três~quatro dias, até que o Bruno poste um novo. Precisar ter pressa não.

Gui.BAR, em 20 julho 2009 - 18:23 , disse:

Putz.. a solução do Willian Bruno pro menu 2 ficou fantástica.

Ficou mesmo! Nem tinha pensado nisso. ^^

#35 Eliseu M.

Eliseu M.

Grupo: Membros
Posts: 211
Cadastrado: 05-julho 09
Localização:Praia Grande, SP

Postou 21 julho 2009 - 15:50

Opa, o meu tá entregue =D

#36 Thiago Retondar

Moderador Webstandards http://twitter.com/thiagoretondar

Grupo: Moderadores
Posts: 3700
Cadastrado: 04-março 08
Sexo:Masculino
Localização:São Paulo - SP

Postou 21 julho 2009 - 21:01

Só pude ver os segundo menus agora e queria parabenizar o Klonder pelos seus 110% de melhoria em relação ao primeiro! Muito bom! Parabéns! :clap:

E aproveitando o tópico, queria propor algo. O que vocês acham de cada um de você dar uma pontuação de 0 à 10 para cada participante? Exemplo:

Quote

Beltrano: 9,5
Fulano: 7,5
Ciclano: 10

Dêem sugestões. Quem fazem o desafio são vocês. :joia:

#37 Eliseu M.

Eliseu M.

Grupo: Membros
Posts: 211
Cadastrado: 05-julho 09
Localização:Praia Grande, SP

Postou 21 julho 2009 - 21:39

É... legal. E quem seriam os avaliadores??

// Ah, e que tal começarem a avaliar a compatibilidade no Moz, Chrome e IE? Seria legal, o pessoal ia rachar u pokin mais a cuca

Pq IE é um porre xD

#38 klonder

Klonder

Grupo: Moderadores
Posts: 728
Cadastrado: 25-dezembro 06
Sexo:Masculino
Localização:Goiânia

Postou 21 julho 2009 - 22:11

Thiago Retondar, em 21 julho 2009 - 21:01 , disse:

Só pude ver os segundo menus agora e queria parabenizar o Klonder pelos seus 110% de melhoria em relação ao primeiro! Muito bom! Parabéns! :clap:

Pow cara, valew! Eu sinceramente, aprendi muito com esse tópico!!! Obrigado pelo incentivo! :bye:

#39 Thiago Retondar

Moderador Webstandards http://twitter.com/thiagoretondar

Grupo: Moderadores
Posts: 3700
Cadastrado: 04-março 08
Sexo:Masculino
Localização:São Paulo - SP

Postou 21 julho 2009 - 23:07

Eliseu M., em 21 julho 2009 - 21:39 , disse:

É... legal. E quem seriam os avaliadores??

// Ah, e que tal começarem a avaliar a compatibilidade no Moz, Chrome e IE? Seria legal, o pessoal ia rachar u pokin mais a cuca

Pq IE é um porre xD

Seriam vocês mesmos. Cada uma daria a nota que quer para o menu de cada um.

klonder, em 21 julho 2009 - 22:11 , disse:

Thiago Retondar, em 21 julho 2009 - 21:01 , disse:

Só pude ver os segundo menus agora e queria parabenizar o Klonder pelos seus 110% de melhoria em relação ao primeiro! Muito bom! Parabéns! :clap:

Pow cara, valew! Eu sinceramente, aprendi muito com esse tópico!!! Obrigado pelo incentivo! :bye:

#40 William Bruno

Grupo: Moderadores
Posts: 5688
Cadastrado: 08-janeiro 08
Sexo:Masculino
Localização:São Paulo - SP

Postou 23 julho 2009 - 00:48

é isso ai galera!
Vamos lá... já temos 4 menus entregues.. esse desafio parece que foi realmente um pouco mais dificil que os anteriores.
Ficará por um tempo maior aberto, até que eu poste as soluções já entregues.

Quem tiver afim, pode fazer o terceiro, o segundo.. ou até o primeiro menu, e me entregar por PM.. oque vale é o aprendizado do desafio.
Após entregar, tente estudar os códigos propostos.. veja cada solução.

#41 William Bruno

Grupo: Moderadores
Posts: 5688
Cadastrado: 08-janeiro 08
Sexo:Masculino
Localização:São Paulo - SP

Postou 25 julho 2009 - 10:05

Códigos Terceiro Menu

Thiago Retondar

<!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>Thiago Retondar - Repente CSS - Terceiro Menu</title>
<style type="text/css">
*{
	margin: 0;
	padding: 0;
	text-decoration: none;
}
body{
	background: #000;
	font-family: serif;
	font-size: 16px;
}
#mainnav{
	list-style: none;
	margin: 20px 0 0 26px;
	height: 28px;
}
#mainnav li{
	float: left;
	margin: 0 7px 0 0;
}
#mainnav li a{
	color: #fff;
	background: url(backgroundMenu.gif) repeat-x;
	height: 28px;
	line-height: 26px;
	float: left;
}
.text{
	float: left;
	margin: 0 21px;
}
#mainnav li a span.left,
#mainnav li a span.right{
	width: 5px;
	height: 28px;
	float: left;
}
#mainnav li a span.left{
	background: url(backgroundLeft.gif);
}
#mainnav li a span.right{
	background: url(backgroundRight.gif);
}
#mainnav li a:hover{
	color: #000;
	text-decoration: underline;
	background-position: 0 -28px;
}
#mainnav li a:hover span{	
	background-position: 0 -28px;
	color: #000;
}
#mainnav li a.selected,
#mainnav li a.selected span{
	background-position: 0 -56px;
	color: #fff;
	text-decoration: none;
}
#mainnav li a.selected:hover span.text{
	color: #FFFF00;
	text-decoration: underline;
}
</style>
</head>
<body>
	<ul id="mainnav">
		<li><a href="index.html"><span class="left"></span><span class="text">Home</span><span class="right"></span></a></li>
		<li><a href="game.html" class="selected"><span class="left"></span><span class="text">Game</span><span class="right"></span></a></li>
		<li><a href="#"><span class="left"></span><span class="text">Detonados</span><span class="right"></span></a></li>
		<li><a href="#"><span class="left"></span><span class="text">Voltar</span><span class="right"></span></a></li>
	</ul>
</body>
</html>

William Bruno
terceiroMenu.html

<!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 - Terceiro Menu - Repente CSS [Menus]</title>
	<link href="terceiroMenu.css" rel="stylesheet" type="text/css" media="screen" /> 
	<script type="text/javascript" src="dropdown.js"></script>
</head>
<body id="home">
	<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 --> 
</body>
</html>

terceiroMenu2.html

<!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 - Terceiro Menu - Repente CSS [Menus]</title>
	<link href="terceiroMenu.css" rel="stylesheet" type="text/css" media="screen" /> 
	<script type="text/javascript" src="dropdown.js"></script>
</head>
<body id="game">
	<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 --> 
</body>
</html>

terceiroMenu.css

@charset "UTF-8";
* {
	margin: 0;
	padding: 0;
	list-style: none;
}
body {
	margin: 20px;
	background: #000;
}
#menu li {
	float: left;
	margin-left: 5px;
	height: 28px;
	background: url('bgLIs.png') left center;
}
#menu li a {
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	display: block;
	padding: 0 25px;
	height: 28px;
	line-height: 28px;
	text-align: center;
	background: url('cantos.png') no-repeat right center;
}
/* bug do IE6 com o display: block; para elementos sem width */
* html #menu li a {
	width: 40px;
}
#menu li a:hover {
	background: url('cantos.png') no-repeat right top;
	color: #000;
	text-decoration: underline;
}
#menu li:hover,
#menu li.over {
	background: url('bgLIs.png') left top;
}
body#home ul#menu li.home,
body#game ul#menu li.game,
body#dicas ul#menu li.dicas {
	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;
}

dropdown.js

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", "");
   }
   }
  }
 }
}

bgLis.png

cantos.png

http://www.cenasordi...rceiroMenu.html

Eliseu M.
home.htm

<!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" lang='pt-br'>
<meta http-equiv='content-type' content='text/html; charset=UTF-8' />
<meta http-equiv='content-language' content='pt-br' />
<title>Home Page</title>
<style type="text/css">
body {color:white; 
background-color:black;
margin:30px;}
.menu li {background: #000 url('http://img10.imageshack.us/img10/4606/normalj.png') repeat-x; 
font:bold 14px Sans Serif;
letter-spacing:1px;
border:1px solid #292929;
-webkit-border-radius:4px;
-moz-border-radius:4px;
display:inline;
padding:4px 0px 4px 0px;}
.menu li a {color:white;
text-decoration:none;
display:block, inline;
padding:4px 20px 4px 20px;}
.menu li:hover {background: #FFFF7B url('http://img32.imageshack.us/img32/2330/hover.png') repeat-x; color:black;}
.menu li a:hover {color:black; text-decoration:underline;}
.menu .selected {background: #000 url('http://img20.imageshack.us/img20/1329/selected.png') repeat-x; border:1px solid #4a1818;}
.menu .selected a:hover{color:yellow; background:#000 url('http://img20.imageshack.us/img20/1329/selected.png') repeat-x;}
</style>
<ul class="menu">
<li class="selected"><a href="#">Home</a></li>
<li><a href="#">Games</a></li>
<li><a href="#">Detonados</a></li>
<li><a href="#">Voltar</a></li>
</ul>

games.htm

<!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" lang='pt-br'>
<meta http-equiv='content-type' content='text/html; charset=UTF-8' />
<meta http-equiv='content-language' content='pt-br' />
<title>Home Page</title>
<style type="text/css">
body {color:white; 
background-color:black;
margin:30px;}
.menu li {background: #000 url('http://img10.imageshack.us/img10/4606/normalj.png') repeat-x; 
font:bold 14px Sans Serif;
letter-spacing:1px;
border:1px solid #292929;
-webkit-border-radius:4px;
-moz-border-radius:4px;
display:inline;
padding:4px 0px 4px 0px;}
.menu li a {color:white;
text-decoration:none;
display:block, inline;
padding:4px 20px 4px 20px;}
.menu li:hover {background: #FFFF7B url('http://img32.imageshack.us/img32/2330/hover.png') repeat-x; color:black;}
.menu li a:hover {color:black; text-decoration:underline;}
.menu .selected {background: #000 url('http://img20.imageshack.us/img20/1329/selected.png') repeat-x; border:1px solid #4a1818;}
.menu .selected a:hover{color:yellow; background:#000 url('http://img20.imageshack.us/img20/1329/selected.png') repeat-x;}
</style>
<ul class="menu">
<li><a href="#">Home</a></li>
<li class="selected"><a href="#">Games</a></li>
<li><a href="#">Detonados</a></li>
<li><a href="#">Voltar</a></li>
</ul>

klonder

<html>
<head>
        <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
        <title>Klonder - Terceiro Menu - Repente CSS [Menus]</title>
<style type="text/css">
* {background-color:#000; margin:0; padding:0;list-style: none;}
body {margin-top: 20px; margin-left:20px;}
#menu li {
        background-color: #000;
        padding: 0 10px 0 10px;
        position: relative;
        float:left;
        border:#FFF 0px solid;
}
#menu li a:link #bordaD {
 position:absolute; left:5px; top:0px; background-image: url('menu1_1.png'); float:left; width:5px; height:27px;}
#menu li a:link  {color:#FFF; background-image:url('menu1_2.png'); text-decoration:none; text-align:center;padding: 3px 20px 5px 20px; float:left;}
#menu li a:link #bordaE { position:absolute; right:5px; top:0px; background-image: url('menu1_3.png'); width:5px; height:27px;}

#menu li a:visited #bordaD {
 position:absolute; left:5px; top:0px; background-image: url('menu1_1.png'); float:left; width:5px; height:27px;}
#menu li a:visited  {color:#FFF; background-image:url('menu1_2.png'); text-decoration:none; text-align:center;padding: 3px 20px 5px 20px; float:left;}
#menu li a:visited #bordaE { position:absolute; right:5px; top:0px; background-image: url('menu1_3.png'); width:5px; height:27px;}

#menu li a:hover #bordaD {
 position:absolute; left:5px; top:0px; background-image: url('menu3_1.png'); float:left; width:5px; height:27px;}
#menu li a:hover  {color:#000; background-image:url('menu3_2.png'); text-decoration:underline; text-align:center;padding: 3px 20px 4px 20px; float:left;}
#menu li a:hover #bordaE { position:absolute; right:5px; top:0px; background-image: url('menu3_3.png'); width:5px; height:27px;}

#menu li a:focus #bordaD {
 position:absolute; left:5px; top:0px; background-image: url('menu2_1.png'); float:left; width:5px; height:27px;}
#menu li a:focus  {color:#FFF; background-image:url('menu2_2.png'); text-decoration:none; text-align:center;padding: 3px 20px 5px 20px; float:left; outline:0;}
#menu li a:focus #bordaE { position:absolute; right:5px; top:0px; background-image: url('menu2_3.png'); width:5px; height:27px;}

#menu li a:active #bordaD {
 position:absolute; left:5px; top:0px; background-image: url('menu2_1.png'); float:left; width:5px; height:27px;}
#menu li a:active  {color:#FFF; background-image:url('menu2_2.png'); text-decoration:none; text-align:center;padding: 3px 20px 5px 20px; float:left;}
#menu li a:active #bordaE { position:absolute; right:5px; top:0px; background-image: url('menu2_3.png'); width:5px; height:27px;}
</style>
</head>
<body>

<ul id="menu">
<li><a href="#1"><span id="bordaD"></span>Home<span id="bordaE"></span></a></li>
<li><a href="#2"><span id="bordaD"></span>Games<span id="bordaE"></span></a></li>
<li><a href="#3"><span id="bordaD"></span>Detonados<span id="bordaE"></span></a></li>
<li><a href="#4"><span id="bordaD"></span>Voltar<span id="bordaE"></span></a></li>
</ul>
</body>
</html>

#42 William Bruno

Grupo: Moderadores
Posts: 5688
Cadastrado: 08-janeiro 08
Sexo:Masculino
Localização:São Paulo - SP

Postou 25 julho 2009 - 10:43

Avaliação Segundo Menu

Thiago Retondar

Quote

A solução apresentada funciona, mas teve que usar imagens, além de um .htc desnecessário.
O IE6 tem um problema em não reconhecer :hover em tags q não sejam a, isso não quer dizer, que ele não reconheça para nenhuma.
Não achei a solução 'muito limpa' por causa desses pontos.

~Tiu Talk~

Quote

A solução apresentada só funciona se o Javascript estiver habilitado.
O carregamento desnecessário do jQuery ainda acho que 'pesa', a idéia era que o menu aumentasse, mas nesse caso, apenas limita-se a criar as bordas. Código Javascript desnecessário.

XauDH

Quote

Na verdade, era 'bem simples', fazer funcionar no IE6, mas não houve essa preocupação nessa solução.
O uso do #menu li:hover, impede que funcione no navegador da M$.
No mais, a solução tava caminhando pra um lado muito bom.. 'quase lá'..

pslucasps

Quote

Não funciona no IE6. Um pouco suja a marcação, pelo uso de diversas DIVs para fazer os recortes. Se tivesse mudado o posicionamento de cada item do menu, para relative, conseguiria fazer o efeito dos recortes, com menos DIVs. Uma desvantagem dessa solução, é que ela depende muito do posicionamento do menu, não sendo por isso muito portável, já que se precisarmos colocar algum item acima do menu, as posições precisam ser recalculadas.

klonder

Quote

A solução ficou bacana, apesar do incomum uso de DIVs, onde geralmente preferimos UL LI..

Por favor, não me levem a mal. Não adianta eu comentar 'oque funciona' ^_^

a idéia do desafio, é que possamos aprender vendo diferentes maneiras de resolver uma situação.

Podemos debater as soluções apresentadas, e as avaliações, postem. E não se esqueçam do Terceiro Menu, já já coloco o Quarto Menu..

#43 Eliseu M.

Eliseu M.

Grupo: Membros
Posts: 211
Cadastrado: 05-julho 09
Localização:Praia Grande, SP

Postou 26 julho 2009 - 17:39

Nuss, brisei num negócio... coloquei 4px no padding do botão selected ao invés de 5 xD
Além disso, o meu corner border em CSS3 não funciona no IE o.O
Então... meu dou nota 8

Acho que o código do William Bruno está bom, mas fazer o botão ativo com JS acho que não foi legal. Além disso o CSS tá meio grandin.
O do Thiago tá perfeito, soube usar todos os seletores do CSS com perfeição.
O do klonder tá legal tbm.
Então, minhas notas:

Quote

Thiago - 10 (código perfeitamente indentado)
William - 7,5
Eliseu - 8 (por causa do padding que esqueci e por causa da compatibilidade)
klonder - 8,5

Até mais!

#44 klonder

Klonder

Grupo: Moderadores
Posts: 728
Cadastrado: 25-dezembro 06
Sexo:Masculino
Localização:Goiânia

Postou 26 julho 2009 - 18:23

Pessoal, eu não gostei da minha solução, mas foi o melhor que meus conhecimentos em CSS permitiram fazer. Lembrem-se que o link amarelo da página atual não funcionou no meu exemplo. Pensei em fazer isso em Javascript, capturando o valor da pagina atual na string (ex: www.pagina.com.br?pag=games). Mas isso deixaria o código muito grande!!!

Com PHP seria mais fácil, mas como o propósito não é esse, nem arrisquei, hehe!

Bom, como eu disse, eu consegui fazer o que meu conhecimento permitiu, pois creio que o importante aqui é, além de participar, aprender muito com os códigos dos colegas!

Excelente tópico! Estou aprendendo coisas que nunca sequer pensei que seriam possíveis apenas com CSS. O Bruno me surpreendeu realmente! Parabéns!

Abraços a todos!

#45 Kay_

Grupo: Membros
Posts: 85
Cadastrado: 29-junho 09

Postou 26 julho 2009 - 22:32

opa, como tou aprendendo css por agora, vou postar o que eu fiz. nem sei se ainda pode mais tá aí, hehe levem em consideração que sou nvoato em css. teh mais, aí so tem o do primeiro menu, depois eu faço os outros 2.

CODIGO PRIMEIRO 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">
	<head>
		<meta http-equiv="Content-Type" content="text/html; utf-8" />
		<title>Primeiro Menu por Kay_(victorwd)</title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
				list-style: none;
				text-decoration: none;
				color: black;
			}
			
			body {
				background: url(http://4.bp.blogspot.com/_6uelXRSeyRA/SXxcrvKPtiI/AAAAAAAAJwM/1-tODdGMMiU/s400/fear_2.jpg) no-repeat;
			}
			
			#menu {
				margin: 50px 50px;
			}
			
			li {
				width: 100px;
				height: 20px;
				background-color: white;
				border: #7d8764 solid 10px;
				margin-bottom: 5px;
				
			}
			
			li border {
				opacity:0.40;
				-moz-opacity: 0.40;
				filter: alpha(opacity=40);
			}
			
			.quadrado{
				position: absolute;
				width: 10px;
				height: 10px;
				background-color: white;
				top: -10px;
				left: -10px;
			}
			
			a {
				position: relative;
				display: block;
				width: 100px;
				height: 21px;
			}
			
			#menu a:hover {
				text-decoration: underline;
			}
			
			#menu a:hover .quadrado, #menu a:hover{
				background-color: #efba2c;
			}
 
.formatacao_texto {
	margin-left: 5px;
}
		</style>
	</head>
	<body>
		<div id="menu">
		<ul>
			<li><a href="#"><span class="quadrado"></span><span class="formatacao_texto">Home</span></a></li>
			<li><a href="#"><span class="quadrado"></span><span class="formatacao_texto">Game</span></a></li>
			<li><a href="#"><span class="quadrado"></span><span class="formatacao_texto">Dicas</span></a></li>
			<li><a href="#"><span class="quadrado"></span><span class="formatacao_texto">Voltar</span></a></li>
		</ul>
		</div>
	</body>
</html>

#46 William Bruno

Grupo: Moderadores
Posts: 5688
Cadastrado: 08-janeiro 08
Sexo:Masculino
Localização:São Paulo - SP

Postou 27 julho 2009 - 09:33

Eliseu M., em 26 julho 2009 - 17:39 , disse:

Acho que o código do William Bruno está bom, mas fazer o botão ativo com JS acho que não foi legal. Além disso o CSS tá meio grandin.

retira o JS, e você vai perceber que usei ele apenas, para fazer funcionar no IE6.

A minha solucao do item atual, deixou o CSS grande, pois se você notar, eh mais custoso a longo prazo, ter que marcar item por item do menu isoladamente, como "atual".
O trabalho de testar quem eh a pagina atual eu fiz com css. E normalmente vcs teriam que fazer com php, javascript ou outra linguagem server-side.
E isso deixara o codigo ainda maior.. mas ta tranquilo.. =) eu nao posso apresentar solucoes simples, hehe...

Uso o maximo de CSS, e um minimo de Javascript apenas para funcionar no IE6.

Opa... bacana @Kay_, adicionei a tua solucao.
Pode entregar os menus de repentes 'antigos' sim! Nao deixe de conferir as outras solucoes..

______________ sobre o Terceiro Menu:_____________
Oque eu nao 'gostei' de uma forma geral, foi o uso excessivo de marcacao que vcs utilizaram.
Apenas com o LI e o A, era possivel criar o menu, sem necessidade de criar spans, classes, ids.. o uso de CSS3 e codigos proprietarios, alem de nao validar no w3c, impede o funcionamento em browsers que nao entendem essas propriedades.
Nao ter identado o codigo nao quer dizer dizer que o teu css ficou 'menor' que o meu hein?! :assobiando:

CSS sprite eh uma tecnica tao boa e util, achei que mais alguem fosse utilizar, pois evita o delay de carregamento, na mudanca de estados do menu..
Acredito que a minha critica a solucao do Thiago eh a mesma. Uso desnecessario de spans vazios.
Deixando a marcacao mais pesada desnecessariamente. Alem do malabarismo de posicionar os cantos, e mandando uma imagem repetir, quando era bem mais simples apenas posicionar o outro canto.. por isso ateh que coloquei um item com largura diferente dos demais, para impedir o uso de uma unica imagem para todos(com os 2 cantos redondos).

#47 William Bruno

Grupo: Moderadores
Posts: 5688
Cadastrado: 08-janeiro 08
Sexo:Masculino
Localização:São Paulo - SP

Postou 27 julho 2009 - 23:39

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! :graduated:

Boa sorte à todos. :joia:

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)

#48 William Bruno

Grupo: Moderadores
Posts: 5688
Cadastrado: 08-janeiro 08
Sexo:Masculino
Localização:São Paulo - SP

Postou 03 agosto 2009 - 23:01

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....entecss/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.imaster...ost__p__1395636

#49 Thiago Retondar

Moderador Webstandards http://twitter.com/thiagoretondar

Grupo: Moderadores
Posts: 3700
Cadastrado: 04-março 08
Sexo:Masculino
Localização:São Paulo - SP

Postou 09 agosto 2009 - 17:27

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. :blink:

Comentem aí.

:thumbsup:

P.S.: Quem quiser pode entregar ainda.

#50 Detonador PHP

Grupo: Membros
Posts: 131
Cadastrado: 05-outubro 06
Sexo:Masculino
Localização:Porto Alegre

Postou 26 agosto 2009 - 22:46

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!

(2 Páginas)
1
2
→

Novo tópico
Responder

iMasters Fóruns: Repente CSS - [Menus] - iMasters Fóruns

Member Login

Repente CSS - [Menus] Desafios curtos.

1 usuário(s) está(ão) lendo este tópico 0 membro(s), 1 visitante(s) e 0 membros anônimo(s)

Skin e idioma

Execution Stats

1 usuário(s) está(ão) lendo este tópico
0 membro(s), 1 visitante(s) e 0 membros anônimo(s)