Un menu accordéon pour la navigation par mots clés

lundi 2 novembre 2009
par  _Equipe_
popularité : 40%

Je souhaitais avoir également un menu accordéon pour la navigation par groupes de mots clés.

De plus, j’ai modifié les boucles originales car il me semblait y avoir un petit bug dans le tri par groupes. Les mots étaient rangés par ordre alphabétique mais cela ne correspondait pas toujours au groupe de mot auquel il appartenait.

Je vous joins

le script
le style
et les boucles

<head>
<style type="text/css">
.menutitle{
cursor:pointer;
margin-bottom: 5px;
background-color:#ECECFF;
color:#000000;
width:100%;
padding:2px;
text-align:center;
font-weight:bold;
/*/*/border:1px solid #000000;/* */
}

.submenu{
margin-bottom: 0.5em;
}

.liste {cursor:pointer;
margin-bottom: 5px;
background-color:#ECECFF;
color:#000000;
width:100%;
padding:2px;
text-align:center;
font-weight:bold;
/*/*/border:1px solid #000000;/* */
}
</style>

<script type="text/javascript">
if (document.getElementById){ //DynamicDrive.com change
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}

function SwitchMenu(obj){
	if(document.getElementById){
	var el = document.getElementById(obj);
	var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
		if(el.style.display != "block"){ //DynamicDrive.com change
			for (var i=0; i<ar.length; i++){
				if (ar[i].className=="submenu") //DynamicDrive.com change
				ar[i].style.display = "none";
			}
			el.style.display = "block";
		}else{
			el.style.display = "none";
		}
	}
}

</script>
</head>


<body>
<div id="masterdiv">


<div id="noisette_motscles" class="noisette">
<h1 class="intitule" >Recherche par mots clés</h1>

	<div class="contenu">
<BOUCLE_groupes(GROUPES_MOTS){par titre}>
	<div class="menutitle" onclick="SwitchMenu('sub#ID_GROUPE')"><h2 class="titre_bloc" >#TITRE</h2></div>
	<span class="submenu" id="sub#ID_GROUPE">
		
	<BOUCLE_mots(MOTS){id_groupe}{par titre}{" - "}>
			<div class="liste">
			<ul>
			<li><a class="titre" href="#URL_MOT"[ title="(#DESCRIPTIF|textebrut|entites_html)"]>#TITRE</a></li>
			</ul>
			</div>
	</BOUCLE_mots>

	</span>
	
</BOUCLE_groupes>
</div></div>

</div>
</body>

Mike