• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

anuskka

[Resolvido] menu dinamico

5 mensagens neste tópico

Ola!

precisava de fazer um menu dinamico. ao carregar num menu aparecerem outros sub-menus

podem-me ajudar pff? obg

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

podes sempre usar tabelas.

uma tabela para o menu e n tabelas para os submenus. em que as tabelas dos submenus têm style="display:none;" e posicionamento absoluto para aparecerem onde realmente os queres.

depois, em cada opção do menu, ou seja, nos TDs, colocas código para fazer aparecer e desaparecer os submenus.. qualquer coisa como isto:


<td class="xpto" onmouseover="JavaScript:showMenu(1);" onmouseout="JavaScript:hideMenu(1);">menu 1</td>

claro que tens de controlar com uma variável qual o submenu que está activo e não o esconder caso o rato esteja sobre ele. ou seja, o rato ao sair do menu esconde o submenu respectivo, com um delay de meio segundo, por exemplo, mas só o esconde se o rato não foi precisamente para cima desse submenu. isso é o que tens de controlar na função hideMenu. esconde, mas só se não está em uso.

acho que me expliquei bem :P  agora é só codificar isto. simples :P

Inté!

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

obg

mas eu nao percebo nada :P nao me keres ajudar fazendo um exemplo concreto?pfff

por exemplo:

Menu1

      Submenu1

      Submenu2

Menu2

por favor!! obg obg

fiko a espera da tua resposta

bjs :P

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

ja resolvi o meu problema, encontrei um codigo fixe na net k faz isso vou postar aki para se alguem precisar dele

é em CSS e JavaScript

<html>
<head>
<title>Untitled</title>

<!--|||||=========== COLOQUE ENTRE AS TAGS HEAD ==========|||||||||| -->

<!-- ||**||**||**||  FOLHA DE ESTILOS (CSS) ||**||**||**|| -->
<style type="text/css">	
/*+++++++++++++++ RELATIVO AS CATEGORIAS +++++++++++++++++++++*/

/**** LINKS DOS NOMES DAS CATEGORIAS ****/
/* Link em estado natural*/
a.link_menu:link{color:navy;text-decoration:none;font-weight:normal;font-family:arial;font-size:12px}
/* Link depois de visitado*/
a.link_menu:visited{color:navy;text-decoration:none;font-weight:normal;font-family:arial;font-size:12px}
/* Link ao passar o mouse*/
a.link_menu:hover{color:#ffffff;text-decoration:underline;font-weight:bold;font-family:arial;font-size:12px}
/**** FIM LINKS DOS NOMES DAS CATEGORIAS ****/

/**** CELULAS DOS NOMES DAS CATEGORIAS ****/
/*padding top right bottom left */
.titulo_menu{	   
   background-color:red;
	background-image:url(none);
	width:150px;
	height:25px;
	border:1px solid blue;
	padding: 5px 0px 0px 5px;
}
/**** FIM CELULAS DOS NOMES DAS CATEGORIAS ****/

/*++++++++++++ FIM RELATIVO AS CATEGORIAS +++++++++++++++++++++*/		



/*++++++++++++  RELATIVO AS SUB-CATEGORIAS +++++++++++++++++++++*/

/**** LINKS DOS NOMES DAS SUB-CATEGORIAS ****/
/* Link em estado natural*/
a.link_smenu:link{color:#ffffff;text-decoration:none;font-weight:normal;font-family:arial;font-size:12px}
/* Link depois de visitado*/
a.link_smenu:visited{color:#ffffff;text-decoration:none;font-weight:normal;font-family:arial;font-size:12px}
/* Link ao passar o mouse*/
a.link_smenu:hover{color:navy;text-decoration:underline;font-weight:bold;font-family:arial;font-size:12px}
/**** LINKS DOS NOMES DAS SUB-CATEGORIAS ****/

/**** CELULAS DOS NOMES DAS SUB-CATEGORIAS ****/
/*padding top right bottom left */
.itens_menu{
   background-color:blue;
	background-image:url(none);
	width:137px;
	height:25px;
	border:1px solid red;
	padding: 5px 0px 0px 5px;
}	
/**** FIM CELULAS DOS NOMES DAS SUB-CATEGORIAS ****/

/**** CELULAS DE REVEZAMENTO DOS NOMES DAS SUB-CATEGORIAS ****/
.itens_menu_r{
   background-color:#0099ff;
	background-image:url(none);
	width:137px;
	height:25px;
	border:1px solid red;
	padding: 5px 0px 0px 5px;		
}	
/**** FIM CELULAS DE REVEZAMENTO DOS NOMES DAS SUB-CATEGORIAS ****/

/*++++++++++++ FIM RELATIVO AS SUB-CATEGORIAS +++++++++++++++++++++*/	
</style>	
<!-- ||**||**||** FIM FOLHA DE ESTILOS (CSS) ||**||**||** -->

<!-- |||||||||||||||| FUNÇÕES JAVASCRIPT (NÃO EDITE) |||||||||||||||| -->
<script language="javascript">
   c=0
	du="";
   function escondediv(dv,n){		
	    
	   for(i=1;i<=n;i++){			
		   if(i==dv ){
			   if(du!=dv){
			      document.getElementById('mdiv'+i).style.display="inline"
				   du=dv
				}else{
				   du=""
				   document.getElementById('mdiv'+i).style.display="none"
				}
		   }else{
			     document.getElementById('mdiv'+i).style.display="none"				  					
		   }				

		}		
	}

function reveza(qq){
  document.getElementById(qq).className="itens_menu_r"
}
function volta(qq){
  document.getElementById(qq).className="itens_menu"
}
</script>
<!-- ||||||||||||| FIM FUNÇÕES JAVASCRIPT (NÃO EDITE) |||||||||||||||| -->	

<!--|||||========== FIM COLOQUE ENTRE AS TAGS HEAD =========|||||||||| -->
</head>

<body>

<!--|||||||||||||||||  COLOQUE DENTRO AS TAGS BODY||||||||||||||||||||||||||||| -->

<script>
//Coloque aqui o número de itens de menu
n_divs='5'
</script>

<div class="titulo_menu"><a href="#" class="link_menu"  target="alvo">Link fixo</a></div>

<div class="titulo_menu"  ><a href="javascript:void(escondediv('1',n_divs))" class="link_menu" >Categoria 1</a></div>
<div id="mdiv1"  style="display:none">
   <table border="0">
   <tr><td id="um" class="itens_menu" ><a href="#" onmouseover="reveza('um')" onmouseout="volta('um')" class="link_smenu" target="alvo">link item1A</a></td></tr>
	<tr><td class="itens_menu" ><a href="#" class="link_smenu" target="alvo">link item2A</a></td></tr>
	<tr><td class="itens_menu"><a href="#" class="link_smenu" target="alvo">link item3A</a></td></tr>
</table>
</div>

<div class="titulo_menu"><a href="javascript:void(escondediv('2',n_divs))" class="link_menu">Categoria 2</a></div>
<div id="mdiv2"  style="display:none">
   <table border="0">
   <tr><td class="itens_menu"><a href="#" class="link_smenu" target="alvo">link item1B</a></td></tr>
	<tr><td class="itens_menu"><a href="#" class="link_smenu" target="alvo">link item2B</a></td></tr>
	<tr><td class="itens_menu"><a href="#" class="link_smenu" target="alvo">link item3B</a></td></tr>
</table>
</div>

<div class="titulo_menu"><a href="javascript:void(escondediv('3',n_divs))" class="link_menu">Categoria 3</a></div>
<div id="mdiv3"  style="display:none">
   <table border="0">
   <tr><td class="itens_menu"><a href="#" class="link_smenu" target="alvo">link item1C</a></td></tr>
	<tr><td class="itens_menu"><a href="#" class="link_smenu" target="alvo">link item2C</a></td></tr>
	<tr><td class="itens_menu"><a href="#" class="link_smenu" target="alvo">link item3C</a></td></tr>
</table>
</div>

<div class="titulo_menu"><a href="javascript:void(escondediv('4',n_divs))" class="link_menu">Categoria 4</a></div>
<div id="mdiv4"  style="display:none">
   <table border="0">
   <tr><td class="itens_menu"><a href="#" class="link_smenu" target="alvo">link item1D</a></td></tr>
	<tr><td class="itens_menu"><a href="#" class="link_smenu" target="alvo">link item2D</a></td></tr>
	<tr><td class="itens_menu"><a href="#" class="link_smenu" target="alvo">link item3D</a></td></tr>
</table>
</div>

<div class="titulo_menu"><a href="javascript:void(escondediv('5',n_divs))" class="link_menu">Categoria 5</a></div>
<div id="mdiv5"  style="display:none">
   <table border="0">
   <tr><td class="itens_menu"><a href="#" class="link_smenu">link item1E</a></td></tr>
	<tr><td class="itens_menu"><a href="#" class="link_smenu">link item2E</a></td></tr>
	<tr><td class="itens_menu"><a href="#" class="link_smenu">link item3E</a></td></tr>
</table>
</div>
<!--|||||||||||||||||  COLOQUE DENTRO AS TAGS BODY||||||||||||||||||||||||||||| -->

</body>
</html>

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora