Menu Dinamico

marcelocardoso · Março 24, 2009

Parceiros do Imasters!

Há algum tempo peguei um script na web, e acredito que seje aqui no imasters, e tenho o seguinte menu dinamico horizontal que funciona perfeitamente.

TEnho o seguinte:

1 BANCO DE DADOS COM 2 TABELAS

- TABELA COM NOME DE: categorias

- CONTEM OS CAMPOS: id_categoria, categoria_nome

- TABELA COM NOME DE: sub_categorias

- CONTEM OS CAMPOS: id_sub_cat, id_cat, nome_sub

Gostaria de acrescentar tipo no submenu, mais um submenu.... seria possível, será????

TEnho este código aqui que funciona com os dados acima:

<!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.over { 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>

Alguém me ajuda para fazer isso no banco de dados e no código acima...

Nunca fiz, e quero aprender a fazer estes tipos de menus...

Colegas me podem me ajudar, só me digam mais ou menos que o resto eu dou um jeito.

obrigado!

Ted k' · Março 24, 2009

mais ai já é com o CSS, você tem condições sim, siga a dica aqui:

Montem como você quer com HTML e CSS estático mesmo, ai se tiver tudo ok com o CSS, você vai e coloca o ASP, ficando dinâmico!

xanburzum · Março 25, 2009

ja pensou em usar um TreeView com XML e AJAX ??

abaixo 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

<!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>

marcelocardoso · Março 26, 2009

TED e XAMBURZUM!

Valeu pelas dicas, realmente consegui mesmo... valeu...

As vezes pensamos que não vamos conseguir, mas fussando a coisa vai.!

Mas agora só para variar, como eu poderia fazer isso aqui no CSS.

Não sei se abro outro topico, mas resolvi continuar postando aqui... vamos lá.

Gostaria de fazer assim:

Quando passasse o mouse em cima do menu principal, ele deve abrir o outro menu ao lado certo.

Mas gostaria que o css ficasse com a borda assim:

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

:MENU 1 SUBMENU1 :

:::::::::::::::::::::::::::::::::: SUBMENU2 :

: SUBMENU3 :

:::::::::::::::::::::::::::::::::

TEria como fazer este contorme em linha em volta do menu 1 e dos submenus????

Alguém que entende bem de cascade, poderia me ajudar a fazer isso.

Obrigado!

marcelocardoso · Março 29, 2009

XAMBURZUM!

Consegui fazer este exemplo http://www.alistapart.com/d/horizdropdowns/horizontal.htm

bem certinho, mas estou com um problema agora... Não é no CSS, mas sim num pequeno administrativo que estou fazendo para alimentar alguns dados e preciso nesta pagina fazer uma COMBOBOX que pega todas as categorias e subcategorias, mas como posso fazer isso.

Pois no banco de dados tenho 2 tabelas, uma chamada de: CATEGORIA e a outra de: SUBCATEGORIA.

onde tenho os campos

TABELA CATEGORIA (id,catid,catnome)

TABELA SUBCATEGORIA (id,catsub)

Mas minha dúvida é esta, como posso fazer para criar uma combobox onde liste tanto categoria como subcategoria, e depois quando for atualizar via pagina asp, ele grava em outra tabela de cd's pegando o id certo escolhido na mesma, indepedente se for da categoria ou subcategoria.

Pode me ajudar a fazer isso, não tenho nem ideia como resolver isso, até porque nunca fiz isso, apenas combobox de uma tabela só, coisa simples.

Oque posso fazer?????

Obrigado

xanburzum · Março 29, 2009

olha este exemplo :

este script faz o preenchemento de um combo e pega o valor do combo preenchido pra fazer o outro combo, tipo: 

um combo pais e outro combo estado 

as tabelas saun: 

pais- com os campos 
cod_pais - chave primária 
nome 

estado -c om os campos 
cod_pais - chave estrangeira 
cod_estado 
nome 

as tabelas possuem relacionamento de um para muitos 

<% Option Explicit 

'declaro as var 
dim var1,var2,var3,....., etc 
'recupero as var 
varpais=request.querystring("pais") 
'crioa a conexao 
%> 

<!--# include file="conexao/conexao.asp"--> 

<% 
'abro a conexao 
Call abre_conexao 
'crio o rs 
set rspais=server.createobject("ADODB.Recordset") 
'crio a SQL 
SQLpais="SELECT * FROM pais ORDER BY nome" 
rspais.open SQLpais,conexao,1,3 
%> 


'aki vou criar o combo, onde no evento onchange ele irá enviar o value do combo pais para a mesma pag, para eu recuperar o codigo do pais e assim preencher o combo estado. 

<form action="inserirend_action.asp"method="post"name="frmteste"> 
<select name="pais" size="1" Onchange="window.navigate('pag_atual.asp?pais='+frmteste.pais.value)"> 

<% while not rspais.eof%> 
<option value="<%=rs("cod_pais")%>"> 
<% if varpais=rs("pais") then 
response.write("Selecionado") 
end if%> 
<%=rs("nome")%> 
</option> 
<% rspais.movenext 
wend%> 
</select> 
<% set rspais=nothing%> 

'aki crio o combo estado 

<select name="estado"size="1"> 
if request("pais") ="" then%> 
<option value=""> selecione um pais 
<%else 
'crio o SQL estado 
SQLestado="Select * from estado where cod_pais="&varpais&" Order by nome" 
'crio o rsestado 
set rsestado=server.createobject("ADODB.Recordset") 
rsestado.open SQLestado,conexao,1,3 
<%while not rsestado.eof%> 
<option value="<%=rsestado("cod_estado")%>"> 
<%=rs("nome")%> 
</option> 
<%rs.movenext 
wend 
end if%> 
</select> 
<% set rsestado=nothing%> 
<% 'fecho a conexao 
call fecha_conexao%>

marcelocardoso · Março 29, 2009

Amigo!

E como eu faço para gravar isso no banco???

Pois para mim fica confuso, tipo:

Digamos ex:

Estou cadastrando um CD, mas ele está dentro da categoria POP e subcategoria POP FUNK, aí eu na combobox vou selecionar o POP e o teu código vai gerar outro combobox com o subcategoria POP FUNK, certo.

Daí como eu gravo isso no meu BD???

Vou ter que gravar o ID do POP + POP FUNK???

e depois como vou fazer o select para ver o cd.

Não sei se entendeu, até eu estou enrolado.

Mas não teria como na combobox fazer tudo num só, tipo: categoria e subcategoria tudo junto??? já com o ID de cada categoria.

Pois depois no form fica mais fácil de fazer o update e insert para a categoria certa e gravar o cd.

Obrigado!

xanburzum · Março 29, 2009

sim , neste caso , você poderia gravar tudo em um só,

o exemplo dá para ter uma boa difinição, você imaginando, tipo:

Estado São Paulo, abaixo dele vem as cidades:

Piracicaba

Americana

Campinas

Saõ Paulo

Jundiaí

...

entendeu

marcelocardoso · Março 29, 2009

Amigo!

Tu nao teria um exemplo pratico para me passar, estou bem confuso, e as ideias não estao se formando ainda na minha cabença.

marcelocardoso · Março 30, 2009

Amigo XAMBURZUM!

Me ajuda aqui, não estou conseguindo arrumar seu script, só consegui exibir a primeira categoria, mas a subcategoria

não funciona.

MEU BD ESTÁ ASSIM:

Tabela: Categorias

id

CategoriaNome

Tabela: CategoriaSub

id

idCat

SubNome

Consegue me ajudar?????

E se puder me explicar:

que url é essa: OnChange="window.navigate('inserir.asp?pais='+frm.pais.value)"> oque devo colocar aqui, a mesma do form???

<%
 varpais=request.querystring("pais")
 SQL = "SELECT * FROM CATEGORIAS ORDER BY ID ASC"
 SET RSCAT1 = Server.CreateObject("ADODB.RECORDSET")
	 RSCAT1.Open SQL, CX, 3
%>
<select name="pais" size="1" OnChange="window.navigate('inserir.asp?pais='+frm.pais.value)">
<% 
while not RSCAT1.eof
%>
<option value="<%=RSCAT1("ID")%>">
<% 
if varpais=RSCAT1("ID") then
response.write("Selecionado")
end if
%>
<%=RSCAT1("CategoriaNome")%>
</option>
<% 
RSCAT1.movenext
wend
%>
</select>
<% 
set RSCAT1=nothing
%>
<select name="estado"size="1">
<%
if request("CategoriaNome") ="" then
%>
<option value=""> SELECIONE A SUBCATEGORIA
<%
else
SQLestado = "Select * from CATEGORIASUB where ID = "&varpais&" Order by nome"
	  set RSCAT2=server.createobject("ADODB.Recordset")
		  RSCAT2.open SQLestado,CX,1,3
while not RSCAT2.eof
%>
<option value="<%=RSCAT2("IdCat")%>">
<%=RSCAT1("CategoriaNome")%>
</option>
<%
RSCAT1.movenext
wend
end if
%>
</select>

Obrigado!

Arquivado

Menu Dinamico

Recommended Posts

marcelocardoso 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

Ted k' 126

Compartilhar este post

Link para o post

Compartilhar em outros sites

xanburzum 169

Compartilhar este post

Link para o post

Compartilhar em outros sites

marcelocardoso 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

marcelocardoso 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

xanburzum 169

Compartilhar este post

Link para o post

Compartilhar em outros sites

marcelocardoso 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

xanburzum 169

Compartilhar este post

Link para o post

Compartilhar em outros sites

marcelocardoso 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

marcelocardoso 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante