Artigos HTML e CSS Menu em CSS - Menu dropdown horizontal com HTML5 e CSS3

Tutorial - Criando um menu horizontal com CSS e HTML

Olá pessoal, no artigo anterior eu falei sobre a criação de Criando Menu vertical dropdown em CSS. Neste artigo irei mostrar como fazer um menu horizontal usando um pouco de HTML5 e CSS.

O menu, ou barra de navegação é um elemento muito importante de qualquer website, pois como o próprio nome já diz, é por ele que os usuários visitam todas as páginas do site e com a ajuda do CSS podemos deixar o nosso menu de uma forma bem mais agradável.

Muitas pessoas que estão começando agora no mundo do webdesign me perguntam como fazer para o menu ficar na orientação horizontal, por isso resolvi escrever esse artigo, para mostrar para todos que criar um menu em css na posição horizontal é muito simples, ainda mais com a ajuda do HTML5 agora. Observe o código da Listagem 1.

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
    <title>Menu Dropdown Horizontal - Linha de Código</title>
     <!-- Aqui chamamos o nosso arquivo css externo -->
    <link rel="stylesheet" type="text/css"  href="estilo.css" />
    <!--[if lte IE 8]>
 <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
 <![endif]-->    
</head>
<body>
<nav>
  <ul class="menu">
		<li><a href="#">Home</a></li>
		<li><a href="#">Sobre</a></li>
	  		<li><a href="#">O que fazemos?</a>
	         	<ul>
	                  <li><a href="#">Web Design</a></li>
	                  <li><a href="#">SEO</a></li>
	                  <li><a href="#">Design</a></li>                    
	       		</ul>
			</li>
		<li><a href="#">Links</a></li>
		<li><a href="#">Contato</a></li>                
</ul>
</nav>
</body>
</html>
Listagem 1. Criando o HTML do Menu

Notem que no nosso html, estamos usando uma tag nova, bastante utilizada no HTML5, é a tag <nav>. Esta tag foi criada para agrupar blocos de links de um mesmo assunto ou links internos do website, indicando que um determinado bloco é um bloco de navegação.

Lembrando que para chamar um arquivo CSS externo, devemos utilizar o código da Listagem 2, dentro da tag <head>.

<link rel="stylesheet" type="text/css"  href="estilo.css" />
Listagem 2. Fazendo link ao CSS externo

Como podemos ver na Figura 1, o resultado desse HTML é algo bem feio.

Menu sem estilo
Figura 1. Menu sem estilo

Vamos colocar um estilo para começar a melhorar nosso menu?

Vamos começar zerando o margin e padding para todos os navegadores, colocaremos um estilo de texto para o nosso texto do menu e removeremos os bullets da lista. Depois vamos definir uma borda e colocaremos o float:"left"; para que as bordas fiquem certinhas.

*{margin: 0; padding: 0;}

body{
font-family: arial, helvetica, sans-serif;
font-size: 12px;
}

.menu{
list-style:none; 
border:1px solid #c0c0c0; 
float:left; 
}
Listagem 3. Removendo bullets e colocando borda

Agora vamos estilizar os itens do menu. Utilizaremos o position:relative; para que futuramente possamos posicionar o submenu.

.menu li{
position:relative; 
float:left; 
border-right:1px solid #c0c0c0; 
}
Listagem 4. Estilizando itens do menu

Agora vamos estilizar os links, você pode ficar à vontade em estilizar os links de acordo com o seu gosto e layout. Neste exemplo eu inseri uma propriedade chamada text-shadow e box-shadow, do CSS3, caso você esteja usando um navegador atualizado, poderá ver essa propriedade em ação.

.menu li a{color:#333; text-decoration:none; padding:5px 10px; display:block;}

.menu li a:hover{
background:#333; 
color:#fff; 
-moz-box-shadow:0 3px 10px 0 #CCC; 
-webkit-box-shadow:0 3px 10px 0 #ccc; 
text-shadow:0px 0px 5px #fff; 
}
Listagem 5. Estilizando links

Menu em CSS dropdown

Agora vamos começar a trabalhar com o submenu, vamos começar definindo a sua posição como absoluta(postition:absolute;), para que os itens do submenu não ultrapassem o seu menu pai e para que ele não interfira no fluxo dos elementos do menu.

Vamos também definir cores de fundo e esconder o submenu com o display:none;

.menu li  ul{
position:absolute; 
top:25px; 
left:0;
background-color:#fff; 
display:none;
}
Listagem 6. Escondendo submenu

Vamos ver como está ficando o nosso menu em css até agora?

Menu em css 80% pronto
Figura 2. Menu em css 80% pronto

Como podemos ver, o nosso menu está quase pronto, digamos que uns 80%, faltando apenas exibir o submenu, vamos ver como fazemos isso?

.menu li:hover ul, .menu li.over ul{display:block;}
Listagem 7. Exibindo submenu

Pronto, agora nosso submenu está aparecendo mas não está funcionando perfeitamente ainda, ainda falta alguns ajustes finais para que fique 100%

.menu li ul li{
border:1px solid #c0c0c0; 
display:block; 
width:150px;
}
Listagem 8. Ajustes finais

Agora sim, nosso menu em css está funcionando perfeitamente, estilizado, moderno e com o dropdown funcionando direitinho.

Se você conseguir seguir esse tutorial passo a passo direitinho, o seu menu deve estar aparecendo dessa forma:

Menu em CSS pronto
Figura 3. Menu em CSS pronto

Caso o seu menu não tenha ficado assim, provavelmente você esqueceu de algum passo do nosso tutorial, abaixo vou disponibilizar um link de download do código fonte e teste online o menu criado.

Espero que tenham gostado, um abraço e até o próximo artigo.

Links Úteis

Saiba mais sobre JavaScript ;)

  • Programando em HTML5:
    Ao ser anunciada a versão 5 do padrão HTML, inicialmente parte do mercado não recebeu com grande entusiasmo, acostumado a receber poucos recursos novos de uma versão para outra. A verdade é que, desde que a versão 4.0 foi lançada em 1997, poucos avanços aconteceram nos dez anos seguintes.
  • As Novidades do HTML5:
    Neste artigo apresento as principais novidades da nova versão da linguagem de marcação de hipertexto HTML, que já está disponível nos principais navegadores de internet com suporte quase que total.
  • O que é o HTML5:
    Veja neste artigo um pouco da história do HTML, o que é o HTML5 e suas principais mudanças em relação às versões anteriores.