Implementando um menu dinâmico baseado em tableless

Nome: INB Menubar
Publicado: 06/03/2007
Atualizado: 11/07/2007
Linguagem: Javascript
Características:

• - Baseado em tableless e javacript
• - Permite N submenus
• - Suporta alinhamento horizontal e vertical
• - Possui espaço reservado para ícones
• - Formatação através de include CSS

Código-fonte (6 kb):

Download

Autor: André Rafael Barboza

Introdução

A criação desse menu faz parte do meu estudo sobre tableless e criação de componentes para ASP.NET. Eu pretendia liberar esse código junto com meu componente em .NET, mas por possuir uma implementação muito simples eu resolvi não restringir seu uso dentro da plataforma .NET.

Eu perdi a conta de quantos menus dinâmicos em javascript havia criado. Cada um deles era muito diferente do outro em sua implementação. Uma solução comum é a criação de vários elementos em camadas, dar um ID para cada um deles adicionar no evento mouseover uma chamada a função que exibe o submenu passando o ID como parâmetro. Eu achava isso normal até perceber que podia acabar com essa dependência de ID.

Durante a criação desse controle me ocorreu que eu não tinha feito nenhuma pesquisa sobre soluções tableless para menu em javascript. Interrompi meu trabalho e fui matar minha curiosidade. Achei várias soluções que implementavam um menu tableless apenas com CSS, mas tinha suas restrições. Eles só permitiam um número fixo de submenus.

Implementação

Chega de enrolação e vamos ao que interessa. Para utilizar o INB Menubar em seu site:

• 1 - Fazer referência aos seguintes arquivos no cabeçalho de sua página:

  <link href="INBMenubar/INBMenubar.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript" src="INBMenubar/INBMenubar.js"></script>

• 2 - Instanciar a classe TINBMenubar:

  <script language="Javascript" type="text/javascript">
var oMenubar1 = new TINBMenubar("Menubar1",5); </script>
O primeiro parâmetro é o ID do menu e o segundo é opcional. Coloquei essa opção para permitir que você ajuste a distância do submenu primeiro nível em relação ao root.

• 3 - Gerando o HTML:

  Utilize DIV para determinar o espaço do menu dentro da página e através do atributo class determine sua orientação. O atributo ID precisa ser o mesmo utilizado durante a criação da instância do controle no javascript anterior. Nesse caso o valor do atributo é Menubar1. Aplique a formatação base usando o valor INBMenubar no atributo class e especifique a orientação do menu [Horizontal | Vertical]. <div id="Menubar1" class="INBMenubar Horizontal"></div> Dentro do DIV vamos colocar a lista de nível 0 (nível zero) e um elemento sem submenu e sem ícone. Observe que mesmo que o ícone não exista é necessário incluir o SPAN para manter a formatação. <ul class="Root">
<li><a href="/"><span class="NoIcon"></span>Home</a></li> </ul> Agora vamos incluir um elemento com submenu: <li><a href="" class="HasChild"><span class="NoIcon"></span>Artigos</a></li>
<ul class="Hidden" style="width:300px"> <li><span class="Title">Tibia</span></li> <li><a href="/articles/beholder_tool.php"><span class="Icon"></span>Beholder Tool</a></li> <li><a href="/articles/acc_bispo.php"><span class="Icon CharIcon">!</span>Acc e senha do Bispo</a></li> </ul> O elemento com submenu recebe o valor HasChild para o atributo class e logo após este elemento criamos uma nova lista com class definido para Hidden pois este ficará escondido até o elemento anterior (previousNode) disparar o evento mouseover. Eu especifiquei a largura do submenu apenas para manter uma formatação legal, mas não é necessário especificar. Por padrão a largura do submenu é 200px. Essa definição está dentro do include CSS.
  Notaram que eu utilizei um caracter [!] como se fosse um ícone? Isso é preguiça de criar uma imagem hehe <li><a href="/articles/acc_bispo.php"><span class="Icon CharIcon">!</span>Acc e senha do Bispo</a></li> Caso queira utilizar uma imagem como ícone: <li><a href="/beholder_download.php"><span class="Icon" style="background:url(images/ico-beholder.gif) no-repeat"></span>Beholder Tool</a></li> O submenu permite que você insira um elemento como título: <li><span class="Title">Tibia</span></li> Abaixo está o código exemplo da estrutura em HTML do menu: <!--Inicio INBMenubar-->
<div id="Menubar1" class="INBMenubar Horizontal">
<ul class="Root"> <li><a href="/"><span class="NoIcon"></span>Home</a></li>
<li><a href="" class="HasChild"><span class="NoIcon"></span>Artigos</a></li>
<ul class="Hidden" style="width:300px"> <li><span class="Title">Tibia</span></li>
<li><a href="/articles/beholder_tool.php"><span class="Icon"></span>Beholder Tool</a></li>
<li><a href="/articles/acc_bispo.php"><span class="Icon CharIcon">!</span>Acc e senha do Bispo</a></li> </ul> <li><a href="" class="HasChild"><span class="NoIcon"></span>Download</a></li>
<ul class="Hidden"> <li><a href="/beholder_download.php"><span class="Icon" style="background:url(/images/ico-beholder.gif) no-repeat"></span>Beholder Tool</a></li> </ul> </ul>
</div>
<!--Fim INBMenubar-->

Exemplos

Código HTML acima com alinhamento horizontal <div id="Menubar1" class="INBMenubar Horizontal">

Alinhamento vertical <div id="Menubar1" class="INBMenubar Vertical">

Sem o parâmetro adicional
Talvez alguns pensem que esse parâmetro adicional é uma falha no script, mas não é. Tudo depende do layout da página.

Conclusão

Usando este exemplo você pode facilmente implementar um menu dinâmico em seu website sem se preocupar com códigos complicados e sem depender de ferramentas de terceiros.

O básico de um menu em javascript é saber onde você está, onde você esteve e quem você deve exibir. Permitir que você, a partir de um elemento de nível N, retorne para o nível zero. A estrutura de lista permite isso muito bem. No final eu achei a implementação desse menu mais simples que um menu baseado em tabela.

Um recurso excelente que eu desconhecia está no método GetStyle do TINBMenubar. Eu não sabia que era possível recuperar a formatação CSS que foi aplicada no elemento independente se ela foi feita via atributo style ou class.

Espero que tenham gostado do artigo. Em breve pretendo publicar um artigo sobre a implementação deste controle, mas como componente ASP.NET. Este foi o primeiro artigo, mas podem ter certeza de que outros virão e com uma qualidade ainda melhor.