Repente CSS - [Menus]

William Bruno · Julho 18, 2009

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:

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

Imagem Postada

Segundo Menu

Imagem Postada

Terceiro Menu

Imagem Postada

Quarto Menu

Quinto Menu

Imagem Postada

Sexto Menu

Imagem Postada

Sétimo Menu Inicio: 15/05/2010

Imagem Postada

Oitavo Menu (inicio 29/05)

Imagem Postada

Nono Menu (início 25/06)

Imagem Postada

Décimo Menu (início 17/09)

Imagem Postada

Décimo Primeiro Menu (início 17/11)

http://wbruno.com.br/scripts/menu/11.png

Décimo Segundo Menu (início 09/04/12)

http://wbruno.com.br/scripts/menu/12.png

:lol: Décimo Terceiro Menu (início 14/05/13)

http://imageshack.us/a/img819/9763/capturadetela20130514as.png

William Bruno · Julho 18, 2009

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.com/_6uelXRSeyRA/SXxcrvKPtiI/AAAAAAAAJwM/1-tODdGMMiU/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! 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

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 http://forum.imasters.com.br/public/style_emoticons/default/graduated.gif ), 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.

Lucas Guima · Julho 18, 2009

Imagem Postada

-> 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 ]

William Bruno · Julho 18, 2009

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).

William Bruno · Julho 19, 2009

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">'>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">'>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.rafaelhonorio.com.br/menu/jquery.js
png.js
http://www.rafaelhonorio.com.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"> </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> </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">'>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.dillerdesign.com/experiment/DD_belatedPNG/DD_belatedPNG_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">'>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>

Lucas Guima · Julho 19, 2009

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

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

William Bruno · Julho 19, 2009

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

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.

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.

Thiago Retondar · Julho 19, 2009

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.

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:

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.

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

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

William Bruno · Julho 19, 2009

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

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

Aguardando: 1

Lucas Guima

Lucas Guima · Julho 19, 2009

Estado :link

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

Tá não... http://forum.imasters.com.br/public/style_emoticons/default/upset.gif

EDIT: Ah, no IE6... http://forum.imasters.com.br/public/style_emoticons/default/pinch.gif E deu certo o overflow, valeu! http://forum.imasters.com.br/public/style_emoticons/default/grin.gif

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

E realmente, tô saindo da Divmania agora. http://forum.imasters.com.br/public/style_emoticons/default/blush.gif

Gostei de ver várias maneiras e soluções! http://forum.imasters.com.br/public/style_emoticons/default/clap.gif

Bora pro próximo! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

William Bruno · Julho 19, 2009

Não entendi os tracinhos...

é 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á.

Thiago Retondar · Julho 19, 2009

@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.

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

Lucas Guima · Julho 19, 2009

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

Tô tentando deixar a Divmania... http://forum.imasters.com.br/public/style_emoticons/default/yay.gif

Thiago Retondar · Julho 19, 2009

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.

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

XauDH · Julho 19, 2009

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 http://forum.imasters.com.br/public/style_emoticons/default/grin.gif

Thiago Retondar · Julho 19, 2009

Esse desafio está sendo muito bom!

Estou começando à rever meus conceitos. O Bruno sabe do que estou falando. http://forum.imasters.com.br/public/style_emoticons/default/coolio.gif

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

pslucasps · Julho 19, 2009

@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 http://forum.imasters.com.br/public/style_emoticons/default/blush.gif Bom, deixa pra próxima. Estou ancioso pra ver como o pessoal solucionou essa.

Lucas Guima · Julho 19, 2009

Peço pra sair, preciso estudar mais essas listas muito loucas... http://forum.imasters.com.br/public/style_emoticons/default/pinch.gif

XauDH · Julho 19, 2009

Enviei o meu http://forum.imasters.com.br/public/style_emoticons/default/grin.gif

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

William Bruno · Julho 19, 2009

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

Arquivado

Repente CSS - [Menus]

Recommended Posts

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lucas Guima 164

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

Lucas Guima 164

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lucas Guima 164

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lucas Guima 164

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

XauDH 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

pslucasps 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lucas Guima 164

Compartilhar este post

Link para o post

Compartilhar em outros sites

XauDH 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501