Menu Horizontal Esconde e mostrra

Menu feito com CSS e Jquery que mostra e esconde os elementos

by Ricardo Miranda

HTML

<div id="menu-cinza">
    <ul>
        <li><a href="teste1">HOME | </a></li>
        <li><a href="teste2"> PRODUTOS | </a></li>
        <li><a href="teste3"> QUEM SOMOS |</a></li>
        <li><a href="teste4"> NOVIDADES | </a></li>
        <li><a href="teste5"> FALE CONOSCO</a></li>
        
    </ul>
</div>    

<div id="teste1" class="itens">
    <h1>Link.1</h1>    
    <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
</div>    

<div id="teste2" class="itens">
    <h1>Link.2</h1>    
    <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
</div>    

<div id="teste3" class="itens">
    <h1>Link.3</h1>    
    <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
</div>    

<div id="teste4" class="itens">
    <h1>Link.4</h1>    
    <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis....

CSS

*{font-size:14px;}
.itens{display:none;}
#teste1,#teste2,#teste3,#teste4,#teste5{display:none;}
#menu-cinza {width:550px;}
#menu-cinza ul { overflow: hidden}
#menu-cinza ul li{list-style:none;float:left;}
#menu-cinza a:link, a:visited{text-decoration:none;}
#menu-cinza a:hover{ color:#FFBE00;}

JavaScript

$(document).ready(function(){		
		$("#menu-cinza li a").click(function(event){
            var id = "#"+$(this).attr("href"); 
            $(id).siblings('.itens').hide()
            $(id).show();
            event.preventDefault();
        });
});