Nesse post trabalharemos com a construção de um menu horizontal utilizando CSS3. Mais importante do que procurar menus prontos por aí – e você encontra um momento, é entender de fato como criar um, por isso trabalherei passo a passo.

Primeiramente, criaremos em nossa página uma estrutura básica, como a abaixo:

[code language=”html”]

[/code]

Se você visualizar a página agora terá uma estrutura simples de marcadores. O próximo passo é fazer com que essa lista seja ordenada horizontalmente e retiraremos o marcador.

[code language=”css”] #menu {
float: left;
padding: 42px 0 0 30px;
}

#menu li {
float: left;
margin: 0 0 0 5px;
list-style: none;
}
[/code]

Agora o menu já começa a ter uma cara nova. Para que fique ainda melhor, vamos adicionar uma borda ao redor de cada elemento, alterando também a cor dos links. Trabalharemos com a cor rgba – saiba mais aqui, mas para assegurar que uma nova cor seja inserida nos links, definiremos também o atributo color em hexadecimal, que trabalhará nos casos em que o navegador não reconhece o rgba.

[code language=”css”] #menu li a {
border: 3px solid #87CEEB;
text-decoration: none;
padding: 5px 15px;
font-weight: bold;
color: #FA8072;
color: rgba(250, 128, 114, 0.7);
}
[/code]

Para um visual mais profissional adicionarei também uma borda arredondada e o efeito de sombra ao texto, com o auxílio das novas propriedades do CSS3.

[code language=”css”] #menu li a {
border: 3px solid #87CEEB;
text-decoration: none;
padding: 5px 15px;
font-weight: bold;
color: #FA8072;
color: rgba(250, 128, 114, 0.7);
text-shadow: 0 1px 1px rgba(250, 128, 114, 0.5);
-webkit-border-radius: 14px;
-moz-border-radius: 14px;
border-radius: 14px;
}
[/code]

Agora trabalharei com o efeito hover e focus. Quando o usuário passar o mouse sobre o menu, um background será adicionado para dar foco ao item. Trabalharei com a mesma cor do texto, com opacidade menor. Alterarei também a cor do texto e bordas.

[code language=”css”] #menu li a:hover,
#menu li a:focus {
color: #87CEEB;
background: rgba(250, 128, 114, 0.15);
border: 3px solid #FA8072;
}
[/code]

O menu agora já está funcional. Mas que tal dar um toque a mais utilizando efeitos de transição CSS3? Leia mais sobre aqui.

[code language=”css”] #menu li a {
border: 3px solid #87CEEB;
text-decoration: none;
padding: 5px 15px;
font-weight: bold;
color: #FA8072;
color: rgba(250, 128, 114, 0.7);
text-shadow: 0 1px 1px rgba(250, 128, 114, 0.5);
-webkit-border-radius: 14px;
-moz-border-radius: 14px;
border-radius: 14px;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
}
[/code]

No caso o mesmo efeito de transição foi adicionado a todos os elementos que sofrerão a transição. Caso você queira adicionar efeitos diferentes para cada propriedade, trabalhe como no exemplo abaixo:

[code language=”css”] transition: background 0.7s ease-in-out,
color 0.3s ease-in-out;
[/code]

Prontinho! O menu está funcional e estilizado.

Contudo sabemos que em muito casos existe a necessidade de se trabalhar com menus com mais de um nível. Criaremos um subnível no ITEM 2. No código HTML adicionei uma nova lista de objetos entre as tags li do nível dois, como o código abaixo:

[code language=”html”]

[/code]

Agora trabalharemos o estilo. Para que todo o segundo nível apareça só apareça quando o nível anterior for chamado, trabalharemos a propriedade display, para que ela tenha seu valor alterado ao hover.

[code language=”css”] #menu li ul {
display: none;
border: 2px solid #87CEEB;
border-radius: 14px;
width: 200px;

}

#menu li:hover ul{
display: block;
position: absolute;
margin: 9px;
padding: 0;
}
[/code]

Para que esse nível receba um estilo diferente do seu anterior, apliquei o código abaixo. É importante que você trate pelo menos o atributo float, para que os subitens não flutuem a esquerda uns dos outros, e sim, um abaixo do outro. Caso você prefira a primeira opção, sem problemas! Questão de design.

[code language=”css”] #menu li:hover li{
float: none;
margin: 10px;
}

#menu li:hover li a{
border: none;
color: #FA8072;
}
[/code]

E o nosso menu está pronto!

Caso queira fazer o download da página, clique aqui.


// Comente!

comentários