Neste artigo vou mostrar como criar um menu em css dropdown na posição horizontal usando a nova tag para menu, a tag <nav> do html5 e efeitos de CSS3.
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.
Listagem 1: Criando o HTML do Menu
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| <!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]> <![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> |
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 a seguir, dentro da tag <head>.
Listagem 2: Fazendo link ao CSS externo
1
| <link rel="stylesheet" type="text/css" href="estilo.css" /> |
Como podemos ver na Figura 1, o resultado desse HTML é algo bem feio.
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.
Listagem 2: Removendo bullets e colocando borda
1
2
3
4
5
6
7
8
9
10
11
12
| *{margin: 0; padding: 0;}body{font-family: arial, helvetica, sans-serif;font-size: 12px;}.menu{list-style:none; border:1px solid #c0c0c0; float:left; } |
Agora vamos estilizar os itens do menu. Utilizaremos o position:relative; para que futuramente possamos posicionar o submenu.
Listagem 3: Estilizando itens do menu
1
2
3
4
5
| .menu li{position:relative; float:left; border-right:1px solid #c0c0c0; } |
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.
Listagem 4: Estilizando links
1
2
3
4
5
6
7
8
9
| .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; } |
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;
Listagem 5: Escondendo submenu
1
2
3
4
5
6
7
| .menu li ul{position:absolute; top:25px; left:0;background-color:#fff; display:none;} |
Vamos ver como está ficando o nosso menu em css até agora?
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?
Listagem 6: Exibindo submenu
1
| .menu li:hover ul, .menu li.over ul{display:block;} |
Pronto, agora nosso submenu está aparecendo mas não está funcionando perfeitamente ainda, ainda falta alguns ajustes finais para que fique 100%
Listagem 7: Ajustes finais
1
2
3
4
5
| .menu li ul li{border:1px solid #c0c0c0; display:block; width:150px;} |
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:
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 um link para que seja testado online o menu criado.
