Artigos HTML e CSS Criando um Menu Vertical DropDown com CSS e HTML

Olá pessoal, nesse artigo irei mostrar como criarmos um menu DropDown na posição vertical, usando HTML e CSS.

Esse tipo de menu é muito usado hoje em dia nos sites, pois permitem adicionarmos uma grande quantidade de informações no menu, sem comprometer o layout da página.

Mas vamos ao que interessa, que é o nosso Menu.

Criando o menu

A primeira coisa a se fazer é preparar a lista do menu: a melhor maneira para se fazer isso é usando listas não ordenadas. Para aplicarmos o dropdown, colocaremos outra lista não ordenada dentro da primeira lista. A princípio parece confuso, mas vendo o código da Listagem 1 vocês irão entender como funciona.

<html>
<head>
  <title>Menu Dropdown - Linha de Código</title>
  <link rel="stylesheet" type="text/css"  href="estilo.css" />  
</head>
<body>
<ul id="nav"> 
    <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="#">Hospedagem</a></li> 
        <li><a href="#">SEO</a></li> 
        <li><a href="#">Sistemas</a></li> 
      </ul> 
    </li>

    <li><a href="#">Contato</a></li> 
  </ul>
</body>
</html>

Listagem 1. Criando o HTML do Menu

O resultado desse HTML é algo bem feio e não funcional, como mostra a Figura 1.

Menu sem estilo
Figura 1. Menu sem estilo

Inserindo estilo

Agora vamos colocar um estilo CSS no menu para dar a aparência mais bonita e funcional para ele.

Primeiro vamos fazer um link chamando um arquivo css externo, para melhor compreender, como mostra a Listagem 2.

<link rel="stylesheet" type="text/css"  href="estilo.css" />

Listagem 2. Fazendo link ao CSS externo

Agora iremos remover as marcas (bullets) e a indentação das listas. Além disso, também definiremos uma largura para os itens do menu, como mostra a Listagem 3.


    ul {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 150px;
  }

Listagem 3. Removendo Bullets e Identação das Listas

Agora vamos posicionar os itens da lista e definir o posicionamento com o valor relative, porque depois iremos posicionar os sub-menus na posição absoluta em relação a eles. Observe a Listagem 4.


    ul li {
  position: relative;
  }

Listagem 4. Posicionando Itens da Lista

Agora vamos estilizar os sub-menus. Queremos cada sub-menu ao lado direito do seu elemento pai assim que passarmos o mouse sobre ele, como mostra a Listagem 5:

  • Com as propriedades CSS Left e Top podemos posicionar cada item do sub-menu ao lado de seu item pai.
  • Definimos o display: none; para que o sub-menu não fique visível por padrão.

    li ul {
  position: absolute;
  left: 149px;
  top: 0;
  display: none;
  }

Listagem 5. Posicionando itens do sub-menu

Agora vamos dar uma aparência melhor aos nossos links. É importante definir display:block; para que cada link ocupe toda a largura definida para ele na lista, como mostra a Listagem 6.


  ul li a {
   display: block;
   text-decoration: none;
   color: #E2144A;
   background: #fff;
   padding: 5px;
   border: 1px solid #ccc; 
}

Listagem 6. Melhorando aparência dos links

Apesar de termos que seguir algumas regrinhas básicas, na Listagem 6 você pode ficar a vontade em estilizar os seus links da maneira em que acharem melhor, lembrando sempre de usar o display:block;.

Nosso velho amigo IE(Internet Explorer) infelizmente interpreta as quebras de linha entre os itens, como espaços vazios, mas para corrigir isso é bem simples, como mostro na Listagem 7.


 /* Fix IE. Hide from IE Mac \*/
 * html ul li { float: left; }
 * html ul li a { height: 1%; }
 /* End */

Listagem 7. Corrigindo Bug do Internet Explorer

Submenu

Após fizermos tudo isso, nosso menu deverá estar como na Figura 2, mas o nosso DropDown ainda não está funcionando certo? Agora é que vem a “mágica” que faz o nosso Submenu aparecer.

Menu estilizado sem funcionar o DropDown
Figura 2. - Menu estilizado sem funcionar o DropDown.
li:hover ul { display: block; }

Listagem 8. Exibindo o Submenu

Feito isso, nosso menu estará funcionando perfeitamente, como mostra a Figura 3.

Menu DropDown Funcionando no Chrome, Firefox, Safari
Figura 3. Menu DropDown Funcionando no Chrome, Firefox, Safari.

Mas como podemos ver, ele continua sem funcionar no nosso amigo Internet Explorer, para fazer ele funcionar, teremos que usar um pouco de JavaScript, como vou mostrar na Listagem 9, lembrando que vamos referenciar o nosso JavaScript ao < ul id="menuDropDown" >.

Nota: Lembrando que essa não é a única forma de fazer o menu dropdown funcionar no IE, além dessa forma existem diversas outras, mas no nosso exemplo iremos utilizar essa com JavaScript, mas fique à vontade de pesquisar sobre outras formas.

    <script type="text/javascript">
    startList = function() {
    if (document.all&&document.getElementById) {
    navRoot = document.getElementById("menuDropDown");
    for (i=0; i<navRoot.childNodes.length; i++) {
    node = navRoot.childNodes[i];
    if (node.nodeName=="LI") {
    node.onmouseover=function() {
    this.className+=" over";
      }
      node.onmouseout=function() {
      this.className=this.className.replace
      (" over", "");
       }
       }
      }
     }
    }
    window.onload=startList;
</script>

Listagem 9. JavaScript para IE

Nesse exemplo coloquei o JavaScript dentro do próprio documento HTML, mas caso você prefira, você pode criar um documento à parte, salvá-lo como .js e chamar ele da mesma forma em quem chamamos o nosso documento css externo, utilizando o link: 

< script type="text/javascript" src="exemplo.js" > < /script >

Agora vamos dar uma aparência melhor pro nosso menu quando passarmos o mouse em cima dele, vamos adicionar o código da Listagem 10, deixando os links em negrito, sublinhado e com um background.


  ul li a:hover{
  text-decoration:underline;
  font-weight: bold;
  background: #ccc; }

Listagem 10. Estilizando a Classe Hover.

Agora temos um menu vertical com dropdown funcionando perfeitamente em todos os navegadores. O resultado do nosso tutorial será visto na Figura 4.

Menu Finalizado
Figura 4. Menu Finalizado.

Espero que tenham gostado, qualquer dúvida ou sugestão fiquem à vontade em postar nos comentários e/ou mandar e-mail.

Um abraço e até o próximo artigo.

Saiba mais: Introdução ao CSS na prática