Ir para conteúdo
William Bruno

Repente CSS - [Menus]

Recommended Posts

Ta lá!

 

index.html

 

<!DOCTYPE HTML>
<html lang="pt-BR">
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script type="text/javascript" src="http://static.localhost/lib/js/html5shiv.js"></script>
       <link rel="stylesheet" href="http://static.localhost/lib/css/reset.css">
       <link rel="stylesheet" href="http://static.localhost/imasters/forum/menus/html5/12/estilos.css">
       <!--[if lt IE 9]>
       <link rel="stylesheet" href="ie.css">
       <script type="text/javascript" src="http://static.localhost/lib/js/css3-mediaqueries.js"></script>
       <![endif]-->
   </head>
   <body>
       <nav id="main">
           <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>

 

 

html5shiv: https://github.com/aFarkas/html5shiv

reset.css: http://meyerweb.com/eric/tools/css/reset/

 

estilos.css

 

#main {
   margin: 20px;
}

#main li {
   font: 12px Geneva, Tahoma, Verdana, sans-serif;
   float: left;
   list-style: none;
   margin: 0 2px 2px 0;
}

#main a {
   border: 1px solid #464b4b;
   color: #464b4b;
   display: inline-block;
   text-align: center;
   text-decoration: none;
   padding: 10px 15px;
}

#main a:hover {
   border-color: #04cfff;
   color: #04cfff;
   margin-top: 3px;
}

#main a:active {
   border-color: #ffd455;
   color: #ffd455;
}

@media all and (max-width: 500px) {
   #main li {
       float: none;
   }

   #main a {
       display: block;
       text-align: left;
   }
}

@media all and (max-width: 320px) {
   #main a {
       border-radius: 5px;
   }
}

 

 

ie.css

 

@media all and (max-width: 500px) {
   #main li {
       float: none;
   }

   #main a {
       display: block;
       text-align: left;
   }
}

@media all and (max-width: 320px) {
   #main a {
       border-radius: 5px;
       behavior: url('/lib/htc/PIE_uncompressed.htc');
   }
}

 

 

css3-mediaqueries.js: http://code.google.com/p/css3-mediaqueries-js/

 

 

Testado em Opera12, Chrome19, Firefox11, IE9, 7 e 6

Editado por Evandro Oliveira
  • +1 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Soluções Décimo Segundo Menu:

 

William Bruno

<!DOCTYPE html>
<html dir="ltr" lang="pt-BR">
<head>
<title>William Bruno - Décimo Segundo Menu</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />

<style type="text/css">
* { margin: 0; padding: 0; list-style: none; border: none; }

body { font-size: 12px; font-family: Tahoma, Helvetica, sans-serif; min-width: 300px; }

a { text-decoration: none; color: #4b4d4d; }
a:hover { text-decoration: underline; }

nav { margin: 20px 0 0 20px; }
nav a {
	float: left;
	padding: 10px 15px;
	border: 1px solid;
	border-color: currentColor;
	margin-right: 2px;
	-webkit-transition: all 150ms linear;
	-moz-transition: all 150ms linear;
	-o-transition: all 150ms linear;
	transition: all 150ms linear;
}
nav a:last-child { margin-right: 0; }
nav a:hover { 
	color: #00ccff;
	margin-top: 3px; 
	-webkit-transition: all 150ms linear;
	-moz-transition: all 150ms linear;
	-o-transition: all 150ms linear;
	transition: all 150ms linear;
}
nav a:active { color: #ffcc00; } 
@media only screen and (max-width: 500px){
	nav { margin: 10px 10px 0 10px; }
	nav a { float: none; display: block; margin: 0 0 2px 0; }
	nav a:hover { margin-top: 0; }
}
@media only screen and (max-width: 320px){
	nav a { border-radius: 5px;  }
}		
</style>
<!--[if lt IE 9]>
<script type="text/javascript" src="modernizr.js"></script>
<style type="text/css">nav a { border-color: #4b4d4d; }nav a:hover { border-color: #00ccff; }nav a:active { border-color: #ffcc00; }</style>
<![endif]-->
</head>
<body>
<nav>
	<a href="#">Home</a>
	<a href="#">Game</a>
	<a href="#">História</a>
	<a href="#">Dicas e Detonados</a>
	<a href="#">Estratégias</a>
</nav><!-- /nav -->
</body>
</html>

Compartilhar este post


Link para o post
Compartilhar em outros sites
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
   @media all and (max-width: 300px) {
       #menu li a {-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 15px; display: block;}
   }
   @media all and (max-width: 500px) {
       #menu li a {display: block; margin-bottom: 5px;}
   }
   #menu{padding:0;display:block; margin-top: 15px;}
   #menu li { display: inline; list-style: none;}
   #menu li a { color: black; text-decoration: none; padding: 15px; border: 1px solid black; }
   #menu li a:hover,#menu li a:active { border: 1px solid #00ceff; color: #00ceff; position: relative; top: 5px; text-decoration: underline;}
   #menu li a:active { border-color:#ffce00; color: #ffce00;}
</style>
</head>
<body>
<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>
</body>
</html>

Compartilhar este post


Link para o post
Compartilhar em outros sites

tambem quero deixar minha contribuição:

 

<!doctype html>
<html lang="pt-br">
<head>
	<meta charset="utf-8">
	<title>12° menu</title>
	<style type="text/css">
		* {margin: 0; padding: 0;}

		body {background: #fff; font: 15px Arial, Helvetica, sans-serif;}

		#menu {width: 100%;}

		nav {margin: 20px auto; width: 95%;}

		a {
			border: 1px solid #454A4A;
			color: #474C4C;
			float: left;
			height: 35px;
			line-height: 35px;
			margin: 0 1px;
			padding: 0 15px; 
			text-decoration: none;
		}

		a:hover {
			border-color: #01CFFF;
			color: #01CFFF;
			margin-top: 3px;
			text-decoration: underline;
		}

		a:active {
			border-color: #FFCE00;
			color: #FFCE16;
		}

		@media screen and (max-width: 500px) {
			a {
				border: 1px solid #454A4A;
				color: #474C4C;
				display: block;
				height: 35px;
				line-height: 35px;
				margin: 1px 0;
				padding: 0 0 0 15px;
				text-align: left;
				text-decoration: none;
				width: 96.5%;
			}

			a:hover {
				border-color: #01CFFF;
				color: #01CFFF;
				margin-top: 3px;
				text-decoration: underline;
			}

			a:active {
				border-color: #FFCE00;
				color: #FFCE16;
			}
		}

		@media screen and (max-width: 320px) {
			a {
				border: 1px solid #454A4A;
				border-radius: 5px;
				color: #474C4C;
				display: block;
				height: 35px;
				line-height: 35px;
				margin: 1px 0;
				padding: 0 0 0 15px;
				text-align: left;
				text-decoration: none;
				width: 94%;
			}

			a:hover {
				border-color: #01CFFF;
				color: #01CFFF;
				margin-top: 3px;
				text-decoration: underline;
			}

			a:active {
				border-color: #FFCE00;
				color: #FFCE16;
			}
		}

	</style>
</head>
<body>
	<div id="menu">
		<nav>
			<a href="#" title="página inicial">Home</a>
			<a href="#" title="jogos irádos">Game</a>
			<a href="#" title="muita história">História</a>
			<a href="#" title="dicas e truques">Dicas e Detonados</a>
			<a href="#" title="mínimos detalhes">Estratégias</a>
		</nav>
	</div>
</body>
</html>

Compartilhar este post


Link para o post
Compartilhar em outros sites

Eaí galera, vamos criar um novo? Um facinho para começar!

 

Resultado final:

resultadola.png

 

Logo:

imasterslogo.png

 

A largura do documento é de 700px. O menu ao todo deve ficar centralizado nesse limite de largura, como na imagem.

 

Ele é estático, não tem hover; apenas o link para o home tem uma cor diferente, que é #117583, os demais que são #b32b27.

 

A fonte é Microsoft sans-serif, 14px, peso negrito.

 

A logo deve ficar ao meio, espaçando os outros itens do menu com 30px ao lado esquerdo e direito. Já os itens do menu em sí, apenas 20px ao lado direito e esquerdo. Perceba que o espaçamento entre a logo e os itens do menu é maior do que o espaçamento entre os itens do menu.

 

Apesar de ser fácil e simples, ainda não teve um menu com uma imagem no meio dele, que geralmente é uma logo. Eu tenho a solução aqui, bem fácil ela. O objetivo é mais iniciar mesmo, depois voltamos com mais!

Editado por FK.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Codigo do menu do FK :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<head>
<title>Repente</title>
<style type="text/css">
a{
text-decoration: none;
font-size: 14px;
font-family:  sans-serif;
font-weight: bold;
}
#home{
padding: 30px;
color: #117583;
}
#imagem{
margin-bottom: -20px;
}
#aimagem{
padding: 40px;
}
#comum{
padding: 30px;
color: #b32b27;
}
</style>
</head>
<body>
<div id="menu" align="center">
<a href="http://www.imasters.com.br" id="home">HOME</a>
<a href="http://forum.imasters.com.br" id="comum">FÓRUNS</a>
<a href="http://forum.imasters.com.br" id="aimagem"><img src="http://img259.imageshack.us/img259/3001/imasterslogo.png" id="imagem"></a>

<a href="http://forum.imasters.com.br/index.php?app=core&amp;module=global&section=login" id="comum">PERFIL</a>
<a href="http://forum.imasters.com.br/statuses/all/" id="comum">STATUS</a>
</div>
</body>
</html>

Imagem:

menuqb.png

Editado por Daniel_Moraes

Compartilhar este post


Link para o post
Compartilhar em outros sites

Ae Daniel_Moraes, deu certo seu código, mas tem uns pequenos probleminhas, que não influenciam na renderização, tais problemas são você ter colocado uma tag meta antes da tag head; não ter colocado um atributo alt para a tag img; e ter duplicado o id comum. Você poderia ter usado o id comum como uma classe.

Mas isso nem atrapalha tanto. :D

 

Olha o meu:

 

menu.html

 

<!DOCTYPE html>
<html>
   <head>
       <title>Menu iMasters</title>

       <meta charset="UTF-8" />
       <meta name="author" content="Fernando K." />
       <meta name="description" content="Repente iMasters - Décimo terceiro menu" />
       <meta name="keywords" content="Repente, iMasters, Décimo, Terceiro, Menu" />
       <meta name="application-name" content="Menu iMasters" />

       <link href="style.css" rel="stylesheet" media="screen" />
       <!--[if lt IE 9]>
           <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
       <![endif]-->
   </head>
   <body>
       <nav>
           <a href="http://www.imasters.com.br" id="hoverMenu">HOME</a>
           <a href="http://forum.imasters.com.br">FÓRUNS</a>
           <a href="http://forum.imasters.com.br"><img src="http://img259.imageshack.us/img259/3001/imasterslogo.png" alt="Logo iMasters" /></a>
           <a href="http://forum.imasters.com.br/index.php?app=core&amp;module=global&section=login">PERFIL</a>
           <a href="http://forum.imasters.com.br/statuses/all/">STATUS</a>
       </nav>
   </body>
</html>

 

 

 

style.css

 

 

/* ***** */
/* RESET.CSS */

* {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
nav {
display: block;
}
body {
line-height: 1;
}

/* ***** */
/* STYLE.CSS */

body {
   font-family: Arial, sans-serif;
   width: 700px;
}
nav {
   margin: 0px 0px 30px 80px;
}
nav a {
   font-size: 14px;
   font-weight: bold;
   color: #b32b27;
   margin: 0px 20px;
   text-decoration: none;
}
nav a#hoverMenu {
   color: #117583;
}
nav a img {
   position: relative;
   top: 20px;
   margin: 0px 30px;
}

 

 

 

Um pouco exagerado né, hehe. :)

Vlw por tentar, alguém ai pretende criar um mais difícil?

Editado por FK.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Décimo Terceiro Menu:


O menu de hoje é
capturadetela20130514as.png
capturadetela20130514as.png


Esse menu deve ser criado apenas com css puro. Sem uso de imagens e nem javascript.
só lembrando das regras que citei, e que a elegância da solução vai contar na avaliação.
Dica: O segundo screen do menu, está no estado :hover



Bom, é isso ai! SE VIREM! :graduated:
Boa sorte à todos. :joia:




Entregues: 4
  • William Bruno;
  • Marcos Xavier
  • JCMais
  • Evandro Oliveira


Aguardando: 0

Compartilhar este post


Link para o post
Compartilhar em outros sites

Aí vai....

 

 

<!DOCTYPE html>
<html>
<head>
<title>13°Menu </title>

<meta charset="UTF-8" />



<style>
*{margin:0;padding:0;}
body{margin:0 auto;width:100%;}
ul{margin:2% auto;width:90%;height:50px;background:#ccc;text-align:center;}
li{display:inline;list-style:none;padding:0 5%;line-height:300%}
ul li a{font-size:1.2em;position:relative;color:#222;text-decoration:none;width:100%;height:100%;padding:2% 1%}
ul li a:hover{text-decoration:underline;width:110%;height:120%;background:#ddd;padding:3% 1%}

</style>
</head>
<body>
<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 Estratégias</a></li>
</ul>

</body>
</html>

 

Editado por William Bruno

Compartilhar este post


Link para o post
Compartilhar em outros sites

Já mandei o meu. :thumbsup:

http://jsfiddle.net/JCMais/B6rtu/

 

 

 

<nav>
    <a href="#">Home</a>
    <a href="#">Game</a>
    <a href="#">História</a>
    <a href="#">Dicas e Estratégias</a>
</nav>

 

* {
	margin: 0;
	padding: 0;
}

nav {
	background-color: #CCC;
	margin: 10px;
}

nav a {
	color: #040E15;
	display: inline-block;
	padding: 10px 30px;
	text-decoration: none;
}

nav a:hover {
	background-color: #DDD;
	position: relative;
	text-decoration: underline;
	z-index: 1;
}

nav a:hover:before {
	content: "";
	background-color: #DDD;
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;

	-webkit-transform: scale( 1, 1.5 );
	-moz-transform: scale( 1, 1.5 );
	-o-transform: scale( 1, 1.5 );
	-ms-transform: scale( 1, 1.5 );
	transform: scale( 1, 1.5 );
	z-index: -1;
}

 

 

 

Editado por JCMais

Compartilhar este post


Link para o post
Compartilhar em outros sites

Fiz só o efeito sem me preocupar muito em acertar as medidas.

 

O print em resolução retina tirou todas as minhas referências.

 

https://github.com/oliveiraev/repente-css/tree/decimo-terceiro-menu

Compartilhar este post


Link para o post
Compartilhar em outros sites

putz @Evandro Oliveira =X foi mal cara..

no próximo eu tiro um print sem duplicar os pixels.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Estou colocando o código dos menus no repositório do iMasters

 

http://imastersdev.github.io/repente-css/01/

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.