menu

by LorenzoFR

HTML

<div class="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>
	</ul>
</div>

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;
}
/* marche plus ! */
.pageactive{
	border: 1px outset gray;
}	
.pageactive:after{
	content: url('flecheGauche2.png');
	vertical-align: middle;
	margin-left: 10px;
}

JavaScript

$(document).ready(function() {
	$("span.titremenu").next().hide();
	$("span.titremenu").click(function(e){
		if ( $(this).next(':hidden').length == 1 ){
			$(this).next().show(400);
		}else{
			$(this).next().hide(400);
		}
	});
	// contient le chemin vers la page courante (nom du fichier ou chemin vers ce fichier), le menu doit etre ouvert sur cette page
	// et l'emplacement marqué !
	var page = "Statuettes_Ceramique_ancienne";
	if( page != "" ){
		var tbPage = page.split('_');
		$.each(tbPage, function(i, nom){
		$("span.titremenu:contains("+nom+")").trigger('click');
		if( i == tbPage.length - 1 ){
			$("span.titremenu:contains("+tbPage[i-1]+")").parent().find("a:contains("+nom+")").addClass("pageactive");
		}
	});
	}
});