Menu Drop-Down - Tutorial

O menu drop-down foi criado utilizando marcação XHTML para a estrutura, regras de estilos CSS para a apresentaçao e programação Javascript para torná-lo dinâmico. O menu drop-down é fácil de editar e atualizar e funciona perfeitamente em variados tipos de browsers (Internet Explorer, Firefox, Opera e Safari).

Criando a estrutura - XHTML

O primeiro e mais importante passo na criação do menu é a definição da sua estrutura. A melhor maneira de se criar a estrutura é através de uma lista não ordenada, com cada um dos sub-menus constituídos por outra lista não ordenada dentro da primeira.

Passo 1 - criando a barra de menus


<ul>
  <li>Arquivo</li>
  <li>Editar</li>
  <li>Formatar</li>
  <li>Exibir</li>
  <li>Ajudar</li>    
</ul>

Passo 2 - criando os submenus


<ul>
  <li>Arquivo
    <ul>
      <li>Novo</li>
      <li>Abrir</li>
      <li>Salvar</li>
      <li>Salvar como...</li>
    </ul> 
  </li>
  <li>Editar
    <ul>
      <li>Desfazer</li>
      <li>Recortar</li>
      <li>Copiar</li>
      <li>Colar</li>
      <li>Excluir</li>      
    </ul> 
  </li>
  <li>Formatar
    <ul>
      <li>Quebra de linha automática</li>
      <li>Fonte...</li>
    </ul>
  </li>
  <li>Exibir
    <ul>
      <li>Barra de status</li>
    </ul>
  </li>
  <li>Ajuda
    <ul>
      <li>Tópicos de ajuda</li>
    </ul>
  </li>    
</ul>

Passo 3 - criando os links


<ul>
  <li><a href="#">Arquivo</a>
    <ul>
      <li><a href="#">Novo</a></li>
      <li><a href="#">Abrir</a></li>
      <li><a href="#">Salvar</a></li>
      <li><a href="#">Salvar como...</a></li>
    </ul> 
  </li>
  <li><a href="#">Editar</a>
    <ul>
      <li><a href="#">Desfazer</a></li>
      <li><a href="#">Recortar</a></li>
      <li><a href="#">Copiar</a></li>
      <li><a href="#">Colar</a></li>
      <li><a href="#">Excluir</a></li>      
    </ul> 
  </li>
  <li><a href="#">Formatar</a>
    <ul>
      <li><a href="#">Quebra de linha automática</a></li>
      <li><a href="#">Fonte...</a></li>
    </ul>
  </li>
  <li><a href="#">Exibir</a>
    <ul>
      <li><a href="#">Barra de status</a></li>
    </ul>
  </li>
  <li><a href="#">Ajuda</a>
    <ul>
      <li><a href="#">Tópicos de ajuda</a></li>
    </ul>
  </li>    
</ul>

Passo 4 - definindo as classes


<ul class="menubar">
  <li class="submenu"><a href="#">Arquivo</a>
    <ul class="menu">
      <li class="item"><a href="#">Novo</a></li>
      <li class="item"><a href="#">Abrir</a></li>
      <li class="item"><a href="#">Salvar</a></li>
      <li class="item"><a href="#">Salvar como...</a></li>
    </ul> 
  </li>
  <li class="submenu"><a href="#">Editar</a>
    <ul class="menu">
      <li class="item"><a href="#">Desfazer</a></li>
      <li class="item"><a href="#">Recortar</a></li>
      <li class="item"><a href="#">Copiar</a></li>
      <li class="item"><a href="#">Colar</a></li>
      <li class="item"><a href="#">Excluir</a></li>      
    </ul> 
  </li>
  <li class="submenu"><a href="#">Formatar</a>
    <ul class="menu">
      <li class="item"><a href="#">Quebra de linha automática</a></li>
      <li class="item"><a href="#">Fonte...</a></li>
    </ul>
  </li>
  <li class="submenu"><a href="#">Exibir</a>
    <ul class="menu">
      <li class="item"><a href="#">Barra de status</a></li>
    </ul>
  </li>
  <li class="submenu"><a href="#">Ajuda</a>
    <ul class="menu">
      <li class="item"><a href="#">Tópicos de ajuda</a></li>
    </ul>
  </li>    
</ul>

Alterando o visual (apresentação) - CSS

As regras CSS são as responsáveis por transformar as listas não ordenadas em uma aparência de menu através da criação de blocos, bordas, posicionamento e aparência, removendo as marcas (bullets) e a indentação próprias das listas.

Principais classes

class ul.menubar - Classe que define as propriedades da barra horizonal, posicionando o menu na margem superior esquerda da tela;

class ul.menubar .submenu - Classe que define o formato e a posição dos submenus (um ao lado do outro) - float: left;

class ul.menubar .menu - Classe que define a posição e a exibição do menu vertical (inicialmente eles não são exibidos) - dispaly: none;

class ul.menu - Classe que define o tamanho (largura - width: 150px) e a cor do menu vertical;

class ul.menu ul - Classe que define o posicionamento do menu vertical em relação aos submenus, usando as propriedades “left” e “top” posicionamos de modo absoluto cada sub-menu ao lado de seu item pai. A propriedade “left” tem o valor de 149px (1px menor que a largura dos itens do menu), isto faz com que os sub-menus transpassem o menu e em consequência não apareça uma borda dupla;

class ul.menu li - Classe que define o posicionamento dos itens do menu vertical relativos ao submenu - position: relative;

class ul.menu li.submenu - Classe que define o tamanho (largura) e a posição do 3º nivel de menus;

class ul.menu li.submenu ul - Classe que torna os sub-menus invisíveis inicialmente - display: none.

Atenção

A ordem das regras CSS não devem ser alteradas, pois, o Javascript no tempo de execução altera algumas de suas propriedades e a forma em que ele executa esta operação é através do indice das regras.

Tornando o menu dinâmico - Javascript

O Javascript é utilizado para tornar o menu dinâmico e garantir que funcionará bem na maioria dos browsers. As propriedades das classes que foram criadas na CSS são alteradas através do script, onde podem ser modificadas: cor de fundo, cor da fonte, cor da borda, cor da opção selecionada, imagem de fundo, estilo da fonte e uso da borda.

Temas

Para facilitar o uso da biblioteca vários temas foram criados e estão prontos para uso, bastando para isso passar o seu código na chamada da função no onload da página HTML.

Exemplo: <body onload="menuDropDown(1)>

Códigos e temas:

Testando o navegador

O menu drop-down foi criado para ter compatibilidade entre os principais navegadores utilizados na Web (IE, Firefox, Safari e Opera), essa identificação é realizada logo no início da função através dos métodos ducument.all e navigator.appName

Modificando a CSS

Para que o menu possua a aparência escolhida pelo tema a CSS deve ser modificada através do Javascript logo no carregamento da página da seguinte forma:

document.styleSheets[0].cssRules[2].style.backgroundColor = cor_Menu_NaoAtiva;

Explicando: A regra nº 2 da 1ª CSS associado a página HTML a cor de fundo possuirá o valor da variável cor_Menu_NaoAtiva.

document.styleSheets[0].cssRules[4].style.color = cor_Fonte_Menu_NaoAtiva;

Explicando: A regra nº 4 da 1ª CSS associado a página HTML a cor da fonte possuirá o valor da variável cor_Fonte_Menu_NaoAtiva.

Observações: 1 - As styleSheets e as cssRules começam com o índice 0; 2 - Para o navegador Internet Explorer a forma utilizada é document.styleSheets[0].rules[4].style.color = cor_Fonte_Menu_NaoAtiva; no lugar de cssRules.

Controlando a exibição dos menus

A exibição da classe menu é controlada através das funções onmouseover() e onmouseout da seguinte forma:

navItems[i].onmouseover=function() {this.getElementsByTagName('ul')[0].style.display="block";}
navItems[i].onmouseout=function() {this.getElementsByTagName('ul')[0].style.display="none";}

Quando o mouse estiver sobre a "ul class menu" o estilo display é alterado para "block" que corresponde a exibir o menu.
Quando o mouse sair desta "ul class menu" o estilo display é alterado para "none" que corresponde a ocultar o menu.

Criando novos temas

Para criar novos temas basta acresentar na estrutura de controle switch mais itens e identificar as variáveis que serão alteradas.

Exemplo:

case 20 : // roxo
cor_Menu_Ativa = '#9900CC';
cor_Menu_NaoAtiva = '#CC00FF';
cor_Fonte_Menu_Ativa = '#000000';
cor_Fonte_Menu_NaoAtiva = '#FFFFFF';
cor_Submenu_Ativa = '#9900CC';
cor_Submenu_NaoAtiva = '#CC00FF';
cor_Fonte_Submenu_Ativa = '#000000';
cor_Fonte_Submenu_NaoAtiva = '#FFFFFF';
break

Observação: Se nenhum valor for passado na chamada da função o menu default (padrão) é o menu com fundo branco.