Repente CSS - [Menus]

William Bruno · Setembro 17, 2010

Décimo Menu:

Os efeitos, vcs podem criar como acharem melhor, com CSS puro, javascript, a(s) core(s)/imagens vcs terão que pegar do meu print, organizem ela(s), e façam os recortes como acharem melhor..
só lembrando das regras que citei, e que a elegância da solução vai contar na avaliação.
Dica:

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

Aguardando: 0

PS: Pra reanimar aqui.

Evandro Oliveira · Setembro 17, 2010

Mas não tá desanimado, só tá parado kkkk...

Estou reescrevendo os antigos em HTML5. Quem quiser acompanhar: http://www.evandrofranco.com.br/menus-imasters/

Quando terminar posto os códigos comentados.

Pablo RD · Setembro 29, 2010

Foi o que consegui fazer até agora, só não tive sucesso com a parte funcional:

Décimo Menu:

Imagem Postada

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

   "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

	<title>Décimo Menu</title>

	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

	<style type="text/css">

		*{margin:0;padding:0;font-family:arial, verdana, tahoma;}



		#menu {

			width:900px;

			height:110px;

			list-style:none;

			background-color:#d4d2d3;

			background-image:url('images/bg2.png');

			background-repeat:no-repeat;

			background-position:center;

			}



		#menu a {

			font-size:24px;

			text-decoration:underline;

			text-align:center;

			color:#524f4f;

			padding:41px 0;

			display:block;

			}



		#menu a:hover {

			text-decoration:none;

			color:white;

			background-color:#aaaaaa;

			background-image:url('images/bg3.png');

			background-position:100%;

			background-repeat:no-repeat;

			}



		#menu li {

			float:left;

			width:300px;

			}

  

	</style>

</head>

<body>



<div>

	<ul id="menu">

		<li><a href="#">Games</a></li>

		<li><a href="#">Dicas</a></li>

		<li><a href="#">Detonados</a></li>

	</ul>

</div>





</body>

</html>

William Bruno · Outubro 11, 2010

Soluções Décimo Menu

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 - Décimo Menu - Repente CSS [Menus]</title> 
<style type="text/css"> 
* { margin: 0; padding: 0; list-style: none; border: none; outline: none; }
body {
	font-family: 'Trebuchet Ms', Arial, Verdana, sans-serif;
	font-size: 13px;
	color: #777;	
	border-top: 5px solid #cf118c;
}
#nav {
	margin-top: 15px;
	height: 109px;
	background: url('rap.jpg') left top;
	text-indent: 0;
	width: 963px;
}
#nav li {
	float: left;
	width: 310px;
	text-align: center;
	margin-right: 10px;	
	padding-top: 35px;
}
#nav a {
	display: block;
	font-size: 30px;
	color: #524f4f;
	text-decoration: underline;
}
#nav a:hover {
	color: #fff;
	text-decoration: none;
}
</style>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#nav li").hover(
		function(){
			var position = $( this ).attr('id');
			$( this ).find('a').css({color: '#fff'});
			$("#nav").css({backgroundPosition: position});
		},
		function(){
			$( this ).find('a').css({color: '#524f4f'});
			$("#nav").css({backgroundPosition: 'left top'});			
		}
	);
});
</script>
</head>
<body>
	<ul id="nav">
		<li id="0px -109px"><a href="">Games</a></li>
		<li id="0px 220px"><a href="">Dicas</a></li>
		<li id="0px 109px"><a href="">Detonados</a></li>
	</ul><!-- /nav -->
</body>
</html>

imagem utilizada:

Imagem Postada

veja que apliquei um css sprite!

exatamente.. técnica já bem conhecida, mas pouco explorada. ^_^

Gostaria de ver outras soluções.. mas acredito que essa com sprite, seja a mais 'simples de implementar'.

William Bruno · Novembro 18, 2010

Décimo Primeiro Menu:

Os efeitos, vcs podem criar como acharem melhor mas usando CSS puro e imagens apenas, a(s) core(s)/imagens vcs terão que pegar do meu print, organizem ela(s), e façam os recortes como acharem melhor..
só lembrando das regras que citei, e que a elegância da solução vai contar na avaliação.
Dica:

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

William Bruno
brunobispo
JCMais - FLF

Aguardando: 1

T.Colucci

PS: Pra reanimar aqui.

JCMais · Janeiro 12, 2011

Bem, como tava aqui sem fazer nada, tentei fazer um.

Aqui a minha versão:

Testado no Chrome, Firefox, Opera e IEca 9Beta (sendo que neste, como sempre, não fica ideal).

Enviando para o Willian o Código Fonte

brunobispo · Janeiro 17, 2011

Segue a imagem do meu. Estou enviando o source pro Bruno.

PS.: Testei no Chrome, Firefox e no IE 6.

William Bruno · Janeiro 18, 2011

Códigos Décimo Menu

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 - Décimo Primeiro Menu - Repente CSS [Menus]</title>
<style type="text/css">
* { margin: 0; padding: 0; list-style: none; border: none; }
body {
font: 12px Tahoma;
}
a { text-decoration: none; }
a:hover { text-decoration: underline; }
#menu {
width: 205px;
margin: 40px;
}
#menu li {
background: url('bg-menu.png') no-repeat 1px bottom;
padding-bottom: 6px;
margin-bottom: 3px;
width: 195px;
}
#menu a {
width: 195px;
color: #fff;
display: block;
height: 42px;
line-height: 42px;
font-weight: bold;
font-size: 18px;
text-align: center;
}
#menu .home { margin-left: 10px; }
#menu .home a { background: #d2791d; }

#menu .game { margin-left: 2px; }
#menu .game a { background: #d19902; }

#menu .historia { margin-left: 8px; }
#menu .historia a { background: #d19902; }

#menu .dicas { margin-left: 0px; }
#menu .dicas a { background: #835620; }

#menu .estrategias { margin-left: 6px; }
#menu .estrategias a { background: #873d24; }

#menu .outras { margin-left: 12px;  }
#menu .outras a { background: #443c25; }

#menu .voltar { margin-left: 7px; }
#menu .voltar a { background: #5d3a11; }
</style>
</head>
<body>
<ul id="menu">
	<li class="home"><a href="#">Home</a></li> 
	<li class="game"><a href="">Game</a></li>
	<li class="historia"><a href="#">História</a></li> 
	<li class="dicas"><a href="#">Dicas e Detonados</a>
	<li class="estrategias"><a href="#">Estratégias</a></li> 
	<li class="outras"><a href="#">Outras</a></li>
	<li class="voltar"><a href="#">Voltar</a></li> 
</ul><!-- /menu --> 
</body>
</html>

bg-menu.png

brunobispo

<!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>
	<title>Décimo Primeiro Menu</title>
	<link rel="stylesheet" type="text/css" media="screen" href="css/menu.css" />
	<meta name="author" content="Bruno Bispo" />
	<meta name="reply-to" content="me@brunobispo.com" />
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<meta http-equiv="content-language" content="pt-br" />
	<meta name="robots" content="index,follow" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
</head>
<body>
	<ul id="menu">
		<li id="im1"><a href="#">Home</a></li>
		<li id="im2"><a href="#">Game</a></li>
		<li id="im3"><a href="#">História</a></li>
		<li id="im4"><a href="#">Dicas e Detonados</a></li>
		<li id="im5"><a href="#">Estratégias</a></li>
		<li id="im6"><a href="#">Outras</a></li>
		<li id="im7"><a href="#">Voltar</a></li>
	</ul>
</body>
</html>

menu.css

body {
margin: 0;
}

#menu {
margin: 40px 40px;
padding: 0;
list-style: none;
font: bold 18px Tahoma;
}

#menu a {
display: block;
padding: 10px 0;
width: 195px;
text-align: center;
text-decoration: none;
color: #fff;
}

#menu li {
display: block;
padding: 0 0 6px 0;
margin: 0 0 3px 0;
width: 195px;
background: #ccc url(../images/sombra.png) no-repeat bottom;
}

#menu #im1 {
margin-left: 10px;
background-color: #d2791d;
}

#menu #im2 {
margin-left: 2px;
background-color: #d19902;
}

#menu #im3 {
margin-left: 8px;
background-color: #d19902;
}

#menu #im4 {
background-color: #835620;
}

#menu #im5 {
margin-left: 6px;
background-color: #873d24;
}

#menu #im6 {
margin-left: 12px;
background-color: #443c25;
}

#menu #im7 {
margin-left: 7px;
background-color: #5d3a11;
}

sombra.png

JCMais - FLF

<!DOCTYPE html>
<head>

       <title>JCM | 10Primeiro Menu</title>

       <style type="text/css">
       body * {
               font-family:Verdana, Geneva, sans-serif;
               font-size:15px;
               font-weight:bold;
               margin:0;
               padding:0;
       }
       #menu {
               display: block;
               margin-left:10px;
               width:250px;
       }
       #menu > a {
               background-color: #873d24;
               color:#FFF;
               display:inline-block;
               height:18px;
               margin: 5px auto;
               outline:none;
               padding:10px 5px;
               text-decoration:none;
               text-align:center;
               width:210px;
               position:relative;
       }
       #menu > a:hover {
               color:#3FF;
       }       
       #menu > a:after {
               -moz-box-shadow: rgba(218, 197, 189, 0.699219) 2px 13px 0px;-webkit-box-shadow: rgba(218, 197, 189, 0.699219) 2px 13px 0px;box-shadow: rgba(218, 197, 189, 0.699219) 2px 13px 0px;
               -moz-transform: rotate(2deg) skew(0deg);-o-transform: rotate(2deg) skew(0deg);-webkit-transform: rotate(2deg) skew(0deg);transform: rotate(2deg) skew(0deg);
               background: transparent;
               bottom: 10px;
               content: '';
               height: 100%;
               position: absolute;
               right: 8px;
               width: 80%;
               z-index: -2;
       }       
       #menu > a:nth-child(even){margin-left:-6px;}
       #menu > a:nth-child(-n+3){background-color:#d19902}
       #menu > a:nth-last-child(2){background-color:#443c25;margin-left:6px;}
       #menu > a:nth-last-child(4){background-color:#835620}
       #menu > a:first-child {background-color:#d2791d}
       #menu > a:last-child {background-color: #5d3a11}
       </style>
</head>
<body>
       <nav id="menu">
               <a href="#">Home</a>
               <a href="#">Game</a>
               <a href="#">História</a>
               <a href="#">Dicas e Detonados</a>
               <a href="#">Estratégias</a>
               <a href="#">Outras</a>
               <a href="#">Voltar</a>
       </nav>
</body>
</html>

http://forum.lucrafacil.com/decimo_primeiro_menu.html

Malan Dev · Fevereiro 18, 2011

menu.html

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" type="text/css" href="css_menu.css" />

<title>Documento sem título</title>
</head>

<body>
<div id="menu">
	<ul>
       	<li><a href="#" title="menu1"> menu1 </a></li>
           <li><a href="#" title="menu2"> menu2 </a></li>
           <li><a href="#" title="menu3"> menu3 </a></li>
           <li><a href="#" title="menu5"> menu4 </a></li>        
       </ul>
</div>
</body>
</html>

css_menu.css

@charset "utf-8";
/* CSS Document */

#menu{ width:300px; height:auto; margin:20px 0 0 0; font-family:Arial, Helvetica, sans-serif;} 
#menu ul { width:100%;}
#menu ul li { display:inline; list-style:none; padding:0 10px;}
#menu ul li a{ text-decoration:none; color:#006;}
#menu ul li:hover{ background:#EEE;}

basico mais muito util e de fácil manuseio =D

Pablo RD · Março 24, 2012

Consegui :D

<!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>
<title>Repente CSS iMasters - Décimo Primeiro Menu</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css.css" />
</head>
<body>

<div id="container">
<div id="menu">
	<ul>
		<li id="Home"><a href="#">Home</a></li>
		<li id="Game"><a href="#">Game</a></li>
		<li id="Historia"><a href="#">História</a></li>
		<li id="DicaseDetonados"><a href="#">Dicas e Detonados</a></li>
		<li id="Estrategias"><a href="#">Estratégias</a></li>
		<li id="Outras"><a href="#">Outras</a></li>
		<li id="Voltar"><a href="#">Voltar</a></li>
	</ul>
</div>
</div>

</body>
</html>

*{margin:0;padding:0;font-family:tahoma, sans-serif;}

#menu {
display: block;
width: 207px;
height: 354px;
margin-top: 40px;
margin-left: 40px;
float: left;
}

#menu li {
width: 195px;
height: 48px;
list-style: none;
background-image: url('shadow.jpg');
background-repeat: no-repeat;
background-position: bottom;
margin-bottom: 3px;
}

#menu a {
text-decoration: none;
display: block;
width: 195px;
height: 30px;
color: white;
font-size: 18px;
font-weight: bold;
text-align: center;
padding-top: 12px;
}

#menu a:hover {
text-decoration: underline;
}

#Home {
background-color: #d2791d;
margin-left: 10px;
}

#Game {
background-color: #d19902;
margin-left: 2px;
}

#Historia {
background-color: #d19902;
margin-left: 8px;
}

#DicaseDetonados {
background-color: #835620;
margin-left: 0px;
}

#Estrategias {
background-color: #873d24;
margin-left: 6px;
}

#Outras {
background-color: #443c25;
margin-left: 12px;
}

#Voltar {
background-color: #5d3a11;
margin-left: 7px;
}

William Bruno · Abril 10, 2012

Décimo Segundo Menu:

Os efeitos, vcs podem criar como acharem melhor. As cores vcs terão que pegar do meu print.

Só lembrando das regras que citei, e que a elegância da solução vai contar na avaliação.

Dica:

A primeira foto é do menu em um Desktop. Nos 3 estados:

Normal, MouseOver e Ativo(mouse clicando)

Com 500px de largura:

Com menos de 320px de largura:

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

Boa sorte à todos. :joia:

Menus Entregues: 7 (até o momento)

William Bruno
Fernando Kracheski
João Batista Neto
brunobispo
Evando Oliveira
angelorubin
Gilson Fabiano

Aguardando: 0

FK. · Abril 10, 2012

Não entendi o décimo segundo menu.

São dois menus ? E as cores, eu pego de qual print ? Quando redimensiono o navegador o estilo da borda muda de quadrado pra arredondado ?

Vlw

William Bruno · Abril 10, 2012

São dois menus ?

não, é um único menu.

E as cores, eu pego de qual print ?

pegue do primeiro print.

Quando redimensiono o navegador o estilo da borda muda de quadrado pra arredondado ?

sim, exatamente.

FK. · Abril 10, 2012

Bom, vou postar o meu aqui, acho que ta um pouco fora do padrão e com bastante javascript. Mas fazer com css puro é muito dificil e talvez apenas pra dar estilo.. xD

Sei lá, não entendi muito bem esse menu, mas vou postar aqui...

Era pra mudar a cor no mouseover e no mouseactive certo ? E quando estiver com a largura menor que 330 a borda fica arredondada e largura maior que isso fica quadrada. Eu fiz isso, mas tem um pequeno bugzinho no firefox, opera e safari, então resolvi isso no javascript ali. :D

<!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" xml:lang="pt-br">
   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
       <title>Décimo segundo menu - iMasters</title>
       <style type="text/css">
           * { padding: 0; } /* Não usei margin para ficar igual ao exemplo */
           body { font-family: Arial, sans-serif; }
           #wrapper { width: 535px; }
           li { padding: 10px 15px; margin-bottom: 2px; display: inline; cursor: pointer; list-style: none; border: 1px solid black; }   
           a { color: black; text-decoration: none; }
           .liMouseOver { border: 1px solid #00ceff; position: relative; top: 5px; }
           .aMouseOver { color: #00ceff; text-decoration: underline; }
           .liMouseActive { border: 1px solid #ffce00; position: relative; top: 5px; }
           .aMouseActive { color: #ffce00; text-decoration: underline; }
       </style>
       <script type="text/javascript">
           //<![CDATA[
               window.onload = function() { 
                   var li = document.getElementsByTagName('li');                    
                   window.onresize = function() {
                       if(navigator.appName = 'Netscape') { // Para firefox, opera e safari...
                           if(document.body.clientWidth <= 380)                            
                               for(var i = 0; i < li.length; i++)
                                   li[i].style.borderRadius = '5px';
                           else
                               for(var i = 0; i < li.length; i++)
                                   li[i].style.borderRadius = '0px';
                       }
                       else // IE 9 e Google Chrome, não sei se funega para IE -9.
                           if(document.body.clientWidth <= 330)                            
                               for(var i = 0; i < li.length; i++)
                                   li[i].style.borderRadius = '5px';
                           else
                               for(var i = 0; i < li.length; i++)
                                   li[i].style.borderRadius = '0px';

                   };
                   for(var i = 0; i < li.length; i++) {
                       li[i].onmouseover = function() {
                           this.className = 'liMouseOver';
                           this.firstChild.className = 'aMouseOver';
                       };
                       li[i].onmouseout = function() {
                           this.className = '';
                           this.firstChild.className = '';
                       }
                       li[i].onmousedown = function() {
                           this.className = 'liMouseActive';
                           this.firstChild.className = 'aMouseActive';
                       };
                       li[i].onmouseup = function() {
                           this.className = 'liMouseOver';
                           this.firstChild.className = 'aMouseOver';
                       };
                   }
               };
           //]]>
       </script>
   </head>
   <body>
       <div id="wrapper">
           <ul id="menu">
               <li><a href="#">Home</a></li>
               <li><a href="#">Game</a></li>
               <li><a href="#">História</a></li>
               <li><a href="#">Dicas e Detonados</a></li>
               <li><a href="#">Estratégias</a></li>
           </ul>
       </div>
   </body>
</html>

Aposto que o meu deve ser o pior :(

William Bruno · Abril 11, 2012

Aposto que o meu deve ser o pior :(

não preocupa com isso cara =)

a idéia do desafio, é vermos várias formas diferentes de se resolver um "problema".

Logo mais, assim que tiver pelo menos mais 2 respostas, eu posto a minha solução desse menu.

João Batista Neto · Abril 11, 2012

Minha versão do menu, não usei nenhuma linha de Javascript.

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>Repente CSS</title>
	<style type="text/css">
		/**
		 * Comum para todas as resoluções
		 */
		html, * {
			font-family: Helvetica, sans-serif;
			margin: 0;
			padding: 0;
		}

		.menu li { list-style: none; }
			.menu li a {
				padding: 10px 15px;
				border: 1px solid #000;
				text-decoration: none;
				color: #000;
			}
				.menu li a:hover {
					border-color: #00CEFF;
					color: #00CEFF;
					text-decoration: underline;
				}

				.menu li a:active {
					color: #FFCE00;
					border-color: #FFCE00;
				}

		/**
		 * Específico para telas com no mínimo 501 pixels de largura 
		 */
		@media screen and (min-width: 501px) {
			body { padding: 20px; }
			.menu li { float: left; }
			.menu li:not(:first-child) { margin-left: 3px; }
				.menu li a {
					display: inline-block;
					-moz-transition: all 300ms ease-out;
					-webkit-transition: all 300ms ease-out;
					transition: all 300ms ease-out;
				}
					.menu li a:hover { margin-top: 4px; }
		}

		/**
		 * Específico para telas com no máximo 500 pixels de largura 
		 */
		@media screen and (max-width: 500px) {
			body { padding: 10px; }
			.menu li:not(:first-child) { margin-top: 3px; }
				.menu li a { display: block; } 
		}

		/**
		 * Específico para telas com no máximo 300 pixels de largura 
		 */
		@media screen and (max-width: 319px) {
			.menu li a {
				border-radius: 4px;
				-moz-border-radius: 4px;
				-webkit-border-radius: 4px;
			}
		}
	</style>
</head>
<body>
	<ul class="menu">
		<li><a href="#home">Home</a></li>
		<li><a href="#game">Game</a></li>
		<li><a href="#historia">História</a></li>
		<li><a href="#dicas-e-detonados">Dicas e Detonados</a></li>
		<li><a href="#estrategias">Estratégias</a></li>
	</ul>
</body>
</html>

FK. · Abril 11, 2012

Nossa cara, você me humilhou, já to no chinelo koaSEkoase

Isso é CSS 3 certo ???

Vou estudar CSS3 urgente !!

Uma vez enviado o código já era ?

Só agora que peguei o código do João Batista Neto que fui entender como funciona esse menu AEasuheau

brunobispo · Abril 11, 2012

Eu fiz um ontem, mas não tenho certeza se deveria postar aqui ou mostrar para o William.

De qualquer forma, lá vai:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Décimo Segundo Menu</title>
	<style type="text/css">
		body {
			margin: 20px;
		}			

		.main-nav ul {
			list-style: none;
			padding: 0;
		}

		.main-nav a {
			display: block;
			padding: 10px 13px;
			float: left;
			margin: 1px;
			border: 1px solid #464b4b;
			font-family: Tahoma, sans-serif;
			text-decoration: none;
			font-size: 12px;
			color: #464b4b;
		}

		.main-nav a:hover,
		.main-nav a:active {
			position: relative;
			top: 3px;
			color: #00ceff;
			border-color: #00ceff;
			text-decoration: underline;
		}

		.main-nav a:active {
			color: #ffce00;
			border-color: #ffce00;
		}

		@media screen and (max-width: 500px) {
			body {
				margin: 10px;
			}	

			.main-nav a {
				margin: 2px;
				float: none;
			}

			.main-nav a:hover,
			.main-nav a:active {
				float: none;
				top: 0;
				left: 3px;
			}
		}

		@media screen and (max-width: 320px) {				
			.main-nav a {
				border-radius: 5px;
			}
		}
	</style>
</head>
<body>
	<nav class="main-nav">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">Game</a></li>
			<li><a href="#">História</a></li>
			<li><a href="#">Dicas e Detonados</a></li>
			<li><a href="#">Estratégias</a></li>
		</ul>
	</nav>
</body>
</html>

FK. · Abril 11, 2012

Aff, eu sou muito burro, esqueci da propriedade padding do elemento 'a', e fiquei manipulando dois elementos: 'li' e 'a'.

Todo mundo fez assim, só eu que fiz essa coisa horrível :(

angelorubin · Abril 12, 2012

Boa tarde,

Minha contribuição com o desafio e parabéns a todos que participam.

CSS

@media screen and (max-width: 500px) {

#menu li {
       width:93%;
       float:none;
       padding:8px 14px 8px 14px;
       list-style:none;
       border:1px solid #464b4b;
 }

}

@media screen and (max-width: 320px) {

#menu li {
       width:89%;
float:none;
padding:8px 14px 8px 14px;
list-style:none;
border:1px solid #464b4b;
border-radius:5px;
-o-border-radius: 5px;
-moz-border-radius: 5px; /* Firefox */
       -webkit-border-radius: 5px; /* Safari, Chrome */
    }	

}

* {
margin:0;
padding:0;
}

#menu {
margin:2px;
padding:2px;
overflow:hidden;
}

#menu li {
float:left;
margin:1px;
padding:8px 14px 8px 14px;
list-style:none;
border:1px solid #464b4b;
}

#menu li:hover {
border: 1px solid #00D4FF;
position:relative;
top: 2px;
}

#menu li:hover a {
color: #00D4FF;
text-decoration:underline;
}

#menu li:active {
border:1px solid #FFCE00;
}

#menu li:active a {
color:#FFCE00;
}

#menu a {
color:#464B4B;
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
text-decoration:none;
}

#menu a:hover {
color:#00CEFF;
}

#menu a:active {
color:#FFD400;
}

XHTML

<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Game</a></li>
<li><a href="#">História</a></li>
<li><a href="#">Dicas e Detonados</a></li>
<li><a href="#">Estratégias</a></li>
</ul>

Arquivado

Repente CSS - [Menus]

Recommended Posts

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Evandro Oliveira 331

Compartilhar este post

Link para o post

Compartilhar em outros sites

Pablo RD 5

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

JCMais 75

Compartilhar este post

Link para o post

Compartilhar em outros sites

brunobispo 20

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

Malan Dev 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Pablo RD 5

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

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

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

João Batista Neto 448

Compartilhar este post

Link para o post

Compartilhar em outros sites

FK. 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

brunobispo 20

Compartilhar este post

Link para o post

Compartilhar em outros sites

FK. 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

angelorubin 142