RSmenu

Menu Déroulant en css/javascript

Le menu par défaut se présente de la manière que le menu en haut de cette page. L'avantage de ce menu est que les liens restent accessibles si l'utilisateur a désactivé javascript sur son navigateur ou si le navigateur ne prend pas en compte le javascript.

Mise en place du menu

La mise en place du menu est relativement aisée :

Mise en place du contenu de la page
Mise en place des éléments du menu
Mise en place du gestionnaire d'evenement dans la balise body

Mise en place du contenu de la page

Appelez le script javascript ainsi que la feuille de style dans l'en-tête de votre document(entre les balise <head> et </head>) :

  <link href="media/RSmenu.css" rel="stylesheet" type="text/css" />
	 <script type="text/javascript" src="media/RSmenu.js"></script>

Vous devez impérativement mettre en place le contenu de votre page dans un conteneur (balise div) avec comme attribut d'id RSdocumentContent ou si avez un site utilisant déjà des conteneurs (XHTML) mettre un appele à la méthode hideRSmenu() sur l'évenement onmouseover. Exemple :

		<div id="RSdocumentContent" onmouseover="hideRSmenu();">
		<!-- 
		Contenu de votre document ici.
		Vous pouvez également reprendre juste l'evenement onmouseover pour l'inserer dans votre document.
		La méthode appelée sert à masquer les éventuels menus affichés-->
		<h1>Titre de ma page </h1>
		<h2>Sous-titre</h2>
		...
		</div>

Mise en place des éléments du menu

La mise en palce des éléments est simplement une suite de balise paragraphe représentant l'intitulé du menu et d'une liste représentant les liens du menu. Exemple :

		<p>Menu 1</p>
		<ul>
		<li><a href="#"><img src="img/icone1.png" width="20" height="20" />lien 1-1</a></li>
		<li><a href="#"><img src="img/icone2.png" width="20" height="20" />lien 1-2 un peu plus long</a></li>
		<li><a href="#"><img src="img/icone3.png" width="20" height="20" />lien 1-3</a></li>
		</ul>
		<p>Menu 2</p>
		<ul>
		<li><a href="#"><img src="img/icone1.png" width="20" height="20" />lien 2-1</a></li>
		<li><a href="#"><img src="img/icone2.png" width="20" height="20" />lien 2-2</a></li>
		<li><a href="#"><img src="img/icone3.png" width="20" height="20" />lien 2-3</a></li>
		</ul>

Mise en place du gestionnaire d'évenement dans la balise body

Il vous suffit de rajouter le code suivant dans la balise body de votre document :

onload="RSmenuInit();"

Télécharger RSmenu

Accueil rs-dev.com