[Resolvido] como criar menu com colapso

[Minarini 0]

ola pessoal alguem ai sabe como fazer um menu igual ao so site do Maujor aquele que clica ai abre o submenu se clicar denovo fecha o sub menu alguem tem uma luz?

[William Bruno 1501]

Além da estrutura básica, de menus com submenus

<ul id="menu">
 <li><a href="">Item</a>
	<ul>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
	</ul>
 </li>
 <li><a href="">Item</a>
 <li><a href="">Item</a>
	<ul>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
	</ul>
 </li>
</ul><!-- /menu -->

você vai precisar trabalhar com a propriedade display: none/block do CSS.

Acessando via Javascript.

 

O do maujor em específico foi feito com jQuery. Os efeitos de transição, de sumir e aparecer lentamente são facilmente conseguidos com esse FW.

Oque você já tem ? vá desenvolvendo, que conforme forem surgindo as dúvidas, o pessoal vai te ajudando.

[Minarini 0]

ok mas conpensa usar este framework apenas para o menu. eu ja estou usando extjs mas estou evitando de fazer um site com cara de ext

[Minarini 0]

ai pessoal vou usar jquery mesmo ele é muito com e levinho. mas estou com dificuldades com o menu é o seguinte tenho um menu veja

 

<div id="corpo_esquerda_menu">
							<dl>
								<dt><a href="java script:void();">Empresa</a></dt>
								<dt><a href="java script:void();">O Carro</a></dt>
								<dt><a href="java script:void();">Produtos</a></dt>
								<dd>
									<ul>
										<li><a href="java script:void();">Industrializados</a></li>
										<li><a href="java script:void();">Acessorios</a></li>
										<li><a href="java script:void();">Segurança</a></li>
										<li><a href="java script:void();">Impressos</a></li>
									</ul>
								</dd>
								<dt><a href="java script:void();">Downloads</a></dt>
								<dt><a href="java script:void();">Contato</a></dt>
							</dl>
						</div>

$(document).ready(function(){
				$("dd:not(#dd_open)").hide();
				$("dt a").click(function(){
					$("dd:visible").slideUp("slow");

					var prox = $(this).parent().next()
					if(prox[0].nodeName=='DD'){
						$(this).parent().next().slideDown("slow");
						return false;
					}
					var back = $(this).parent().back()
					if(prox[0].nodeName=='DD'){
						$(this).parent().back().slideUp("slow");
						return false;
					}
				});
			});



#corpo_esquerda_menu{
	text-align:left;
	padding-left:20px;
	width: 170px;
	margin-top:10px;
	background: #DFE0E3;
	font-weight:bold;
	border : 2px solid #EAEFF4;
}

/*Formata o menu do JQuery. Legenda: dl=menu, dt=opcao, dd=subOpcao*/
dt { background: #DFE0E3; 
	font: bold 13px arial, helvetica, sans-serif;
}
dt a { color: #000033;
	text-decoration: none;
	display: block;
}
dd a { color: #000033;
	text-decoration: none;
	padding-left:10px;
	display: block;
}
ul { list-style: none; 
	list-style-position: outside;
	list-style-image: url(../images/seta.gif);
	font: bold 13px arial, helvetica, sans-serif;
}
dd a:hover, dt a:hover {
	background-color:#EAEFF4;
	color:silver;
}

pergunta. como colocar as setas para as opções pai e filhos (no caso tenho varios pai e um filho que é do produtos)?

 

 

cestou clicando no menu pai de produto e esta recuando a expandindo sem eu clicar pra expandir porque será? não esta respeitando para clico pra abrir abra clico pra fechar feche!

[Minarini 0]

resolvi obrigado! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif