Menu DropDown Dinâmico
Novo aqui no site? Talvez gostaria de assinar o
RSS feed do site?
Publicado em: 11/03/2007
Área: ASP
Visualizações: 8.683
Comentário(s): 3
RSS feed do site?
Publicado em: 11/03/2007
Área: ASP
Visualizações: 8.683
Comentário(s): 3
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:
Agora partiremos para o codigo Html da pagina, observe o codigo abaixo,
preste atenção nas tags div pois utilizaremos elas com frequencia posteriormente.
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.
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 <Html>:
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.
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.
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.
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.
Abraços a Todos do Forum Oficina da Net.
É 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:
Agora partiremos para o codigo Html da pagina, observe o codigo abaixo,
preste atenção nas tags div pois utilizaremos elas com frequencia posteriormente.
<html>
<head>
<title>Menu DropDown</title>
</head>
<body>
<table width="100%" height="60" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="logo.jpg">
</td>
</tr>
<tr>
<td height="19" background="bar.jpg" style="padding:2px 2px 2px 6px; font:8pt Verdana, Arial; color:#FFFFFF;"><strong>Menu Dinâmico</strong></td>
</tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="TabelaDoMeio">
<tr>
<td id="Menu" valign="top">
<div class="BordaMenu">
<div class="MenuPai">Menu Pai Aqui !</div>
<div id="MenuFilho" class="Hide">
<div class="MenuFilho">Menu Filho Aqui !</div>
</div>
</div>
</td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>Abaixo segue o codigo Css da página para melhorar o estilo visual.
<style>
.TabelaDoMeio {
border-collapse:collapse;
}
.TabelaDoMeio td {
border: 1px Solid #CCCCCC;
padding: 4px;
}
.TabelaDoMeio td#Menu {
border-left: 1px Solid #CCCCCC;
border-right: 1px Solid #CCCCCC;
border-bottom: 1px Solid #CCCCCC;
background: #FEF9ED;
padding: 4px;
width: 180px;
}
.BordaMenu {
border: 1px Solid #CCCCCC;
background: #FFFFFF;
}
.MenuPai {
font:8pt Verdana, Arial, Helvetica;
color:#666666;
padding: 2px 2px 2px 5px;
}
.MenuFilho {
font:8pt Verdana, Arial, Helvetica;
color:#666666;
padding: 2px 2px 2px 5px;
}
.Hide {
visibility:hidden;
position:absolute;
}
.Show {
visibility:visible;
position:static;
}
</style>Temos então esta página com os códigos acima corretamente desenvolvidos.
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 <Html>:
<%
'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.
<div class="BordaMenu">
<%
cont = 0
While Not objRec1.EOF
%>
<div class="MenuPai">
<b><%Response.Write objRec1("NomeMenuPai")%></b>
</div>
<div id="MenuFilho" class="Hide">
<%
Set objRec2 = Server.CreateObject("ADODB.RecordSet")
strSql_2 = "SELECT NomeMenuFilho FROM TMenuFilho WHERE MenuFilhoID="&cont
Set objRec2 = objConn.Execute(strSql_2)
While Not objRec2.EOF
%>
<div class="MenuFilho">
<%Response.Write objRec2("NomeMenuFilho")%>
</div>
<%
objRec2.MoveNext
Wend
objRec2.Close
%>
</div>
<%
cont = cont + 1
objRec1.MoveNext
Wend
objRec1.Close
%>
</div>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.
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:
<script>
function mostraMenu($mID){
menu = document.getElementById("MenuFilho_"+$mID);
if(menu.className == "Hide"){
menu.className = "Show";
}else{
menu.className = "Hide";
}
}
</script>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.
<div class="MenuPai" onClick="mostraMenu('<%=cont%>')">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.
<div 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.
Abraços a Todos do Forum Oficina da Net.
Autor da matéria
Formado em Sistemas de Informação pela Fac. de Tecnologia Uirapuru trabalha com Asp e Asp.Net a 2 anos desenvolvendo Webservice e Sites Corporativos, Intranets,.
Todas as matérias de Rodrigo
Publicidade
Seguir o Oficina da Net
Top matérias do mês
- 1992 - O ano em que Bill Gates previu o futuro dos computadores
O computador terá o tamanho que você quiser. Poderá ser do tamanho da .
- Photoshop: Aplicando tatuagem em uma pessoa
Aqui veremos como aplicar uma tatuagem a qualquer pessoa de uma maneir.
- Dicas para tornar seu site conhecido
Público é um item fundamental para se ter um site. De que adianta você.
- Imagens em quebra cabeça
Veja como transformar suas imagens em quebra cabeças de uma maneira be.
- Vídeo Aula Sony vegas - Criando efeito de filme antigo
Olá pessoal, estou aqui para mais uma vídeo aula, desta vez vou mostra.
Matérias relacionadas
- Gráfico Dinâmico Utilizando XML e FLASH com Componente FusionCharts Free
Nesta coluna aprenderemos montar um Gráfico utilizando o componente Fu.
- ASP: Como criar classes
Podemos definir classes como um objeto, com seus próprios métodos (fun.
- Criando uma enquete simples.
- ASP.NET e web standards
Essa matéria não pretende mostrar, nem de longe, todos os problemas e .
- Objeto Request e Componente FileAccess
O objeto Request se refere a todos os dados requisitados pelo servidor.
Destaque
Tags
- Anuncie |
- Cadastro |
- Divulgue-nos |
- Fale Conosco |
- Layouts |
- Links |
- Mapa do site |
- Colunas populares |
- PageRank Checker |
- RSS |
- Vídeos
© 2005 - 2009 - Oficina da Net - v 4.0 - É proibida a reprodução parcial ou completa do conteúdo deste site sem autorização por escrito. Resolução adequada: 1024x768px.
Parceiros:
Bahia em Foco
| Blog do Vicente
| BuscaKi
| Chongas
| ClicRN
| Código Fonte
| Coletânea de ícones
| Comunicação Digital
| Concurso Público
| Concursos
| Criação de sites
| CriarWeb
| Downloads
| Fontes Grátis
| GMasters
| Hospedagem
| Hospedagem de sites
| Ícones
| Infonet News
| iParaiba
| JLAMIM
| MX masters
| Notebook
| Portal Super
| Profissionais de Web
| Qualidade Brasil
| Renan Lima
| SEO Master
| Sonhos
| tutoriais.org
| WebLivre
| Zoom Digital
- Publicado em: 28/03/2007 - 07:38
Parabéns! o código está ótimo e funciona muito bem! Usei ele para outra função (envés de menu, estou usando para uma lista telefonica). Ficou muito legal! Tenho uma dúvida: como faço para adicionar colunas nesse esquema?
- Publicado em: 02/06/2007 - 17:31
gostei da primeira parte, estou esperando o complemento.
Weslene Estevao de Paula
- Publicado em: 30/04/2008 - 11:51
Parabens pelo artigo, ficou show de bola, por acaso nao teria um exemplo desse em Delphi, essa ideia de trabalhar montando o menu com dados de banco de dados é muito bem elaborado, uma ves que montamos o menu de acordo com os acessos de usuarios.