estilo de Janela igual a do site americanas

[Mario Xavier 0]

Olá galera!!

 

alguem ai sabe uma biblioteca ou script msm de uma janela igual ao do site www.americas.com.br no menu do topo ao passar o mouse na imagem "Veja todos os 34 departamentos"

como mostra a imagem abaixo circulado de amarelo:

 

 

Valew ai mais uma vez pessoal e aguardo sua resposta!!

[Nícolas 4]

Cara isso não tem segredo só você fazer um submenu como qualquer outro, porem dentro dele você cria seu conteudo.

 

Pra te ajudar vo postar as partes do código que fazem isso, por exemplo nesse site que fizemos na empresa que trabalho:

http://www.mariuzapregnolato.com.br/

 

Ele ainda é da época que eu era obrigado a montar site em tabelas an empresa mas se ve que sempre que dava eu implementava alguma coisinha sem tabelas, e por sorte o menu foi uma delas que vai facilitar pra você entender http://forum.imasters.com.br/public/style_emoticons/default/grin.gif

 

As partes do código responsável por isso são essas.

 

JAVASCRIPT

Repare que ele tem uma função chamada mostrar, nos proximos códigos repare quando ela é utilizada que ela que faz o menu sumir e aparecer ;)

 

function mostrar (div,valor){	

	if (valor == "1"){
		document.getElementById(div).style.display = "block";
	}else{
		document.getElementById(div).style.display = "none";
	}

}

 

 

 

MENU

<div id="menu">
   <ul>
	  <li><a href="?cont=home">HOME</a></li>
	  <li><a href="?cont=quemsou">QUEM SOU</a></li>
	  <li><a href="java script:void(0);" onMouseOver="mostrar('atuacao','1');" onMouseOut="mostrar('atuacao','0');">ÁREA DE ATUAÇÃO</a></li>
	  <li><a href="java script:void(0);" onMouseOver="mostrar('publicacao','1');" onMouseOut="mostrar('publicacao','0');">PUBLICAÇÕES</a></li>
	  <li><a href="java script:void(0);" onMouseOver="mostrar('midia','1');" onMouseOut="mostrar('midia','0');">MÍDIA</a></li>
	  <li><a href="java script:void(0);" onMouseOver="mostrar('faq','1');" onMouseOut="mostrar('faq','0');">FAQ</a></li>
	  <li><a href="?cont=localizacao">LOCALIZAÇÃO</a></li>
	  <li><a href="?cont=contato">CONTATO</a></li>
   </ul>
</div>

 

 

 

SUBMENU

<!--	SUBMENU		-->
<div id="atuacao" class="submenu" onMouseOver="mostrar('atuacao','1');" onMouseOut="mostrar('atuacao','0');">
	<ul>
		<li><a href="?cont=area_atuacao_psicoterapia">Psicoterapia</a></li>								
		<li><a href="?cont=area_atuacao_orientacao_profissional">Orientação Profissional</a></li>								
		<li><a href="?cont=area_atuacao_ludoterapia">Ludoterapia</a></li>								
		<li><a href="?cont=area_atuacao_trabalho_corporal">Trabalho Corporal</a></li>								
		<li><a href="?cont=area_atuacao_psicodiagnostico">Psicodiagnóstico</a></li>

		<li><a href="?cont=area_atuacao_terapia_casal">Terapia de Casal</a></li>		
	</ul>
</div>

<div id="publicacao" class="submenu" onMouseOver="mostrar('publicacao','1');" onMouseOut="mostrar('publicacao','0');">
	<ul>
		<li><a href="?cont=publicacoes&area=artigos">Artigos</a></li>								
		<li><a href="?cont=publicacoes&area=trabalhos">Trabalhos Científicos e de Pesquisa</a></li>						
	</ul>
</div>

<div id="midia" class="submenu" onMouseOver="mostrar('midia','1');" onMouseOut="mostrar('midia','0');">
	<ul>
		<li><a href="?cont=midia&area=materiais">Matérias publicadas em jornais, revistas, portais e sites</a></li>								
		<li><a href="?cont=midia&area=tv">Participação em programas de TV</a></li>	
		<li><a href="?cont=midia&area=radio">Participação em programas de rádio</a></li>	
		<li><a href="?cont=midia&area=entrevistas">Íntegra de entrevistas concedidas</a></li>	
	</ul>
</div>

<div id="faq" class="submenu" onMouseOver="mostrar('faq','1');" onMouseOut="mostrar('faq','0');">
	<ul>

		<li><a href="?cont=faq_sobre_a_ansiedade">Sobre a Ansiedade</a></li>								
		<li><a href="?cont=faq_sobre_gestacao_tardia">Sobre Gestação Tardia</a></li>	
		<li><a href="?cont=faq_sobre_o_complexo_de_superioridade">Sobre o Complexo de Superioridade</a></li>	
		<li><a href="?cont=faq_sobre_o_que_e_ser_normal">Sobre O que é Ser Normal</a></li>
		<li><a href="?cont=faq_sobre_o_transtorno_do_panico">Sobre o Transtorno do Pânico</a></li>
		<li><a href="?cont=faq_sobre_psicoterapia">Sobre Psicoterapia</a></li>
		<li><a href="?cont=faq_sobre_ser_uma_pessoa_bem_resolvida">Sobre ser uma Pessoa Bem-Resolvida</a></li>	
	</ul>

</div>
<!--	SUBMENU		-->

 

CSS

.submenu {
	position:absolute;
	left: 50%;
	top: 196px;
	display: none;
}



.submenu ul li a {

	width: 170px;
	height: 25px;
	display: block;
	line-height: 25px;
	padding: 0px 10px;
	background: url(imagens/fundo_menu.png);
	color: #FFF;
	text-transform: uppercase;
	border: 1px solid #618282;	
	text-decoration: none;
}


.submenu ul li a:hover {
	background: #E9EEEE;
	color: #618282;
}



#atuacao 			{	margin-left: -220px; 	}
#publicacao 		{	margin-left: -120px; 	}
#publicacao ul li a {	width: 235px; 			}
#midia 				{	margin-left: -90px; 	}
#midia ul li a 		{	width: 355px; 			}
#faq 				{	margin-left: 20px; 	}
#faq ul li a 		{	width: 235px; 			}

Da uma estudada no porque de cada coisa que se pega facinho.

 

Apenas pra constar, sobre aquele javascript.

 

Isso faz com que a div do submenu atuação seja mostrada

mostrar('atuacao','1');

E isso com que ela seja ocultada

mostrar('atuacao','0');

O mesmo se aplica a todas as outras http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

Flw