Menu slideDown e slideUp com jQuery.

Fala, galera tudo bom ? Estou meio sumido pois ando com o tempo muito curto. Desenvolvi estes dias um menu em jQuery com um efeito bem moderno o slideUp e o slideDown. Ele tambem possui a opção de colocar submenus com este mesmo efeito.

Vamos lá, primeiramente vamos criar o arquivo .css

<style>

	.menu_barra_titulo{
		font-size:14px;
		width:178px;
		min-height:22px;
		color:#005335;
		text-align:center;
		padding:0px;
		cursor:pointer;
		
	}
	
	.menu_barra_titulo:hover{
		background-image:none;
		cursor:pointer;
		font-weight: bold;
		
	}

	
	#enquadramento-barra-titulo{
		background-image:url(bt-out.jpg);
		padding-top:8px;
		text-align:center;
		min-height:19px;
		font-weight: bold;
	}
	
	#enquadramento-barra-titulo:hover{
		background-image:url(bt-over.jpg);	
		padding-top:8px;
		text-align:center;
		min-height:19px;
	}
	
	
	.menu_item{
		text-decoration:none;
		background-image:url(comum-quadrado-verde-out.jpg);
		margin: 0; padding:0;
		width:172px;
	}
	
	.menu_item li:hover{
		background-image:url(comum-quadrado-verde-in.jpg);
	}
	
	li.menu_linha{ padding-left:20px; }

		
	a.linkmenu{
		text-decoration:none;
		color:#005335;
	}
	
	a.linkmenu:link {
		text-decoration:none;
	}
	
	a.linkmenu:hover {
		font-style:italic;
		text-decoration:none;
		color:#663333
	}

	.menu_barra_item{
	}
	
	.menu_subbarra_titulo{		
		padding:0px; 
		margin:0px; 
		width:174px;
	}

</style>

Eu usei algumas imagens, mas vocês podem estar mudando elas perfeitamente.

Agora o arquivo html:

	<div id="explorerColunaMenu">
	
		<div class="menu_barra_titulo">
			<div id="enquadramento-barra-titulo">
				<b>MENU PAI</b>
			</div>
			<div class="menu_barra_item">
				<ul class="menu_item">
					<li><a href="#" class="linkmenu">Menu 1</a> </li>
					<li><a href="#" class="linkmenu">Menu 2</a> </li>
				</ul>
			</div>
		</div>
		

		<div class="menu_barra_titulo">
			<div id="enquadramento-barra-titulo">
				<b>MENU PAI</b>
			</div>
			
			<div class="menu_barra_item">
				<ul class="menu_item">
					<li class="menu_linha"><a href="#" class="linkmenu">Menu 1</a></li>
					<li class="menu_linha"><a href="#" class="linkmenu">Menu 2</a></li>
				</ul>
			</div>
		</div>
		
		<div class="menu_barra_titulo">
			<div id="enquadramento-barra-titulo"><b>Caracterização</b></div>
			
			<div class="menu_barra_item">	
				<ul class="menu_item">
					<div class="menu_subbarra_titulo">
						<div id="enquadramento-barra-titulo">Perguntas Dinâmicas 1</div>
						<div class="menu_barra_item">
							<ul class="menu_subitem">
								<li class="menu_linha"><a class="linkmenu">Lista de Opções</a></li>
								<li class="menu_linha"><a class="linkmenu">Fase de licenciamento</a></li>
							</ul>
						</div>
					</div>
				</ul>
			</div>
			<div class="menu_barra_item">	
				<ul class="menu_item">
					<div class="menu_subbarra_titulo">
						<div id="enquadramento-barra-titulo">Perguntas Dinâmicas 2</div>
						<div class="menu_barra_item">
							<ul class="menu_subitem">
								<li class="menu_linha"><a class="linkmenu">Lista de Opções</a></li>
								<li class="menu_linha"><a class="linkmenu">Fase de licenciamento</a></li>
							</ul>
						</div>
					</div>
				</ul>
			</div>
			
		</div>

	</div>

E por fim o código JS:

jQuery(document).ready(function(){

	jQuery(".menu_barra_item").hide();
	jQuery(".menu_subitem").hide();		

	
	
	jQuery(".menu_barra_titulo").click(function(){
		jQuery(".menu_barra_item").slideUp("fast");
		jQuery(this).find(".menu_barra_item").slideDown("fast");

		jQuery('.menu_subbarra_titulo').children('#enquadramento-barra-titulo').css('border-left','1px solid #3e664c');
		jQuery('.menu_subbarra_titulo').children('#enquadramento-barra-titulo').css('border-top','1px solid #3e664c');
		jQuery('.menu_subbarra_titulo').children('#enquadramento-barra-titulo').css('border-bottom','1px solid #3e664c');
		jQuery('.menu_subbarra_titulo').children('#enquadramento-barra-titulo').css('font-weight','normal');
		jQuery('.menu_subbarra_titulo').children('#enquadramento-barra-titulo').css('text-color','1px solid #3e664c');
		jQuery('.menu_subbarra_titulo').children('#enquadramento-barra-titulo').css('background-color','#e3fedd');
		jQuery('.menu_subbarra_titulo').children('#enquadramento-barra-titulo').css('background-image','url()');
		jQuery('.menu_subbarra_titulo').children('#enquadramento-barra-titulo').css('text-align','left');
		jQuery('.menu_subbarra_titulo').children('#enquadramento-barra-titulo').css('padding-left','15px');
		
		// caso queira formatar os sub-menus
		//jQuery('.menu_subbarra_titulo').children('div.menu_barra_item').css("display","none");
		

	});   
	
	jQuery(".menu_subbarra_titulo").click(function(){
		jQuery(".menu_subitem").slideUp("fast");
		jQuery(this).find(".menu_subitem").slideDown("fast");
	});
});

Vocês vão precisar da api jquery que se encontra neste site para download: http://jquery.com/

Vocês podem otimizar a vontade pois fiz meio rápido o código, da para colocar slideToggle etc… Mas espero que seja útil para vocês!

Até a próxima pessoal!