Menu simple (js pur)

faire un menu déroulant le + simple possible (tous navigs)

by LorenzoFR

HTML

<nav id="blocmenu">
	<ul>
		<li><span class="titremenu">Statuettes</span>
			<ul>
				<li><span class="titremenu">Bois</span>
					<ul>
						<li><a href="#ancienne">ancienne</a></li>
						<li><a href="#récente">récente</a></li>
					</ul>
				</li>
				<li><span class="titremenu">Ceramique</span>
					<ul>
						<li><a href="#ancienne">ancienne</a></li>
						<li><a href="#récente">récente</a></li>
					</ul>
				</li>
			</ul>
		</li>
		<li><span class="titremenu">cage à grillon</span>
			<ul>
				<li><a href="#métal">métal</a></li>
				<li><a href="#os">os</a></li>
				<li><a href="#bois">bois</a></li>
			</ul>
		</li>
		<li><span class="titremenu">Poids</span>
			<ul>
				<li><a href="#Violons">Violons</a></li>
				<li><a href="#Animaux">Animaux</a></li>
			</ul>
		</li>
		<li><span class="titremenu">x</span>
			<ul>
				<li><a href="#Violons">ancienne</a></li>
				<li><a href="#Animaux">récente</a></li>
			</ul>
		</li>
        <li><a href="#objets hors categorie">objets hors categorie</a></li>
	</ul>
</nav>

CSS

#blocmenu{
	width: 250px;
	border: 1px dashed #C0C0C0;
	font: 100% arial;
}
#blocmenu UL{
	padding-left: 20px;
	list-style: none;
}
#blocmenu > UL{
	padding-left: 0px;
}
.titremenu{
	font: bold 110% arial;
	color: #D3E4BA;
	cursor: pointer;
	border: 1px outset gray;
	background-color: #415621;
	padding: 5px;
	margin-top: 5px;
	display: block;
}
#blocmenu LI A{
	font-size: 80%;
	border: 1px inset gray;
	background-color: #D3E4BA;
	margin-top: 6px;
	display: block;
	padding: 2px;
	color: #415621;
}
LI A.pageactive{
	border: 1px outset gray;
}	
LI A.pageactive:after{
	content: url('flecheGauche2.png');
	vertical-align: middle;
	margin-left: 10px;
}

JavaScript

// 1 - cacher tous les UL qui suivent un span.titremenu
// 2 - lors d'un click sur un span.titremenu :
// si sont UL enfant est caché : l'afficher
// si sont UL enfant est affiché : le cacher
var tbSpanTitre = document.getElementsByClassName("titremenu");
console.log(tbSpanTitre);
for( var x in tbSpanTitre ){
    //console.log(x, tbSpanTitre[x]);
    if( tbSpanTitre[x].nextElementSibling ){
        tbSpanTitre[x].nextElementSibling.style.display="none";
        tbSpanTitre[x].onclick = function(e){
            //console.log(e);
            //console.log(e.target.nextElementSibling.style.display);
            if( e.target.nextElementSibling.style.display == "none" ){
                e.target.nextElementSibling.style.display = "block";
            }else{
                e.target.nextElementSibling.style.display = "none";
            }
        }
    }
}