Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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:
/applications/core/interface/imageproxy/imageproxy.php?img=http://img515.imageshack.us/img515/6712/primeiromenu.jpg&key=0c95f56336b3fa15286e3a26289da9783b1eeb533fd9eb27c9805c39d6118738" alt="Imagem Postada" />
/applications/core/interface/imageproxy/imageproxy.php?img=http://img174.imageshack.us/img174/1262/segundomenu.jpg&key=25f95fb030cc5cf9dd1e585949eb732a5e5ff6fbd0ed10c1e9b2b3ddd6c33e56" alt="Imagem Postada" />
/applications/core/interface/imageproxy/imageproxy.php?img=http://img525.imageshack.us/img525/4313/terceiromenu.png&key=d94f143675b1252948818727e3c59f65b275957499acf8457b543910e2dd3643" alt="Imagem Postada" />
/applications/core/interface/imageproxy/imageproxy.php?img=http://wbruno.com.br/scripts/menu/quarto.png&key=2dc710a6d3cf28491456265d39d9599d2d98573a0ad2d4ac48d4b74a524e5b65" alt="Imagem Postada" />
/applications/core/interface/imageproxy/imageproxy.php?img=http://img395.imageshack.us/img395/3339/quintomenu.png&key=6831159d8d9abc60b9aa4019e32224b31efc761c0f3f5c720bbca8689020dca5" alt="Imagem Postada" />
/applications/core/interface/imageproxy/imageproxy.php?img=http://img341.imageshack.us/img341/905/quintomenudetalhes.jpg&key=ccbe3371a1f5e34e2d19d4a64d5f349134e284c44e0c0b5c54dfe11571255de0" alt="Imagem Postada" />
Sétimo Menu Inicio: 15/05/2010
/applications/core/interface/imageproxy/imageproxy.php?img=http://img132.imageshack.us/img132/3489/setimomenu.jpg&key=645b3e0a1cdd28c67d962ce4e812fc7d4ce6fe87a9f241c1225078c37a9ecece" alt="Imagem Postada" />
Oitavo Menu (inicio 29/05)
/applications/core/interface/imageproxy/imageproxy.php?img=http://img248.imageshack.us/img248/7237/oitavomenu.jpg&key=b3d9fb4535b1da3c28221945ebe0a1e9ace657ee0833ef4cde2524478feaa683" alt="Imagem Postada" />
Nono Menu (início 25/06)
/applications/core/interface/imageproxy/imageproxy.php?img=http://img717.imageshack.us/img717/3175/nonomenu.png&key=dfdfcc7812a898ad593d6368e42c19e398306c9981511951555fa591d0645052" alt="Imagem Postada" />
Décimo Menu (início 17/09)
/applications/core/interface/imageproxy/imageproxy.php?img=http://img837.imageshack.us/img837/6695/decimo.png&key=c7f870787a21f81a7ab95ceaa13aef942863462fa57259158220d140e5e5c251" alt="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
/applications/core/interface/imageproxy/imageproxy.php?img=http://www.picpanda.com/images/78tgvfyp8lpto17jl4w.jpg&key=d9a6bf18b2553b1efa500716f1912e50b6f92db1d3302b3372ac69822e4e32d9" alt="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 ]
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).
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"](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> background: url([http://4.bp.blogspot.com/_6uelXRSeyRA/SXxcrvKPtiI/AAAAAAAAJwM/1-tODdGMMiU/s400/fear_2.jpg](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;
} color: #000;
cursor: hand;
} color: #000;
cursor: hand;
} color: #682800;
cursor: hand;
} 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"](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">#menu {
background:url('http://www.rafaelhonorio.com.br/menu/imgs/bg.jpg');
width:400px;
height:300px;
position:absolute;
} margin:50px 0 0 50px;
padding:0;
list-style:none;
} line-height:45px;
text-indent:15px;
} background:url('http://www.rafaelhonorio.com.br/menu/imgs/menu.png');
width:120px;
height:45px;
margin:5px;
text-decoration:none;
color:#000;
display:block;
} 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">](http://www.rafaelhonorio.com.br/menu/jquery.js)
<script type="text/javascript" src="[http://www.rafaelhonorio.com.br/menu/png.js">](http://www.rafaelhonorio.com.br/menu/png.js)
<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>klonder
primeiroMenu.html
<html>
<head>
</head>
<style type="text/css">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"](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](http://4.bp.blogspot.com/_6uelXRSeyRA/SXxcrvKPtiI/AAAAAAAAJwM/1-tODdGMMiU/s400/fear_2.jpg)) no-repeat;
color: #fff;
} list-style: none;
width: 120px;
height: 195px;
margin: 50px 0 0 50px;
} width: 120px;
height: 45px;
margin: 0 0 5px 0;
background: url(backgroundLi.png) repeat;
} width: 95px;
height: 22px;
color: #000;
background: #fff;
margin: 10px 0 0 10px;
padding: 0 0 0 5px;
font-size: 16px;
float: left;
} width: 10px;
height: 10px;
background: #fff;
margin: -10px 0 0 -15px;
float: left;
} background: #EFBA2C;
color: #682B0F;
}
</style>
</head>
<body>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"](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;
} background: url('bgLi.png');
height: 25px;
line-height: 22px;
width: 100px;
padding: 10px;
margin-bottom: 5px;
position: relative;
} color: #000;
background: #fff;
display: block;
text-decoration: none;
padding-left: 10px;
overflow: hidden;
} color: #672912;
text-decoration: underline;
background: #efba2c;
display: block;
} background: #efba2c;
} background-color: #fff;
display: block;
position: absolute;
height: 10px;
width: 10px;
top: 0;
left: 0;
overflow: hidden;
}
</style> 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></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>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"](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](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>Curti essa... nem me liguei em fazer com lista. :P
Como vai fazer a avaliação? Podia colocar todos pra rodar, pra todos verem.
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 :linkLucas 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.
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
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;Aguardando: 1
>
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
>
Não entendi os tracinhos...
é que você já tinha errado o estado :link, então não tinha com acertar o :hoverA idéia é fazer aparecer o underline, e não que ele fique constante lá.
@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
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
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
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
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
@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.
Peço pra sair, preciso estudar mais essas listas muito loucas... http://forum.imasters.com.br/public/style_emoticons/default/pinch.gif
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
>
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 ..
O XauDH enviou para mim. ;)
Vou adicionar lá.
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
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 http://forum.imasters.com.br/public/style_emoticons/default/cry.gif
/applications/core/interface/imageproxy/imageproxy.php?img=http://img182.imageshack.us/img182/7805/menu2x.jpg&key=f0a0ef3b762cc97716f5859dfbc7b66657554a8adea4ad91127fa60540b0d33d" alt="Imagem Postada" />
>
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!
Que bom que aprendeu! Eu também estou revendo meus conceitos. muito bom mesmo! http://forum.imasters.com.br/public/style_emoticons/default/clap.gif
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;
}list-style: none;
height: 50px;
width: 540px;
}float: left;
margin: 20px 0 0 20px;
width: 110px;
height: 50px;
text-align: center;
cursor: pointer;
display: inline;
}background: #FFFF01;
color: #FD0200;
display: block;
padding: 11px 0;
margin: 5px;
font-size: 16px;
}color: #FFFF01;
background: none;
}background: url(backgroundLi.gif);
}
</style> <style type="text/css">
body { behavior:url(csshover.htc); }
</style></head>
<body>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">'>[http://www.w3.org/1999/xhtml"](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"](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"](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"](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;
} margin-top: 20px;
} margin-left: 20px;
background-color: #ff0;
width: 100px;
height: 40px;
float: left;
position: relative;
} color: #f00;
display: block;
width: 100px;
height: 30px;
text-align: center;
padding-top: 10px;
text-decoration: underline;
} color: #ff0;
background: #f00;
height: 40px;
padding: 0;
width: 110px;
position: absolute;
left: -5px;
cursor: hand;
text-decoration: none;
} 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">'>[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 - Menu2</title>
<style type="text/css">margin:0;
padding:0;
}
#menu {
margin:0;
padding:0;
list-style:none;
}background:#ff0;
width:100px;
height:40px;
margin:10px;
line-height:40px;
text-align:center;
color:#F00;
float:left;
display:block;
}background:#f00;
width:110px;
margin:10px 5px 10px 5px;
text-decoration:none;
color:#ff0;
}background:#F00;
width:100px;
height:40px;
line-height:40px;
margin:0 auto;
margin-top:-5px;
}display:block;
color:#F00;
}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"](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>*
{
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"](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">#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> [http://forum.imasters.com.br/public/style_emoticons/](http://forum.imasters.com.br/public/style_emoticons/)default/thumbsup.gifP.S.: Mais tarde, eu ou o Bruno, postaremos as análises.
Não tô tendo tempo de participar disso. Mas queria mto!
Putz.. a solução do Willian Bruno pro menu 2 ficou fantástica.
Primeiro Menu:
Vamos lá... o menu com o efeito que quero, só pra esquentar é este:
/applications/core/interface/imageproxy/imageproxy.php?img=http://img515.imageshack.us/img515/6712/primeiromenu.jpg&key=0c95f56336b3fa15286e3a26289da9783b1eeb533fd9eb27c9805c39d6118738" alt="Imagem Postada" />
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
Aguardando: 1
- Ehtnies
Depois de um tempo, eu posto o meu código que gerou a imagem do menu com o efeito que pedi.