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 Programação Pular para comentários
Menu DropDown Dinâmico 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.

Compartilhe com seus amigos:
Rodrigo
Rodrigo Formado em Sistemas de Informação pela Fac. de Tecnologia IBTA trabalha com Asp e Asp.Net a 4 anos desenvolvendo aplicações Web como intranets, web services, websites corporativos e estruturação de Banco de Dados SQL Server e Oracle.
Quer conversar com o(a) Rodrigo, comente:
Carregar comentários
Últimas notícias