Menu DropDown Dinâmico

Abordaremos o nesta coluna como elaborar um menu dinamico feito a mão sem ajuda de programas Wizards é um exemplo de DHTML, com efeitos Rollover e icones de sinais de + quando fechados e - quando aberto, tudo isso vindo do banco de dados Access, bem como Links e Sublinks.

Por | @oficinadanet Programação
Ola Pessoal

         É com grande prazer que eu venho publicar minha primeira coluna, com o intuito de compartilhar com todos vocês o conhecimento, bom ensinarei nesta Coluna como construir um menu DropDow a mão sem o uso de programas wizards se bem que eles nos ajudam as vezes, este menu terá links, imagens de ícones todos vinculados com o banco de dados ou seja Menu e Submenu vindos do banco e com interação de CSS com Java Script como efeitos hover, rollow-up, em fim. Vamos ao que interessa!

Primeiro de tudo criaremos o banco de dados em Access, duas tabelas um sendo uma para Menu e outra sendo para Submenu, como na imagem abaixo:

Menu DropDown Dinâmico

Menu DropDown Dinâmico

Menu DropDown Dinâmico

Agora partiremos para o codigo Html da pagina, observe o codigo abaixo,
preste atenção nas tags div pois utilizaremos elas com frequencia posteriormente.



  Menu DropDown



  
  
  
  
    
  

    Menu DropDown Dinâmico
  
Menu Dinâmico


  
    
    
    
  




Abaixo segue o codigo Css da página para melhorar o estilo visual.


Temos então esta página com os códigos acima corretamente desenvolvidos.

Menu DropDown Dinâmico

          Vamos implementar agora o codigo Asp para obtermos as informações do banco de dados mais precisamente das tabelas que criamos no inicio. Codigo abaixo, compare com o codigo HTML puro digitado no começo desta coluna. Antes colocaremos o codigo Asp de abertura do banco antes da tag :

<%  
  'Abrindo a Conexão com o Banco
  strPath = Server.MapPath("banco.mdb")
  Set objConn = Server.CreateObject("ADODB.Connection")
  objConn.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source="&strPath&";"
  Set objRec1 = Server.CreateObject("ADODB.RecordSet")
  strSql_1 = "SELECT * FROM TMenuPai ORDER BY MenuPaiID"
  Set objRec1 = objConn.Execute(strSql_1)
%>


          Esta é a sequencia dos div citados so que com o codigo Asp devidamente colocado a logica do menu em relação ao banco de dados é a seguinte, os MenusPais teram ID e os MenusFilhos tambem pois então para fazermos o segundo While do codigo montamos um SELECT que pegara no banco a ID do MenuFilho e compara-ra se os dois numeros forem iguais se forem todos os MenusFilhos com o devido numero igual a cont se imprimirão dentro do div. Não é dificil basta ler e enteder a logica, pois é um While dentro do outro.


<%
  cont = 0     
  While Not objRec1.EOF
%>


<%
  cont = cont + 1
  objRec1.MoveNext
  Wend
  objRec1.Close
%>


Feito isto testaremos mais uma vez para ver o resultado. So aparecera os MenusPais pois os menus filhos estão recebendo a classe Hide do Css, e estão escondidos.

Menu DropDown Dinâmico

          Agora partiremos para a interação em Java Script que fara a ação de quando clicarmos no menu pai ele devera abrir os menus filhos. e quando clicamos novamente ele voltara a se esconder ou no modo hidden propriamente dito. Veja o codigo abaixo:



          Feito isso, chamaremos a função na tag div do MenuPai pois é ele que iremos clicar para ver os MenusFilhos. Dentro da função passaremos o paramentro cont, para não dar erro quando adicionarmos mais menus via banco futuramente sendo assim todos os MenusPais se tiverem MenusFilhos terão corretamente esse evento quando clicados sem esse cont o evento  so aconteceria no primeiro MenuPai. O codigo ficara da seguinte maneira.



          Adicionaremos uma ID na tag div do menu filho pois é este que recebera a ação executada pela função no momento do clique no MenuPai.

id="MenuFilho_<%=cont%>" class="Hide">


          Rodem este exemplo no Localhost de vocês e cliquem em um dos links do menu e depois voltem a clicar novamente, podemos também adicionar mais links no banco para o menu ficar mais atraente do que esta, lembrado que existe uma certa lógica para inserirmos links no banco pois é correto afirmar que pela lógica um MenuPai que terá MenuFilhos não pode ter links a ele pois se não clicaríamos nele e ele nos levaria para outra pagina, agora é claro que se um MenuPai não tiver MenusFilhos poderemos adicionarmos um link no banco a ele, por isso deixem o campo requerente a Link sem nada se for um MenuPai e preencham ele com o caminho do arquivo se for um MenuPai sem MenusFilhos. Exemplo concluído.

Menu DropDown Dinâmico

          Abraços a Todos do Forum Oficina da Net.

Mais sobre:
Share Tweet
Recomendado
Comentários
Carregar comentários
Destaquesver tudo