Assine:
Menu com submenu dinâmico em css
Menu com submenu dinâmico em css
Escrito por Lucasbr em ASP. Data: 02/10/2006
Licença: Alguns direitos reservados. Dar créditos ao autor e linkar este original
Bom, segue um exemplo de menu em css, criado com os dados que vem do banco de dados. Ele possibilita a criaçao de categorias e subcategorias. Há a possibilidade de expandir até para subcategoria da subcategorias, porem nao vem ao caso.
O menu foi desenvolvido com o codigo do artigo do Maujor - http://www.maujor.com/tutorial/ddownmenu.php
Eu fiz a implementaçao da parte dinamica dele.
Bom, para utilizar este menu, voce precisa monta rum banco de dados com a seguinte estrutura:
Algumas Obs.:
a variavel pagina = "produtos.asp" é a pagina q será direcionada ao clicar no item do menu.
A variavel id_sub_cat será passada por querystring para a outra pagina.
Quaquer duvida, é so falar.
Download do codigo: http://www.ievolutionweb.com/forum/lucas/m...ub_dinamico.zip
Abraço.
O menu foi desenvolvido com o codigo do artigo do Maujor - http://www.maujor.com/tutorial/ddownmenu.php
Eu fiz a implementaçao da parte dinamica dele.
Bom, para utilizar este menu, voce precisa monta rum banco de dados com a seguinte estrutura:
Algumas Obs.:
a variavel pagina = "produtos.asp" é a pagina q será direcionada ao clicar no item do menu.
A variavel id_sub_cat será passada por querystring para a outra pagina.
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br" xml:lang="pt-br">
<head>
<title>Horizontal Drop Down Menus - Parte 3</title>
<script type="text/javascript">
function IEHoverPseudo() {
var navItems = document.getElementById("primary-nav").getElementsByTagName("li");
for (var i=0; i<navItems.length; i++) {
if(navItems[i].className == "menuparent") {
navItems[i].onmouseover=function() { this.className += " over"; }
navItems[i].onmouseout=function() { this.className = "menuparent"; }
}
}
}
window.onload = IEHoverPseudo;
</script>
<style type="text/css">
body { font: normal 62.5% verdana; }
ul#primary-nav,
ul#primary-nav ul {
margin: 0;
padding: 0;
width: 150px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
background: #fff; /* IE6 Bug */
font-size: 100%;
}
ul#primary-nav li {
position: relative;
list-style: none;
}
ul#primary-nav li a {
display: block;
text-decoration: none;
color: #777;
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
/* Fix IE. Hide from IE Mac \*/
* html ul#primary-nav li { float: left; height: 1%; }
* html ul#primary-nav li a { height: 1%; }
/* End */
ul#primary-nav ul {
position: absolute;
display: none;
left: 149px; /* Set 1px less than menu width */
top: 0;
}
ul#primary-nav li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
ul#primary-nav li:hover ul ul,
ul#primary-nav li:hover ul ul ul,
ul#primary-nav li.over ul ul,
ul#primary-nav li.over ul ul ul { display: none; } /* Hide sub-menus initially */
ul#primary-nav li:hover ul,
ul#primary-nav li li:hover ul,
ul#primary-nav li li li:hover ul,
ul#primary-nav li.over ul,
ul#primary-nav li li.over ul,
ul#primary-nav li li li.over ul { display: block; } /* The magic */
ul#primary-nav li.menuparent { background: transparent url(arrow.gif) right center no-repeat; }
ul#primary-nav li.menuparent:hover,
ul#primary-nav li.ove???d?r { background-color: #f9f9f9; }
ul#primary-nav li a:hover { color: #E2144A; }
</style>
</head>
<body>
<%
set cn = Server.CreateObject("ADODB.Connection")
cn.provider= "Microsoft.Jet.OLEDB.4.0"
cn.connectionstring=Server.MapPath("bd.mdb")
cn.open
pagina = "produtos.asp"
SQL = "SELECT * FROM categorias"
Set rs = cn.execute(sql)
response.write "<ul id='primary-nav'>"
do while not rs.eof
response.write "<li class='menuparent'><a href='java script:;'>"& rs("categoria_nome") &"</a>"
SQL2 = "SELECT * FROM sub_categorias WHERE id_cat='"&rs("id_categoria")&"'"
set rs2 = cn.execute(sql2)
If Rs2.eof Then
response.write "</li>"
Else
response.write "<ul>"
do while not rs2.eof
response.write "<li><a href='"&pagina&"?id_sub_cat="& rs2("id_sub_cat") &"'>" & rs2("nome_sub") & "</a></li>"
rs2.movenext
loop
response.write "</ul>"
response.write "</li>"
end if
rs.movenext
loop
response.write "</ul>"
%>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br" xml:lang="pt-br">
<head>
<title>Horizontal Drop Down Menus - Parte 3</title>
<script type="text/javascript">
function IEHoverPseudo() {
var navItems = document.getElementById("primary-nav").getElementsByTagName("li");
for (var i=0; i<navItems.length; i++) {
if(navItems[i].className == "menuparent") {
navItems[i].onmouseover=function() { this.className += " over"; }
navItems[i].onmouseout=function() { this.className = "menuparent"; }
}
}
}
window.onload = IEHoverPseudo;
</script>
<style type="text/css">
body { font: normal 62.5% verdana; }
ul#primary-nav,
ul#primary-nav ul {
margin: 0;
padding: 0;
width: 150px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
background: #fff; /* IE6 Bug */
font-size: 100%;
}
ul#primary-nav li {
position: relative;
list-style: none;
}
ul#primary-nav li a {
display: block;
text-decoration: none;
color: #777;
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
/* Fix IE. Hide from IE Mac \*/
* html ul#primary-nav li { float: left; height: 1%; }
* html ul#primary-nav li a { height: 1%; }
/* End */
ul#primary-nav ul {
position: absolute;
display: none;
left: 149px; /* Set 1px less than menu width */
top: 0;
}
ul#primary-nav li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
ul#primary-nav li:hover ul ul,
ul#primary-nav li:hover ul ul ul,
ul#primary-nav li.over ul ul,
ul#primary-nav li.over ul ul ul { display: none; } /* Hide sub-menus initially */
ul#primary-nav li:hover ul,
ul#primary-nav li li:hover ul,
ul#primary-nav li li li:hover ul,
ul#primary-nav li.over ul,
ul#primary-nav li li.over ul,
ul#primary-nav li li li.over ul { display: block; } /* The magic */
ul#primary-nav li.menuparent { background: transparent url(arrow.gif) right center no-repeat; }
ul#primary-nav li.menuparent:hover,
ul#primary-nav li.ove???d?r { background-color: #f9f9f9; }
ul#primary-nav li a:hover { color: #E2144A; }
</style>
</head>
<body>
<%
set cn = Server.CreateObject("ADODB.Connection")
cn.provider= "Microsoft.Jet.OLEDB.4.0"
cn.connectionstring=Server.MapPath("bd.mdb")
cn.open
pagina = "produtos.asp"
SQL = "SELECT * FROM categorias"
Set rs = cn.execute(sql)
response.write "<ul id='primary-nav'>"
do while not rs.eof
response.write "<li class='menuparent'><a href='java script:;'>"& rs("categoria_nome") &"</a>"
SQL2 = "SELECT * FROM sub_categorias WHERE id_cat='"&rs("id_categoria")&"'"
set rs2 = cn.execute(sql2)
If Rs2.eof Then
response.write "</li>"
Else
response.write "<ul>"
do while not rs2.eof
response.write "<li><a href='"&pagina&"?id_sub_cat="& rs2("id_sub_cat") &"'>" & rs2("nome_sub") & "</a></li>"
rs2.movenext
loop
response.write "</ul>"
response.write "</li>"
end if
rs.movenext
loop
response.write "</ul>"
%>
</body>
</html>
Quaquer duvida, é so falar.
Download do codigo: http://www.ievolutionweb.com/forum/lucas/m...ub_dinamico.zip
Abraço.
Mais recentes em ASP
- Asp info
- Por Lucasbr - Veja as configurações do seu servidor...
- Criptografia sha-256 em asp
- Por Lucasbr - A família de sha (secure hash algorithm) está relacionada...
- Tabela dinâmnica
- Por RobsonUgoStoso - Montando uma tabela dinâmica com datas...
- Cdosys error '8004020f' - a solução
- Por David Cruvinel - A solução...
- Recuperar stored procedure
- Por Pinguim - No trampo novo, precisei recuperar algumas storedprocedures....
Ver mais Artigos de ASP.
Ver e retirar outras dúvidas no fórum Webly.
Alguns Direitos Reservados | RSS | O Fórum
Webly Portal e Fóruns - Internet + Humana | Design by ArthurHenrique.com
Comentários:
rafa_deck disse:
estou fazendo um sistema de vendas... mais de amostra no caso.
e tem menus e submenus começando em 1 e terminando em 1.1.1.1.1
com topicos e tal.. acho que vc entende mais ou menos como é neh?!
estou pensando em fazer com banco de dados mas nao sei como vou armazenar os topicos... e tem mais tenho que fazer uma parte administrativa para que a pessoa possar criar mais um nivel no caso o "2" e seus subitens.
tem como se da uma luz ai!?
suIHuishusih
brigadao abraço!
Lucasbr disse:
eu vou ver se consigo pensar em algo e ja volto ae...
Lucasbr disse:
menu: http://forum.ievolutionweb.com/index.php?s...ost&p=19619
Pra colocar o terceiro nivel, vc precisa criar mais uma tabela no banco de dados, e associar a subcategorias a elas...
rafa_deck disse:
valeu mesmo..
eh que eh muito complicado. to fazendo bd agora... dps vo pega esse eskema e bota aki
valeu rapaziada .!!!
Ver o restante dos comentários no fórum (e aproveitar pra comentar também !).