Jump to content

Archived

This topic is now archived and is closed to further replies.

William Bruno

Repente CSS - [Menus]

Recommended Posts

Décimo Menu:


Imagem Postada

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

 

Décimo Menu:

 

Imagem Postada

 

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>

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Décimo Primeiro Menu:


Imagem Postada

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.

Share this post


Link to post
Share on other sites

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

Aqui a minha versão:

2a92zit.png

 

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

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Consegui :D

 

previewlmy.jpg

 

<!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;
}

Share this post


Link to post
Share on other sites

Décimo Segundo Menu:

 

12.png

 

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:

12-500px.png

 

 

Com menos de 320px de largura:

12-300px.png

 

 

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


Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

 

De qualquer forma, lá vai:

 

12preview.jpg

 

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

×

Important Information

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