Menu dynamique vertical paramétrable

Soyez le premier à donner votre avis sur cette source.

Snippet vu 45 509 fois - Téléchargée 31 fois

Contenu du snippet

Ce Menu Dynamique Vertical est paramétrable selon vos besoins et vos gouts.

- Couleur et police du texte,
- Couleur et taille des cellules,
- Position du menu,
etc. (18 paramètres à votre disposition)

Le menu fait surtout appel aux feuilles de style CSS.
Il est bien sûr possible de l'améliorer et de le complèter grâce à CSS.

Source / Exemple :


<html>
<head>
<title>Menu vertical parametrable</title>
<script type="text/javascript">

window.onload = affiche;

// ----- Fonction d'affichage des menus -----

function affiche (id) {

var d = document.getElementById(id);

var nbelmenu = 4		// nombre d'éléments dans le menu

for ( var i = 1 ; i <= nbelmenu ; i++ ) {
	if ( document.getElementById('sousmenu'+i) ) {
		document.getElementById('sousmenu'+i).style.display='none';
	}
}
if (d) {
	d.style.display='block';
}
}

</script>

</head>
<body>
<script type="text/javascript">

var fontfamil   = "arial, sans-serif" ;	// choix de la police de caractères du menu
var tailleftmen = "90%" ;				// taille de la police du menu
var fontcolo    = "#FFFFDD" ;			// couleur de la police de caractères du menu
var cellbckgrnd = "#999966" ;			// couleur des cellules du menu
var positionver = 1 ;					// position verticale du menu dans la page
var positionhor = 1 ;					// position horizontale du menu dans la page
var largeurcell = 8 ;					// largeur des cellules du menu
var hauteurcell = 18 ;					// hauteur des cellules du menu
var espacemcell = 6 ;					// espace entre les cellules du menu
var subfontfamil   = "arial, sans-serif" ;	// choix de la police de caractères des sous-menus
var subtailleftmen = "80%" ;				// taille de la police des sous-menus
var subfontcolo    = "#000000" ;			// couleur de la police de caractères des sous-menus
var subftsucolo    = "#FFCC00" ;			// couleur de la police de sous-menus survolés
var subcellbckgrnd = "#999966" ;			// couleur des cellules des sous-menus
var submovcellmenu = "absolute" ;			// "absolute"=sans déplacement des cellules menu ("relative" = avec déplacement)
var subcellposhor  = 3 ;					// position horizontale des cellules des sous-menus
var sublargeurcell = 6 ;					// largeur des cellules des sous-menus
var subhauteurcell = 15 ;					// hauteur des cellules des sous-menus

// creation des styles CSS du menu --->
document.write( "<style type='text/css'>" );

document.write( "#menuvert {position: relative;top: " + positionver + "em;" );
	document.write( "left: " + positionhor + "em;" );
	document.write( "width: " + largeurcell + "em;}" ) ;

document.write( "#menuvert dt {font-family: " + fontfamil + ";" ) ;
	document.write( "font-size: " + tailleftmen + ";color: " + fontcolo + ";" );
	document.write( "text-align: center;background: " + cellbckgrnd + ";" );
	document.write( "cursor: hand;height: " + hauteurcell )
	document.write( "px;margin: " + espacemcell + "px;list-style-type: none;}" );

document.write( "#menuvert dd {background: " + subcellbckgrnd + ";" );
	document.write( "position: absolute;left: " + subcellposhor + "em;" );
	document.write( "margin-top: -1em;width: " + sublargeurcell + "em;}" );

document.write( "#menuvert li {font-family: " + fontfamil + ";" );
	document.write( "font-size: " + subtailleftmen + ";list-style-type: none;" );
	document.write( "height: " + subhauteurcell + "px;}" );

document.write( "#menuvert li a, #menuvert dt a {color: " + subfontcolo + ";" );
	document.write( "text-decoration: none;}" );

document.write( "#menuvert li a:hover {color: " + subftsucolo + ";" );
	document.write( "text-decoration: none;}" );

document.write( "}</style>" );
// FIN des styles CSS

</script>

</head>
<body>
<dl id="menuvert">
	<dt onmouseover="javascript:affiche('sousmenu1');" onmouseout="javascript:affiche();">Menu 1<!--remplacer Menu 1 par le texte du menu--></dt>
		<dd id="sousmenu1" onmouseover="javascript:affiche('sousmenu1');" onmouseout="javascript:affiche();">
			<ul>
				<li><a href="menu11.htm"><!--remplacer menu11.htm par le lien du menu-->Menu 1.1<!--remplacer Menu 1.1 par le texte du menu--></a></li>
			</ul>
		</dd>
         
	<dt onmouseover="javascript:affiche('sousmenu2');" onmouseout="javascript:affiche();">Menu 2</dt>
		<dd id="sousmenu2" onmouseover="javascript:affiche('sousmenu2');" onmouseout="javascript:affiche();">
			<ul>
				<li><a href="menu21.htm">Menu 2.1</a></li>
				<li><a href="menu22.htm">Menu 2.2</a></li>
			</ul>
		</dd>

	<dt onmouseover="javascript:affiche('sousmenu3');" onmouseout="javascript:affiche();">Menu 3</dt>
		<dd id="sousmenu3" onmouseover="javascript:affiche('sousmenu3');" onmouseout="javascript:affiche();">
			<ul>
				<li><a href="menu31.htm">Menu 3.1</a></li>
				<li><a href="menu32.htm">Menu 3.2</a></li>
				<li><a href="menu33.htm">Menu 3.3</a></li>
			</ul>
		</dd>

	<dt onmouseover="javascript:affiche('sousmenu4');" onmouseout="javascript:affiche();">Menu 4</dt>
		<dd id="sousmenu4" onmouseover="javascript:affiche('sousmenu4');" onmouseout="javascript:affiche();">
			<ul>
				<li><a href="menu41.htm">Menu 4.1</a></li>
				<li><a href="menu42.htm">Menu 4.2</a></li>
				<li><a href="menu43.htm">Menu 4.3</a></li>
				<li><a href="menu44.htm">Menu 4.4</a></li>
			</ul>
		</dd>

</dl>
</body>
</html>

Conclusion :


- La source étant largement documentée, il n'est pas nécessaire en principe d'y adjoindre une explication de fonctionnement.

- Testé sous IE et Firefox.

A voir également

Ajouter un commentaire

Commentaires

Messages postés
2
Date d'inscription
vendredi 6 février 2009
Statut
Membre
Dernière intervention
6 février 2009

Comment ajouter des niveaux dans l'arborescence du menu. Ici il y a deux niveaux. Merci de donner un exemple. Merci d'avance. J'ai essayé mais le réultat n'est pas super. Les autres niveaux s'ouvrent en même temps que le niveau 2.
Jack
Messages postés
47
Date d'inscription
samedi 29 mars 2003
Statut
Membre
Dernière intervention
24 mars 2012

Salut, je l'ai installé et tout marche avec IE et Firefox... Très modifiable aucun soucis.

J'ai juste un problème : Quand je vais sur ma page, mes 2 menus sont déjà ouvert et il faut que je passe la souris dessus pour qu'il disparaissent... pas cool. J'ai ce problème sur firefox et sur ie.

help plz
Messages postés
4
Date d'inscription
samedi 2 juin 2007
Statut
Membre
Dernière intervention
11 juin 2007

merci pour le script ! ;
je suis bleu (newbie) : jai mis le script dans le cadre de gauche (frame) mais une partie reste caché dessous le cadre de droite !
comment faire ? et encore merci
Messages postés
71
Date d'inscription
dimanche 23 novembre 2003
Statut
Membre
Dernière intervention
28 septembre 2017

Bonjour Phil_Free,
J'utilise ton script et ça fonctionne bien. Je voudrais maintenent l'utiliser pour un second menu vertical dans la même page HTML. Est-ce possible ? J'ai bien essayé en scindant la constante (paramètre) en 2 passée à l'appel de la fonction par ex. comme ceci :
pour le 1er menu vertical ==> affiche ('sousmenu','1')...
et pour le 2ème menu vertical ==> affiche ('sous-menu','1')...
Ensuite, j'ai adapté la fonction comme ceci :

function affiche (nsmenu,no) {
var id=String(nsmenu)+ String(no);
var d = document.getElementById(id);

var nbelmenu = 4 ; // nombre d'éléments dans le menu

for ( var i = 1 ; i <= nbelmenu ; i++ ) {

if ( document.getElementById(nsmenu+i) ) {
document.getElementById(nsmenu+i).style.display='none';
}
}
if (d) {
d.style.display='block';
}
}

C'est le onmouseout="javascript:affiche();" qui ne marche plus. Et cela pour aucun des 2 menus verticaux. As-tu une explication ?

Excuse-moi de ne pas avoir répondu à ton message plus haut. J'avais complètement oublié ma question mais le problème est toujours d'actualité. Tu peux visualiser cela sur mon site :
http://homeusers.brutele.be/metalcat dans la rubrique "LES TRAVAUX". Ton menu vertical se trouve à chaque x sur la droite de l'écran (parfois en bleu, parfois en rouge).

metalcat
Messages postés
1
Date d'inscription
mercredi 18 octobre 2006
Statut
Membre
Dernière intervention
3 avril 2007

super ! merci bien cela m'a été d'une aide précieuse !!!
Afficher les 23 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.