Menu horizontal basique. code simple et clair. ideal pour personnalisation.

Soyez le premier à donner votre avis sur cette source.

Snippet vu 29 901 fois - Téléchargée 24 fois

Contenu du snippet

J'avais besoin d'un menu du genre nested menu (http://www.dwuser.com/nestedmenu/index.php) mais en version DHTML/JS. (Nested Menu est en flash).
Apres avoir cherché sur le net (editeurjavascript, ...) et decouvrant la complexité de ces codes pret-à-servir, j'ai decidé de coder mon propre menu, personnalisable.

Voici donc un menu horizontal tres simple, au code tres court et clair, ideal pour la personnalisation, pour servir de base.
Pas de design, pas de html, juste un effet, juste du javascript.

Source / Exemple :


// BlackWizzard's Simple JS Menu
// 

///////////////////
// Config
///////////////////

var config= new Array()
config["menu_separator"] 				= " - ";
config["submenu_separator"] 				= " - ";
config["menu_class"] 					= "menu";
config["submenu_class"] 				= "rate";

///////////////////
// Editable zone
///////////////////
var topMenu= new Array()

var tempSubMenu = new Array();
tempSubMenu["events"] = "events.html";
tempSubMenu["by night"] = "night.html";
topMenu["Vie Etudiante"] = tempSubMenu;

var tempSubMenu = new Array();
tempSubMenu["Events"] = "events/bde.html";
tempSubMenu["Photos/Videos"] = "medias/bde.html";
topMenu["BDE"] = tempSubMenu;

///////////////////
// menu builder
///////////////////

var menu_output = "";
var item_counter = 0;
var item_number = 0;

// array.length ne fonctionne pas avec un array à 2 dimension... je ne sais pas pourquoi.
// donc, calcul de la longueur à la barbare.
for (title in topMenu) {
	item_number++;
}

for (title in topMenu) {
	item_counter++;
	menu_output += "<a href=\"javascript:return true;\" class=\""+config["menu_class"]+"\" ";
	menu_output += "onMouseOver=\"javascript:bw_show_submenu(topMenu,'"+title+"')\">";
	menu_output += title;
	menu_output += "</a>";
	if (item_counter != item_number) {
		menu_output += config["menu_separator"];
	}
}

///////////////////
// menu output
///////////////////
function load_bw_menu() {
	document.write(menu_output);
}
function bw_show_submenu(array,menu) {
	document.getElementById('bw_submenu').innerHTML = bw_output_submenu(array[menu]);
}
function bw_output_submenu(array) {
	var submenu_output = "";
	var item_counter = 0;
	var item_number = 0;
	
	for (title in array) {
		item_number++;
	}
	
	
	for (title in array) {
		item_counter++;
		submenu_output += "<a href=\""+array[title]+"\" class=\""+config["submenu_class"]+"\" >";
		submenu_output += title;
		submenu_output += "</a>";
		if (item_counter != item_number) {
			submenu_output += config["submenu_separator"];
		}
	}
	return submenu_output;
}

Conclusion :


exemple d'utilisation:
- Mettez le code dans un fichier javascript externe.
- Placez le code html suivant dans une page html:

<script language="javascript" src="bwmenu.js"></script>
<table>
<tr>
<td bgcolor="#CCCCCC">
<script>load_bw_menu();</script>
</td>
</tr>
<tr>
<td>
<div style="margin-left:15px;" ID="bw_submenu"></div>
</td>
</tr>
</table>

A voir également

Ajouter un commentaire

Commentaires

beno0ou
Messages postés
5
Date d'inscription
jeudi 19 novembre 2009
Statut
Membre
Dernière intervention
18 octobre 2010

Merci beaucoup c'est vraiment un parfait entrainement pour un webmaster amateur ;)
belkhayaty
Messages postés
95
Date d'inscription
jeudi 19 août 2004
Statut
Membre
Dernière intervention
11 août 2012

car il ne me marche guere
macsou01
Messages postés
45
Date d'inscription
mardi 20 mars 2007
Statut
Membre
Dernière intervention
28 juillet 2011

Excellent, c'est pile ce que je cherchais :) Merci ;)

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.