Menu déroulant

Soyez le premier à donner votre avis sur cette source.

Vue 11 461 fois - Téléchargée 1 273 fois

Description

C'est un menu style onglets. Chaque onglet permet d'afficher les sous menus. L'intérêt se trouve dans l'animation. Chaque "onglet" se déplace verticalement laissant apparaitre avec lui le contenu du sous menu.

Source / Exemple :


Fichier menu.html : 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel='stylesheet' href='./styles/stylemenu.css' type='text/css' />
<link rel='stylesheet' href='./styles/gestmenu.css' type='text/css' />
<SCRIPT type="text/javascript" src="./script/menu.js">
</SCRIPT>

</head>
<!--
	Fonction d'initalisation du menu. (c.f. ./script/menu.js)
	Rappel des paramètres :
		idStyle : Index de la feuille de style contenu la définition des positions de menus (./styles/gestmenu.css)
		hautMenu : Hauteur totale en px d'une page de menu
		hautTitre : Hauteur en px du titre du menu 
		largMenu : Largeur du menu
		topPos : Position par rapport au haut de la page en px de la première page de menu
		leftPos : Position par rapport au bord gauche de la page en px des pages de menu
		inter : intervale en px d'ouverture et de fermeture d'un menu
		idMenu : numéro de menu a afficher à l'initialisation.
 -->
<body onload="javascript:initMenu(1, 400, 20, 200, 20, 20, 10, 0);">
<form action="" method="post" name="menu">
<div class="cadremenu1">
	<!--  Numéroter chaque page de menu (div) en commencant par 0  -->
	<a href="#" onclick="javascript:showMenu(0);" class="titre">Menu 1</a>
	<br/>
	<br/>
	<ul class="soustitreli">
		<li><a href="#" class="soustitre">Sous Menu 1.1</a></li>
		<li><a href="#" class="soustitre">Sous Menu 1.2</a></li>
		<li><a href="#" class="soustitre">Sous Menu 1.3</a></li>
	</ul>
</div>
</form>
<div class="cadremenu2">
	<a href="#" onclick="javascript:showMenu(1);" class="titre">Menu 2</a>
	<br/>
	<br/>
	<ul class="soustitreli">
		<li><a href="#" class="soustitre">Sous Menu 2.1</a></li>
		<li><a href="#" class="soustitre">Sous Menu 2.2</a></li>
	</ul>
</div>

<div class="cadremenu3">
	<a href="#" onclick="javascript:showMenu(2);" class="titre">Menu 3</a>
	<br/>
	<br/>
	<ul class="soustitreli">
		<li><a href="#" class="soustitre">Sous Menu 3.1</a></li>
		<li><a href="#" class="soustitre">Sous Menu 3.2</a></li>
		<li><a href="#" class="soustitre">Sous Menu 3.3</a></li>
		<li><a href="#" class="soustitre">Sous Menu 3.4</a></li>
	</ul>
</div>

<div class="cadremenu4">
	<a href="#" onclick="javascript:showMenu(3);" class="titre">Menu 4</a>
	<br/>
	<br/>
	<ul class="soustitreli">
		<li><a href="#" class="soustitre">Sous Menu 3.1</a></li>
		<li><a href="#" class="soustitre">Sous Menu 3.2</a></li>
		<li><a href="#" class="soustitre">Sous Menu 3.3</a></li>
	</ul>
</div>

<div class="cadremenu5">
	<a href="#" onclick="javascript:showMenu(4);" class="titre">Menu 5</a>
	<br/>
	<br/>
	<ul class="soustitreli">
		<li><a href="#" class="soustitre">Sous Menu 5.1</a></li>
		<li><a href="#" class="soustitre">Sous Menu 5.2</a></li>
		<li><a href="#" class="soustitre">Sous Menu 5.3</a></li>
	</ul>
</div>

</body>
</html>

//-------------------------------------------------------------------------
Fichier menu.js (gère l'animation du menu) :

/**
Fonctions javascript d'animation du menu.
	Le principe : 
		On a autant de div que de pages de menu.
		Les div sont superposés les uns sur les autres avec un décalage en hauteur pour permetre l'affichage
		du titre de chaque page (div) de menu.
		
		Lorsqu'on veut afficher une page, toutes les pages de menu dont le titre est en dessous sont réduites
		et toutes les pages de menu dont le titre est	au dessus sont agrandies. 
		De cette manière seule la page selectionnée est visible	car elle cache les pages de menu dont le 
		titre est au dessus.
		
		Le programme se base sur la feuille de style qui décrit les positions des menus (ici gestmenu.css)
		Il doit donc y avoir exactement autant de classes css dans cette feuille de style que de pages (div) de menu.
		 - La premiere classe doit etre affectée la premirer page de menu.
		 - La seconde classe à la deuxieme page de menu et ainsi de suite...
		
		Le données communes au menu peuvent etre regroupées dans une seule classe mais doit être placée 
		dans une autre feuille de style. (ici stylemenu.css)
		
		Les données qui doivent apparaitre obligatoirement dans la feuille de style d'animation des menus sont : 
		 - height, 	pour l'initialisation par la fonction initMenu
		 - width, 	pour l'initialisation par la fonction initMenu
		 - top, 		pour l'initialisation par la fonction initMenu
		 - left, 		pour l'initialisation par la fonction initMenu
		 - z-index, qui permet de déterminer l'ordre d'affichage sur l'axe z des pages de menu.

	Pour ajouter une page de menu.
		- Dans la pages HTML : 
				- Ajouter un nouveau div avec une nouvelle classe css 
 				- Ajouter le nouvel index dans la fonction showMenu (index précédent + 1) 
 						Remarque : la numérotation des index doit commencer obligatoirement par 0
		- Dans la feuille de style de gestion de l'animation des menus
				- recopier une classe css d'une page a la suite des autres classes
				- renomer la classe ave le nom donné dans la nouvelle page de menu
				- mettre à jour le z-index pour qu'elle s'affiche au dessous de toutes les autres.

  • /
// Gère l'animation du menu : idStyleSheet = 0; // Identifiant de la feuille css qui gere l'animation du menu. hauteurMenu = 0; // Hauteur totele initiale d'une page de menu hauteurTitre = 0; // Hauteur du titre d'une page de menu. Il s'agit de la partie toujours visible du menu largeurMenu = 0; // Largeur d'une page de menu topPosition = 0; // Position par rapport au haut de la page HTML leftPosition = 0; // Position par rapport au bord gauche de la page HTML intervale = 0; // Intervale de déplacement d'un menu. /* la fonction initalise le menu. elle doit appelée dans le onload de la page HTML idStyle : Index de la feuille de style contenu la définition des positions de menus (./styles/gestmenu.css) hautMenu : Hauteur totale en px d'une page de menu hautTitre : Hauteur en px du titre du menu largMenu : Largeur du menu topPos : Position par rapport au haut de la page en px de la première page de menu leftPos : Position par rapport au bord gauche de la page en px des pages de menu inter : Intervale en px d'ouverture et de fermeture d'un menu idMenu : Numéro de menu a afficher à l'initialisation.
  • /
function initMenu(idStyle, hautMenu, hautTitre, largMenu, topPos, leftPos, inter, idMenu) { hauteurMenu = hautMenu + "px"; hauteurTitre = hautTitre + "px"; largeurMenu = largMenu + "px"; topPosition = topPos + "px"; leftPosition = leftPos + "px"; idStyleSheet = idStyle; intervale = inter; var regles = (document.styleSheets[idStyleSheet].cssRules) ? document.styleSheets[idStyleSheet].cssRules : document.styleSheets[idStyleSheet].rules; //ferme les menus nécessaires l'affichage du menu designé dans idMenu for(i=idMenu+1; i < regles.length; i++) { regles[i].style.height=hautTitre + "px"; regles[i].style.top=(topPos + parseInt(hautMenu,10) + (parseInt(hautTitre,10) * (i))) + "px"; regles[i].style.width=largMenu + "px"; regles[i].style.left=leftPos + "px"; } //Ouvrir les menus à partir du menu désigné dans idMenu for(i=0; i < idMenu+1; i++) { regles[i].style.height=hautMenu + "px"; regles[i].style.top=(topPos + (parseInt(hautTitre,10) * (i+1))) + "px"; regles[i].style.width=largMenu + "px"; regles[i].style.left=leftPos + "px"; } } // Détermine la prochaine position d'une page du menu lors de sa fermeture. function getTimeTopClose(topPx) { var top=topPx.substring(0, topPx.length-2); top = parseInt(top,10); return top + intervale; } // Détermine la prochaine hauteur d'une page du menu lors de sa fermeture. function getTimeHeightClose(heightPx) { var height=heightPx.substring(0, heightPx.length-2); var numHauteurMenuFerme = parseInt(hauteurTitre.substring(0, hauteurTitre.length-2)); height = parseInt(height,10); return (height-intervale <= numHauteurMenuFerme ) ? numHauteurMenuFerme : height-intervale; } // Détermine la prochaine position d'une page du menu lors de son ouverture. function getTimeTopOpen(topPx) { var top=topPx.substring(0, topPx.length-2); top = parseInt(top,10); return top - intervale; } // Détermine la prochaine hauteur d'une page du menu lors de son ouverture. function getTimeHeightOpen(heightPx) { var height=heightPx.substring(0, heightPx.length-2); var numHauteurMenuOuvert = parseInt(hauteurMenu.substring(0, hauteurMenu.length-2)); height = parseInt(height,10); return (height+intervale >= numHauteurMenuOuvert) ? numHauteurMenuOuvert : height+intervale; } // Anime le menu pour afficher la page données en id. function showMenu(id) { // recupération des regles css des menus. var regles = (document.styleSheets[idStyleSheet].cssRules) ? document.styleSheets[idStyleSheet].cssRules : document.styleSheets[idStyleSheet].rules; // fermeture de tous les menus en dessous du menu choisi for(i=regles.length-1; i>id; i--) { if(regles[i].style.height != hauteurTitre) { regles[i].style.height=getTimeHeightClose(regles[i].style.height) + "px"; regles[i].style.top=getTimeTopClose(regles[i].style.top) + "px"; } } // ouverture du menu choisi et de tous les menus au dessus du menu choisi if (regles[id].style.height != hauteurMenu){ for(i=1; i<id+1; i++) { if (regles[i].style.height != hauteurMenu){ regles[i].style.top=getTimeTopOpen(regles[i].style.top) + "px"; regles[i].style.height=getTimeHeightOpen(regles[i].style.height) + "px";; } } } // Si nous ne traitons pas la dernière page de menu, on anime les pages de menu jusqu'aux tailles désirées. // hauteur de titre pour la page de menu en dessous ou hauteur max du menu choisi if(regles[id+1]) { if (regles[id+1].style.height != hauteurTitre || regles[id].style.height != hauteurMenu){ setTimeout("showMenu("+id+")",12); } } // Si on traite le menu, on anime le menu jusqu'à ce qu'il ai la hauteur max. else { if (regles[id].style.height != hauteurMenu){ setTimeout("showMenu("+id+")",12); } } } //-------------------------------------------------------------- fichier gestmenu.css (gère le style des partie animées du menu) : /* cf menu.js pour l'utilisation de la classe */ .cadremenu1 { height : 400px; width : 200px; background-color : #FFEEFF; top : 20px; left : 20px; z-index : 1; } .cadremenu2 { height : 400px; width : 200px; background-color : #FFEEEE; top : 40px; left : 20px; z-index : 2; } .cadremenu3 { height : 400px; width : 200px; background-color : #FFEEAA; top : 60px; left : 20px; z-index : 3; } .cadremenu4 { height : 400px; width : 200px; background-color : #FFEE00; top : 80px; left : 20px; text-align : center; z-index : 4; } .cadremenu5 { height : 400px; width : 200px; background-color : #FFEE00; top : 100px; left : 20px; text-align : center; z-index : 5; } //-------------------------------------------------------------- stylemenu.css (gère les partie statiques) : @CHARSET "ISO-8859-1"; a.titre:link { font-family : verdana, times, sans-serif ; font-stretch : semi-expanded; color : white; text-decoration : none ; font-weight : normal ; font-size : 15px; } a.titre:visited { font-family : verdana, times, sans-serif ; font-stretch : wider; /*color : #ff0000;*/ color : white; text-decoration : none ; font-weight: normal; font-size : 15px; } a.titre:hover { font-family : verdana, times, sans-serif ; font-stretch : wider; color : white; text-decoration : none; font-weight: bold; font-size : 15px; } a.soustitre:link { font-family : verdana, times, sans-serif ; font-stretch : semi-expanded; color : black; text-decoration : none ; font-weight : normal ; font-size : 15px; } a.soustitre:visited { font-family : verdana, times, sans-serif ; font-stretch : wider; color : black; text-decoration : none ; font-weight: normal; font-size : 15px; } a.soustitre:hover { font-family : verdana, times, sans-serif ; font-stretch : wider; color : black; text-decoration : underline; font-weight: normal; font-size : 15px; } ul.soustitreli { list-style-type: circle; text-align: left; } .cadremenu4, .cadremenu3, .cadremenu2, .cadremenu1, .cadremenu5 { border-color : #000000; border-width : 2px; border-style : solid; position : absolute; text-align : center; overflow: hidden; background-image: url(../images/menu.gif); background-repeat: repeat-x; background-attachment: scroll; }

Conclusion :


J'ai commenté au maximum. j'attends les votre. A ceux qui veulent se passez du stylesheet je suis preneur...

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Adri111
Messages postés
8
Date d'inscription
dimanche 20 mai 2012
Statut
Membre
Dernière intervention
25 mai 2012

Hello, Très utile et bien expliqué ce menu, merci... ;)
graffx
Messages postés
6489
Date d'inscription
jeudi 22 mars 2007
Statut
Contributeur
Dernière intervention
24 mars 2019

salut, j' ai un petit souci, lorsque je teste la page dans le zip, le menu.html est super sympa, il marche trés bien.

Dés que je met le tout sur free, le menu est imobile et l' onglet du bas est celui affiché en premier.

Est ce free qui zblougue le tout?
cs_xav44
Messages postés
11
Date d'inscription
vendredi 26 septembre 2003
Statut
Membre
Dernière intervention
9 décembre 2008

Merci pour vos commentaires, surtout les techniques ;) Pour le reste promis je nommerais mes méthodes en français est je mettrais des accents à mes commentaires... ou pas. :)
piergel
Messages postés
51
Date d'inscription
lundi 8 septembre 2008
Statut
Membre
Dernière intervention
18 août 2009

Tu as raison Kazma. Aussi j'ai lancé un nouveau fil sur le forum :
http://www.javascriptfr.com/forum/sujet-COMMENTAIRES-ANGLAIS-DANS-SOURCES-POSTES-SUR-CODES-SOURCES_1239862.aspx

Xav44 : code intéressant, bien commenté :)
astro53
Messages postés
48
Date d'inscription
jeudi 18 octobre 2007
Statut
Membre
Dernière intervention
5 août 2009

Pour repondre a Xinitus et Piergel, desole pour mon ortographe. Et oui je perd mon francais bientot 4 ans et demi que je n habite plus en France. Pour ce qui est du francais honnetement ce qui est dommage c est que si un japonais tombe sur cet source et qu il veut comprendre les explications de son createur. Ben il pourra difficilement parce que le francais est bien appris par les etrangers mais beaucoup moins que l anglais. Moi je dis tout simplement qu il faut penser aux autres. Et si tu veux mon avis double tes commentaires comme ca tout le monde est heureux!

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.