Script Masters : Javascript : Index

Script Masters

Espace membre

Langages

Autres ressources

Emploi avec Jobintree

Ressources graphiques

Recherche

Kit graphique

Liens

Statistiques

Javascript >> Catégorie >> Menus dynamiques >> Menu Dynamique Vertical 2 (dhtml)

Description

Ce second menu dynamique vertical présente la particularité de ce dérouler sur passage de la souris. Le rendu est superbe et permet une navigation aisée. Le script, entièrement paramétrable, est compatible Internet Explorer et Netscape 6+.

Exemple

[Cliquez ici pour visualiser l'exemple]

Informations et statistiques

Internet Explorer : 4+
Netscape Navigator : 6+
Auteur : Daniel Fabien
Date de création : 12/04/2003

Visualiser : 114881
Dont aujourd'hui : 6
Envoi par mail : 1841
Commentaires : 12 ( Voir )

Conseils pour la personalisation du script

La personnalisation est expliqué en détails dans les commentaires du script. En cas de problèmes, posez vos questions sur le forum.

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 vertical dynamique
*  Vous pouvez utilisé ce script sous reserve de conserver ce message
*/

//------------------- Options  ------------------------//
var largeurMenu = 150				// Pour régler la largeur du menu
var policeMenu = "Verdana"			// Police pour les menus
var taillePoliceMenu = "10"			// Taille de la police du menu
var couleurPoliceMenu = "#000000"	// Couleur de la police du menu
var couleurBordure = "#000000"		// Couleur de la bordure du menu
var couleurFond = "#C3C9D4"			// Couleur du fond du menu
var couleurFond2 = "#A7ADB7"		// Couleur du fond des sous menus
var couleurLienRollOver = "#FFFFFF"	// Couleur des liens lors du rollover
var couleurFondRollOver = "#959EAD"	// Couleur du fond sur Rollover

//------------------- Valeurs du menu  ------------------------//

// nom de chaque menu - Vous pouvz en rajouter autant que vous le souhaitez
var menu = new Array();
menu[0]="Javascript";
menu[1]="Php/MySQL";
menu[2]="Html";

var ssmenuNom = new Array();
var ssmenuLien = new Array();
var ssmenuTarget = new Array();

// Valeurs sous le premier menu

ssmenuNom[0] = new Array();
ssmenuLien[0] = new Array();
ssmenuTarget[0] = new Array();

ssmenuNom[0][0] = "Cours";								// Nom du lien
ssmenuLien[0][0] = "http://www.script-masters.com/";	// Adresse
ssmenuTarget[0][0] = "_blank";							// ouvrir une fenetre : _blank
														// ds la même fenetre : _top
														// ds une frame : nom de la frame

ssmenuNom[0][1] = "Exemple";
ssmenuLien[0][1] = "http://www.script-masters.com/";
ssmenuTarget[0][1] = "_blank";

ssmenuNom[0][2] = "liens";
ssmenuLien[0][2] = "http://www.script-masters.com/";
ssmenuTarget[0][2] = "_blank";

// Valeurs sous le second menu - Répéter opération
ssmenuNom[1] = new Array();
ssmenuLien[1] = new Array();
ssmenuTarget[1] = new Array();

ssmenuNom[1][0] = "Cours";
ssmenuLien[1][0] = "http://www.script-masters.com/";
ssmenuTarget[1][0] = "_blank";

ssmenuNom[1][1] = "Exemple";
ssmenuLien[1][1] = "http://www.script-masters.com/";
ssmenuTarget[1][1] = "_blank";

ssmenuNom[1][2] = "liens";
ssmenuLien[1][2] = "http://www.script-masters.com/";
ssmenuTarget[1][2] = "_blank";

// Valeurs sous le troisieme menu - idem
ssmenuNom[2] = new Array();
ssmenuLien[2] = new Array();
ssmenuTarget[2] = new Array();

ssmenuNom[2][0] = "Cours";
ssmenuLien[2][0] = "http://www.script-masters.com/";
ssmenuTarget[2][0] = "_blank";

ssmenuNom[2][1] = "Exemple";
ssmenuLien[2][1] = "http://www.script-masters.com/";
ssmenuTarget[2][1] = "_blank";

ssmenuNom[2][2] = "liens";
ssmenuLien[2][2] = "http://www.script-masters.com/";
ssmenuTarget[2][2] = "_blank";

//------------------- Ne rien modifié  ------------------------//
var nbMenu = menu.length;

//------------------- Rendu dynamique  ------------------------//

//On détecte le browser
var ie=document.all
var ns6=document.getElementById&&!document.all

function rollOver(lien) {
	lien.style.background = couleurFondRollOver;
	lien.style.color = couleurLienRollOver;
}

function rollOut(lien) {
	lien.style.background = couleurFond2;
	lien.style.color = couleurPoliceMenu;
}

function ouvreLien(url,mode) {
	if (mode == "_blank") {
		window.open(url)
	} else if (mode == "_top")  {
		window.top.location.href = url
	} else { 
		window.top.parent.frames[mode].location.href  = url
	}
}

//------------------- Génération du menu  ------------------------//

function generation () {
	document.write("<style type='text/css'>");
	document.write("td.menu {");
	document.write("	font-family: "+policeMenu+";");
	document.write("	font-size: "+taillePoliceMenu+"px;");
	document.write("	color: "+couleurPoliceMenu+";");
	document.write("	border: 1px solid "+couleurBordure+";");
	document.write("	background-color: "+couleurFond+";");
	document.write("}");

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 !