PUBLICIDADE
Este código tem nota
10

Autor

guhsnet

Gustavo Henrique Silva

membro deste janeiro de 2007

Tags

Compartilhe e guarde

  • Rec6
  • StumbleUpon
  • ueba
  • linkk
  • dihitt
  • linkloko
  • linkto
  • Technorati
  • Simpy
  • del.icio.us
  • Faves: Fave It!

PUBLICIDADE

Enquete

O buscador Bing, da Microsoft, conseguirá alcançar o Google?

Menu com submenu em CSS e JavaScript


Menu expansivo vertical (com submenus) feito em CSS e JavaScript. Fácil de customizar.

INSTRUÇÕES::
Coloque na variável "n_divs" o número de categorias que irá ter o menu.
OBS: As categorias que não tiverem sub-menus, não serão contadas

Se uma categoria não tiver sub categorias, portanto não irá abrir um sub-menu.

Meu texto onde "#" é o endereço da página linkada; e target o alvo, que pode ser _self, _top, _parent ou o nome de um iframe ou frame.

Quando você quiser que uma categoria tenha sub menu, use o código:
Categoria 1

link item1A
link item2A
link item3A

Onde escondediv('n',n_divs) 'n' é o número da categoria em ordem crescente, lembre-se
que categorias que não tem sub-menu não são contada; "id" é o nome do box que conterá o sub-menu e sempre se chamará "mdiv" seguida do número da categoria que coincidirá com 'n' explicado mais acima, ex: id="mdiv1", id="mdiv2" etc..

"#" é o endereço da página linkada e "target" o alvo, que pode ser _self, _top,_parent ou o nome de um iframe ou frame.

Edite as cores e estilos dos links e das células na folha de estilo logo abaixo

OBS:
As funções {onmouseover="reveza('um')" onmouseout="volta('um')"} são opcionais, elas revezam as configurações de cores e estilos dos sub-menus trocando as classes itens_menu por itens_menu_r na folha de estilo.

Para usala basta por o código dentro do link relativo ao item de sub-menu, mas é necessário atribuir uma id à td onde se encontra o link que será passado nas funções "reveza" e "volta". O primeiro item de sub-menu está com essa opção à titulo de exemplo.

Não poderá haver dois nomes iguais para as IDs das TDs

Obs.: Código não desenvolvido por mim, mas muito interessante!
<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>

Sim   Não   Este código foi útil para você?
NotaComentário
10
denunciar
kennyhard comentou em 22/10/2009

Show

Mutio bom o seu código Gustavo Henrique. Esse menu é muito funcional. Parabéns.

Kenny Hard - SYOH Blogs
10
denunciar
igorditsuo comentou em 25/8/2009

Bom

Então...

Achei o menu muito bom, porem acho que preciso da mesma informação do zyxel, preciso colocar um sub-menu dentro do próprio sub-menu
10
denunciar
zyxel comentou em 29/1/2009

Show de bola

Continuaçao

Meu caso seria para controle de mensais dividido por ano.

EX: (Menu) Balancete >( SUB-MENU) Ano -> (SUB-MENU) -> Meses.

Já tentei de quase tudo. Fico no aguardo se alguem souver a soluçao. Se eu conseguir colocarei o fonte aqui.
10
denunciar
torres comentou em 23/7/2008

gostei

esse menu dou nota 10;Funcionou perfeitamente no IE e no netscap
10
denunciar
guhsnet comentou em 14/12/2007

bommm

grato por ter ajudado!! \o/
10
denunciar
pettras comentou em 13/12/2007

Muito

Muito bom esse menu.. com scripts simples.. realmente resolveu meu problema.. valeu..
Regras:
Os comentários seguem as seguintes regras:
  • Todos os comentários são enviados por membros cadastrados no site.
  • A pontuação de comentários de conteúdo do próprio membro não serão computados.
  • Os comentários serão pré-aprovados, porém a equipe do site revisará o conteúdo de todos os comentários podendo ser invalidados (inclusive a pontuação).
  • Os comentários precisam ter, obrigatóriamente, coerência sobre o conteúdo que será comentado.
  • O membro que atingir 5 comentários invalidados não poderá mais comentar dentro do site. Com isso o membro não poderá mais ganhar pontos com comentários.
  • Há um limite de 10 comentários por dia para cada membro.
  • Qualquer comentário após ter sido publicado poderá ser retirado através da opção ( denunciar)

Comente

     (ainda não tem cadastro? clique aqui!)

Máximo de 30 caracteres

Máximo de 255 caracteres
 

R&W Consulting - Soluções Web Hospedagem UOL HOST PagSeguro - solução para pagamentos online
© 2006-2009 R&W Informática Ltda. - Todos os direitos reservados.