Repente CSS - [Menus]

Evandro Oliveira · Abril 12, 2012

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

William Bruno · Abril 12, 2012

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>

Gilson Fabiano · Abril 13, 2012

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

ebdt · Abril 15, 2012

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>

FK. · Junho 18, 2012

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

Resultado final:

Logo:

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!

Daniel_Moraes · Julho 10, 2012

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:

FK. · Julho 11, 2012

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?

William Bruno · Maio 14, 2013

Décimo Terceiro Menu:

O menu de hoje é

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

Evandro Oliveira · Maio 14, 2013

Depois do almoço sai... :D

Marcos Xavier · Maio 14, 2013

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>

JCMais · Maio 14, 2013

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

Evandro Oliveira · Maio 15, 2013

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

William Bruno · Maio 15, 2013

putz @Evandro Oliveira =X foi mal cara..

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

William Bruno · Agosto 13, 2014

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

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

Arquivado

Repente CSS - [Menus]

Recommended Posts

Evandro Oliveira 331

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

Gilson Fabiano 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

ebdt 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

FK. 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Daniel_Moraes 11

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

Evandro Oliveira 331

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marcos Xavier 189

Compartilhar este post

Link para o post

Compartilhar em outros sites

JCMais 75

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

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

PHP+Codeigniter - Adicionar Registro Plano de Contas

Javascript - Passar Parâmetros para uma Função.

PHP - Consulta MySql para prazo de dias

Fóruns

Tempo Real

Informação importante