CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2010 02 10 06:38:22

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

MENU DÉROULANT

Information sur la source

Note :

6,75 / 10

Catégorie :Menu & Co Classé sous :meu, déroulant, fixe Niveau :Initié Date de création :30/11/2008 Vu / téléchargé :7 001 / 934

Auteur : xav44

Ecrire un message privé

Commentaire sur cette source (14)

Ajouter un commentaire et/ou une note

Description

Cliquez pour voir la capture en taille normale

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

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">
<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;
}

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...

Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

menu_html
- images
  - menu.gif 43 489 octets
- script
  - menu.js 7 077 octets
- styles
  - gestmenu.css 782 octets
  - stylemenu.css 1 726 octets
- menu.html 2 982 octets

Télécharger le zip

Sources de la même categorie

MENU VERTICALE GAUCHE ET DROIT DEROULANT par kazma

MENU VERTICALE EN TRANSPARENCE par dlvains

MENU DÉROULANT EN IMAGES par dlvains

TBFRAME: TAB BROWSING FRAME par triumphs

MENU PRINCIPAL par ali1987

Toutes les sources de la catégorie Menu & Co

Sources en rapport avec celle ci

COMMENT FAIRE DÉFILER UN CALQUE (LAYER) ? par klerdesign

MENU DÉROULANT (JE SAIS.... ENCORE...) EN JAVASCRIPT & CSS. par inami

AMÉLIORATION DU MENU DÉROULANT TRÈS SIMPLE POSTÉ IL Y A QUIN... par Patrice H

MENU DYNAMIQUE DÉROULANT W3C par abdoulax

MENU DÉROULANT FAÇON FORMULAIRE par VictorWani

Commentaires et avis

Commentaire de astro53 le 01/12/2008 13:27:49

Salut, jolie code.
Je pense a deux choses:
  - Tu pourrais creer des boucles pour la creations des menus ca te prendrais beaucoup moins de poids.
for(i=1;i<document.getElementsByTagName('div').length;i++){//to increment the div classname and the showmenu(i) function
document.write('<div class="cadremenu'+i+'">');
document.write('<a href="#" onclick="javascript:showMenu('+i-1+');" class="titre">Menu '+i+'</a>');
document.write('<br/><br/><ul class="soustitreli">');
  for(y=1;y<=3; y++){
document.write('<li><a href="#" class="soustitre">Sous Menu '+i+'.'+y+'</a></li>');
}
document.write('</ul></div>');

c'est un exemple mais il ne marche pas parce que le nombre de div n est pas defini et la deuxieme boucle for est a ameliore dans le sens de rajoute une variable te permettant de savoir le nombre de sous menu que tu desire...
Je n ai pas tester ce code au passage je viens de l ecrire en reprenant ton menu.
  - Mets tes commentaires en Anglais, principe de bases...

Bonne chance pour la suite.

Commentaire de LUDINSKI le 02/12/2008 20:00:20

Excellent, je te met 9/10

-1 : Tu as "mal" gérer le fait de déplier un menu pendant qu'un autre est en train de se déplier...

Mais autrement, c'est compatible et bien commenté !
Nikel !

Commentaire de LUDINSKI le 02/12/2008 20:02:35 9/10

J'ai oublié la note ;)

Commentaire de mickaelpfr le 03/12/2008 10:53:05 6/10

Salut :)

source pas trop mauvaise , mais je vais me permettre quelques remarque constructive :)

- premièrement tu pourrais orienter ton code en objet plutôt que de créer x fonction orphelines :-)
- deuxiement , le gros souçis de ce code est de ne pas pouvoir gérer de façon illimité les menus, il faudrait que tu gères non pas l'appel de ta méthode sur un id mais sur un objet genre sur le click du lien :

this.parentNode.getElementsbugTagName('ul')[0] => pour travailler sur une ul sans class ni liste ...

pour le reste quelques erreur , tu utilises des variables sans les déclarer :

"# hauteurMenu = hautMenu + "px";
# hauteurTitre = hautTitre + "px";
# largeurMenu = largMenu + "px";
# topPosition = topPos + "px";
# leftPosition = leftPos + "px";
# idStyleSheet = idStyle;
# intervale = inter; "

et le mot clé var ?? ;)

bon pour les commentaires et le code et l'effort je t'offre un 6

Commentaire de xtinitus le 08/12/2008 08:31:06 5/10

Je bondis au plafond. C'est quoi ce "principe de base" d'écrire ses commentaires en anglais? C'est valable pour les chinois? C'est que ton clavier n'a pas d'accents?

J'habite l'Amérique du Nord, et croyez moi c'est pas de la tarte de vouloir préserver cet ilot de français. Alors quand je code en français, j'en suis fier et je suis très content de lire du code en français quand ça arrive.

Commentaire de piergel le 08/12/2008 09:48:40

Je partage entièrement l'avis de Xtinitus. Il y a suffisamment de codes en anglais sur le net pour les anglophones ! codes que je consulte et utilise, je ne suis pas bloqué par la langue. Mais quand je peux trouver des codes commentés en français, j'apprécie (merci codes-sources, merci Xav44 !)
Mais vu l'extrême pauvreté de l'orthographe d'Astro53, je suppose que c'est un anglophone qui a du mal à comprendre les commentaires en français et qui vient sur codes-sources pour la qualité nettement supérieure des codes proposés par rapport aux sites américains ! ;)

Commentaire de h405 le 08/12/2008 17:59:09

SUPERBE !
Merci beaucoup.

Commentaire de trabi11fr le 08/12/2008 18:44:06

D'accord avec Xtinitus et Piergel.!!!!
Raz la casquette des anglais qui viennent en plus maintenant s'installer chez nous et refuse d'apprendre le français sous pretexte que "tout le monde parle anglais".....
Sachons défendre notre belle langue même en informatique.
Et vive le Québec libre.;-)))))

Commentaire de kazma le 08/12/2008 19:37:04

la conversation s'agrave et derive totalement vers des sujets qui n'on rien a faire ici

Commentaire de xtinitus le 08/12/2008 21:36:32

Vrai kazma, ça dérive et c'est ma faute d'avoir commenté un commentaire plutôt que la source.

Merci PIergel et Trabi11fr pour vos avis et convictions!

Commentaire de astro53 le 09/12/2008 09:03:19

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!

Commentaire de piergel le 09/12/2008 10:17:09 7/10

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é :)

Commentaire de xav44 le 09/12/2008 22:50:11

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. :)

Commentaire de graffx le 26/03/2009 21:54:36

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?

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

menu déroulant [ par jotrash ] trasjoBONJOUR A TOUS.Je suis débutant en codes et je voudrais crée pour un site un mennu déroulant du genre de celui de microsoft ou dans ce style.Que menu déroulant et liste de fichiers [ par maitrekanter59 ] bonjour,je voudrais créer un menu déroulant dans lequel on trouve la liste des fichiers d'un répertoire. le truc c que qd on supprime un fichier du ré centrage d' un script [ par warioguillaume ] salut à tousj utilise un script de menu déroulant horizontalen 1024x768 je spécifie en x et en y à quel endroit je veux le placer et ca marchemais dès "menu déroulant" [ par AngeloVivaldi ] Bonjour à tous. Je suis un peu débutant en JavaScript, je vous expose le problème : Je voudrai, sur mon site, que lorsque l'utilisateur clique sur u menu déroulant [ par booun ] SOSje suis nouveau en javaj'ai téléchargé le code de menu déroulant sur ce siteil marche super bien, mais j'aurais voulu rajouter une rubrique au troi Menu déroulant sans hyperlien = IMPASSE [ par ulys31 ] Bonjour,J'ai téléchargé la source no 16608, soit celle qui fait afficher un menu à multi-niveaux.Le gros hic est que vous avez complètement oublié les Menu déroulant [ par Looping2605 ] Bonsoir,j'ai un petit problème avec mon site web.Alors j'ai une page avec un formulaire, et dans ce formulaire 2 menu déroulant.J'aimerais, lorsque le petit probleme de menu déroulant [ par piccolo adun ] Comment faire pour qu'un menu déroulant situé sur un frame en haut de la page puisse se dérouler "par dessus" le frame contenant les documents en dess Pb menu déroulant... [ par optimed ] Bonjour!Je vous explique mon problème: j'ai un menu déroulant placé dans un formulaire et je voudrais que pour l'item sélectionné dans la liste corres Menu Déroulant avec Javascript [ par Tesnyme ] Bonjour,j'ai un Probleme de menu déroulant crée par jacascript. le probleme se concerne quand on click sur le Menu Déroulant la liste sera affichée ma

Nos sponsors

Derniers Blogs

UNE JOLIE-HORLOGE ET PAS QU'UN PEU ! par neodante

TECHDAYS PARIS 2010 : CONNECTEZ VOS DONNéES à SHAREPOINT 2010 AVEC LES BUSINESS CONNECTIVITY SERVICES par ROMELARD Fabrice

[DIVERS] SUIVRE VOS SéRIES PRéFéRéS SUR LA TOILE par orion

TECHDAYS PARIS 2010 : LA BI DANS SHAREPOINT 2010 par ROMELARD Fabrice

TECHDAYS PARIS 2010 : DéPLOIEMENT DE NOUVELLES TECHNOLOGIES - RETOUR D'EXPéRIENCE PAR L'INFORMATIQUE DE MICROSOFT par ROMELARD Fabrice

Forum

RE : FONCTION RECHERCHE DATE par jeca

DEFINITION DE LA METHODE SETBORDER par nassim1987

RE : FONCTION RECHERCHE DATE par Eyeron

FONCTION RECHERCHE DATE par Eyeron

RE : RéCUPERER LA TAILLE D'UN DIV par PetoleTeam

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

PLATEFORME SUR L ESOTERISME VOYANCE - sans charte graphique
Budget : 3 500€
Joomla 15 module paiement adaptation composant cuisine
Budget : 250€
Integrateur web dans template
Budget : 500€

Logiciels

DB-MAIN (9.1.0)
DB-MAIN (9.1.0)

DB-MAIN is a data-modeling and data-architecture tool. It is designed to help developers and anal...

Cliquez pour télécharger DB-MAIN
Xilisoft DPG Convertisseur (5.1.37.0120)
XILISOFT DPG CONVERTISSEUR (5.1.37.0120)

Xilisoft DPG Convertisseur offre aux fans de Nintendo DS une bonne solution leur permettant de dé...

Cliquez pour télécharger Xilisoft DPG Convertisseur
GraphicsGale (2.01.01)
GRAPHICSGALE (2.01.01)

GraphicsGale est un logiciel de PixelArt avec de nombreuse fonctionnalités permettant de réalisé ...

Cliquez pour télécharger GraphicsGale
Architecte 3D (Platinum 2010)
ARCHITECTE 3D (PLATINUM 2010)

Architecte 3D Platinium vous permet de concevoir facilement les plans votre future maison, de l'é...

Cliquez pour télécharger Architecte 3D
TeamViewer 5 (TeamViewer 5)
TEAMVIEWER 5 (TEAMVIEWER 5)

Dépanner un ami,expliquer une manipulation devient un jeu d'enfant. Prise en main d'un autre ord...

Cliquez pour télécharger TeamViewer 5