Jump to content
William Bruno

Repente CSS - [Menus]

Recommended Posts

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!

Share this post


Link to post
Share on other sites

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. Edited by Mário Monteiro

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

Terceiro Menu:


Imagem Postada


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

Edited by Mário Monteiro

Share this post


Link to post
Share on other sites

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

Edited by Mário Monteiro

Share this post


Link to post
Share on other sites

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

Edited by Mário Monteiro

Share this post


Link to post
Share on other sites

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 Edited by Mário Monteiro

Share this post


Link to post
Share on other sites

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

 

^_^

Edited by Mário Monteiro

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

cantos.png
Imagem Postada
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 Edited by Mário Monteiro

Share this post


Link to post
Share on other sites

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.. Edited by Mário Monteiro

Share this post


Link to post
Share on other sites

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!

Edited by Mário Monteiro

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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

Edited by Mário Monteiro

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.