Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa noite!
Estou querendo fazer um menu horizontal, tipo:
<div id="menu_hor">
<div align="center">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Apt A</a></li>
<li><a href="#">Apt B</a></li>
<li><a href="#">Apt C</a></li>
<li><a href="#">Casa</a></li>
</ul>
</div>
</div>Onde ao clicar no item Casa o menu seria substituído por outro menu, tipo:
<div id="menu_hor">
<div align="center">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Casa A</a></li>
<li><a href="#">Casa B</a></li>
<li><a href="#">Casa C</a></li>
</ul>
</div>
</div>e clicando em Home voltaria para página inicial com o primeiro menu
A substituição seria no mesmo lugar, um pelo outro.
Alguém sabe como poderia fazer esta troca de menus?
Qualquer ajuda será bem vinda.
kklo
Eu não gosto de foma alguma de passar códigos pronto, mas vou mostrar um exemplo, aí é só analisar e adaptar da forma que precisa, caso seja isso mesmo que queira.
HTML
...
<nav id="menu_hor">
<ul class="menu" id="apt">
<li><a href="#">Home</a></li>
<li><a href="#">Apt A</a></li>
<li><a href="#">Apt B</a></li>
<li><a href="#">Apt C</a></li>
<li><a href="#casa">Casa</a></li>
</ul>
<ul class="menu" id="casa">
<li><a href="#">Home</a></li>
<li><a href="#">Casa A</a></li>
<li><a href="#">Casa B</a></li>
<li><a href="#">Casa C</a></li>
</ul>
</nav>
....menu {display: none;}
#apt {display: block;}
JavaScript (jQuery)
$(document).ready(function(){
$('li a').click(function(){
href = $(this).attr("href");
if(href === "#casa"){
$("#apt").css('display','none');
$("#casa").css('display','block');
}
});
});Muito obrigado, consegui
Com jQuery você consegue o efeito desejado eu acredito.
Dê uma olhada nisso
http://forum.imasters.com.br/topic/447826-refresh-na-div-com-jquery/
Ou nisso
http://webvisao.wordpress.com/2012/06/17/tutorial-como-fazer-uma-div-se-atualizar-sem-refresh-ou-reload-da-pagina-completa/
Uma outra maneira de fazer isso seria usando um iframe no html.