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
<!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>
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
<link rel="stylesheet" type="text/css" href="estilo.css" />
|
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
*{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
.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
.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
.menu li ul{
position:absolute;
top:25px;
left:0;
background-color:#fff;
display:none;
}
|
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
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
menu li ul li{
border:1px solid #c0c0c0;
display:block;
width:150px;
}
Estrutura HTML - Completa
<!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>
Estrutura css Completa
*{margin: 0; padding: 0;}
body{
font-family: arial, helvetica, sans-serif;
font-size: 12px;
}
.menu{
list-style:none;
border:1px solid #c0c0c0;
float:left;
}
.menu li{
position:relative;
float:left;
border-right:1px solid #c0c0c0;
}
.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;
}
|
Agora sim, nosso menu em css está funcionando
perfeitamente, estilizado, moderno e com o dropdown funcionando direitinho.
Nenhum comentário:
Postar um comentário