Script Masters : Javascript : Index

Script Masters

Espace membre

Langages

Autres ressources

Ressources graphiques

Recherche

Kit graphique

Liens

Statistiques

Javascript >> Catégorie >> Menus dynamiques >> Menu Dynamique 2

Description

Un petit menu dynamique en DHTML fonctionnant sur 2 niveaux. Entièrement personnalisable, il saura vous séduire.

Exemple

[Cliquez ici pour visualiser l'exemple]

Informations et statistiques

Internet Explorer : 5+
Netscape Navigator : 6+
Mozilla : 1.4+
Auteur : Fabien Daniel
Date de création : 24/01/2003

Visualiser : 73201
Dont aujourd'hui : 1
Envoi par mail : 323
Commentaires : 3 ( Voir )

Conseils pour la personalisation du script

Suivre les commentaires se trouvant dans le script.

Le script

Insérer ce script entre les balises <Head> </Head>

/*
Insérer ce script entre les balises <Head> </Head>
*/

/* DANIEL Fabien - webmaster@script-masters.com
*  Script Masters - http://www.script-masters.com/ 
* 
*  Menu dynamique 2
*  Vous pouvez utilisé ce script sous reserve de conserver ce message
*/

var couleur1 = "#C3C9D4"; 			// Couleur de fond du menu
var couleur2 = "#A7ADB7";			// Couleur de surlignement
var couleurBordure = "#000000";		// Couleur de la bordure
var couleurTexte = "#000000";		// Couleur du texte
var police = "Verdana";				// Police utilisée pour le texte
var tailleTexte = 10;				// Taille du texte

var largeurMenuTotale = 300;		// Largeur totale du menu
var largeurMenuGauche = 100;		// Largeur de la partie gauche du menu
var hauteurMenuTotale = 40;			// Hauteur du menu

// IMPORTANT : Nombre de menus
var nbMenu = 3;						//Nombre de menu principaux

var savTab="";						// Ne pas modifier

var menu = new Array(nbMenu)		// Ne pas modifier
var sousMenuTitre = new Array();	// Ne pas modifier
var sousMenuLien = new Array();		// Ne pas modifier
var sousMenuTarget = new Array();	// Ne pas modifier
for(i=0; i<nbMenu; i++) {			// Ne pas modifier
	sousMenuTitre[i] = new Array();	// Ne pas modifier
	sousMenuLien[i] = new Array();	// Ne pas modifier
	sousMenuTarget[i] = new Array();// Ne pas modifier
}

// Les titres des menus principaux
menu[0] = "Javascript";
menu[1] = "Php"
menu[2] = "Contact";

// Pour chaque sous-menu, renseignez son titre, son lien et sa cible

// [0][x] : Correspond à tous les sousmenus du menu Javascript
sousMenuTitre[0][0] = "Exemples";						// Titre du sous menu
sousMenuLien[0][0] = "http://www.script-masters.com/";	// Lien du sous menu
sousMenuTarget[0][0] = "_blank";						// Cible du sous menu

sousMenuTitre[0][1] = "Cours";
sousMenuLien[0][1] = "http://www.script-masters.com/";
sousMenuTarget[0][1] = "_blank";

sousMenuTitre[0][2] = "Astuces";
sousMenuLien[0][2] = "http://www.script-masters.com/";
sousMenuTarget[0][2] = "_blank";

// [1][x] : Correspond à tous les sousmenus du menu Php
sousMenuTitre[1][0] = "Script";
sousMenuLien[1][0] = "http://www.script-masters.com/";
sousMenuTarget[1][0] = "_blank";

sousMenuTitre[1][1] = "Tutoriaux";
sousMenuLien[1][1] = "http://www.script-masters.com/";
sousMenuTarget[1][1] = "_blank";

sousMenuTitre[1][2] = "Réferences";
sousMenuLien[1][2] = "http://www.script-masters.com/";
sousMenuTarget[1][2] = "_blank";

// [2][x] : Correspond à tous les sousmenus du menu Contact
sousMenuTitre[2][0] = "Webmaster";
sousMenuLien[2][0] = "http://www.script-masters.com/";
sousMenuTarget[2][0] = "_blank";

sousMenuTitre[2][1] = "Editeur";
sousMenuLien[2][1] = "http://www.script-masters.com/";
sousMenuTarget[2][1] = "_blank";

/*
NE PAS MODIFIER SOUS CETTE LIGNE---------------------------
*/
function ouvrirLien(destination,target)
{
	switch(target){
		case "_blank":
			window.open(destination);
			break;
		case "_top":
			window.top.location.href = destination;
			break;
		default:
			window.top.parent.frames[target].location.href  = destination;
			break;
	}
}

function ecrire(id)
{
	// on affiche le menu
	codeHtml = "<table border='0' cellspacing='0' cellpadding='0' width='100%'>";
	for(j=0;j<sousMenuTitre[id].length;j++)
		{
			codeHtml += "<tr><td  onMouseOver='changeCouleur(this,0)' onMouseOut='changeCouleur(this,1)' onClick='ouvrirLien(\"" + sousMenuLien[id][j] + "\",\"" + sousMenuTarget[id][j] + "\")'>" + sousMenuTitre[id][j] + "</td></tr>";
		}
	codeHtml += "</table>";
	document.getElementById("menu").innerHTML = codeHtml;
}

function changeCouleur(tab,type)
{
	switch(type){
		case 0 :
			// mouseover
			if(tab != savTab)
				tab.bgColor = couleur2;
			break;
		case 1 :
			// mouseout
			if(tab != savTab)
				tab.bgColor = couleur1;
			break;
		case 2 :
			// clic!
			sav = savTab;
			savTab = tab;
			changeCouleur(sav,1);
			tab.bgColor = couleur2;
			break;
		}
}

Insérer ce code entre les balises <Body> </Body>

Recevoir ce script par email

Entrez votre email ci-dessous pour recevoir ce script dans votre boite à lettre

Poster un commentaires :

Plus d'info :

Un problème ? Consultez le forum de Script Masters pour trouver la réponse !

Votre nom de domaine est-il libre?