|
Trouver une ressource
Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !
MENU HORIZONTAL BASIQUE. CODE SIMPLE ET CLAIR. IDEAL POUR PERSONNALISATION.
Information sur la source
Description
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
- // 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;
- }
// 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>
Sources du même auteur
Sources de la même categorie
Sources en rapport avec celle ci
Commentaires et avis
Discussions en rapport avec ce code source dans le forum
Menu horizontal avec intercalaires [ par FuxY ]
Bonjour,J'aurai besoin de savoir si quelqu'un aurait le code source d'un menu horizontal façon intercalaires, genre comme sur lycos.fr.Merci. &nb
largeur de chaque element d'un menu horizontal en css [ par stopworries ]
Bonjour tlm!Voila g un menu horizontal en css et js qui fonctionne tres bien, le seul probleme, c que dans ma barre de menu, g par exple les titres "f
créer un menu horizontal sur 2 lignes [ par zephou92 ]
je cherche une aide pour créer un menu horizontal sur 2 lignes en javascript (pas de php si c'est possible). merci vincentzephou92
Menu horizontal [ par glumuck ]
Bonjour,Après avoir testé tout plein de scripts pour le menu d'un site sur lequel je travaille, je me tourne vers vous car j'ai besoin d'aide.En fait,
Menu deroulant horizontal [ par flow92220 ]
J'ai donc un menu déroulant qui deroule les differents onglets quand la souris passe dessus.Mais, mon probleme c'est que le menu ne se "ré-e
Menu vertical et horizontal avec ouverture/fermeture d'un clic [ par neo_tsubasa ]
Bonjour, Je suis trés debutant en javascript et je voudrais faire un menu horizontal fixe qui lorsque l'on clique sur une de ces categories ouvr
menu dynamique horizontal [ par jousay ]
Bonjour,J'aimerais créer un menu dynamique horizontal qui fonctionnerait comme le menu windows (file, edit, view,...); c'est à dire comme le menu de p
Chargement de script [ par Straw ]
Bonjour à tous, Je suis en train de concevoir ce site-ci Il possède un menu déroulant horizontal, c'est une suite de <li> et un script ja
Menu horizontal retractable [ par kiki117 ]
Bonjour Je suis nouveau chez vous et je me pose beaucoup de question sur le java script j'ai beaucoup surfer sur le net mais je n'y arrive pas beaucou
menu dynamique horizontal, problème avec le onload [ par metis15 ]
Bonsoir,Le menu dyn. horizontal..;http://www.javascriptfr.com/code.aspx?id=21045ne fontionne pas si je laisse le préchargement d'image...<body
|
Téléchargements
Logiciels à télécharger sur le même thème :
|