Repente CSS - [Menus]

Thiago Retondar · Julho 19, 2009

O XauDH enviou para mim. ;)

Vou adicionar lá.

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

pslucasps · Julho 20, 2009

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

Imagem Postada

klonder · Julho 20, 2009

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!

Thiago Retondar · Julho 20, 2009

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

Thiago Retondar · Julho 20, 2009

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

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

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

Gui.BAR · Julho 20, 2009

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

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

William Bruno · Julho 20, 2009

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

Thiago Retondar
William Bruno
Eliseu M.
klonder

Aguardando: 0

Thiago Retondar · Julho 20, 2009

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

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

Ficou mesmo! Nem tinha pensado nisso. ^^

Eliseu M. · Julho 21, 2009

Opa, o meu tá entregue =D

Thiago Retondar · Julho 22, 2009

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

Eliseu M. · Julho 22, 2009

É... 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 :D Pq IE é um porre xD

klonder · Julho 22, 2009

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

Pow cara, valew! Eu sinceramente, aprendi muito com esse tópico!!! Obrigado pelo incentivo! http://forum.imasters.com.br/public/style_emoticons/default/bye1.gif

Thiago Retondar · Julho 22, 2009

É... 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 :D Pq IE é um porre xD

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

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

Pow cara, valew! Eu sinceramente, aprendi muito com esse tópico!!! Obrigado pelo incentivo! http://forum.imasters.com.br/public/style_emoticons/default/bye1.gif

^_^

William Bruno · Julho 23, 2009

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

William Bruno · Julho 25, 2009

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

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

William Bruno · Julho 25, 2009

Avaliação Segundo Menu

Thiago Retondar

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~

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

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

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

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

Eliseu M. · Julho 26, 2009

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

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:

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!

klonder · Julho 26, 2009

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!

Kay_ · Julho 27, 2009

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>

William Bruno · Julho 27, 2009

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

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

Arquivado

Repente CSS - [Menus]

Recommended Posts

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

klonder 14

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

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gui.BAR 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

Eliseu M. 2

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

Eliseu M. 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

klonder 14

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

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

Eliseu M. 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

klonder 14

Compartilhar este post

Link para o post

Compartilhar em outros sites

Kay_ 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501