Accueil > > > MENU HORIZONTAL BASIQUE. CODE SIMPLE ET CLAIR. IDEAL POUR PERSONNALISATION.
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
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
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
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 et Javascript [ par Lucky062 ]
Bonjour à tous, Je suis débutant et peut être que la question est stupide, mais je me lance ! Voici un moment que je cherche et je ne trouve pas !
|
Derniers Blogs
DéMARRONS AVEC LES TASKSDéMARRONS AVEC LES TASKS par richardc
Que vous le vouliez ou non, le développement multi-tâche est maintenant une obligation pour toute nouvelle application. Il est donc vital d'en comprendre les mécanismes et de s'y mettre le plus tôt possible.
En attendant le .NET Framework 4.5 avec le...
Cliquez pour lire la suite de l'article par richardc SLIDE & DéMO TECHDAYS 2012 - FAST & FURIOUS XAML APPSSLIDE & DéMO TECHDAYS 2012 - FAST & FURIOUS XAML APPS par Vko
Retrouvez les slides et les démo de ma session Fast & Furious XAML Apps. A ceux qui se posent la question : "est-ce que le code de la DataGrid est disponible?", je vous répondrais "pas encore". Je vais mettre en place un projet codeplex pour part...
Cliquez pour lire la suite de l'article par Vko XNA IS DEAD!XNA IS DEAD! par richardc
Depuis la semaine dernière (et grâce aux TechDays 2012), je me penche activement sur la nouvelle version de Windows, aka Windows 8. Vous me direz, il était temps puisque la première preview date de Septembre dernier.
OK. Remarquez, on n'en est qu'aux...
Cliquez pour lire la suite de l'article par richardc TECHDAYS PARIS 2012 : WINDOWS SERVER "8" QUOI DE 9 !TECHDAYS PARIS 2012 : WINDOWS SERVER "8" QUOI DE 9 ! par ROMELARD Fabrice
Speakers: Fabrice Meillon et Stanislas Quastana Cette session est basée entièrement sur celle donnée lors de la BUILD cet hiver. Il n'y a pas d'ajout d'information en rapport avec cet évènement passé. Windows 8 Server sera intégralem...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice [HTML5] AUTOUR DU W3C : NOUVEAUX STANDARDS ET WEB MOBILE (LILLE)[HTML5] AUTOUR DU W3C : NOUVEAUX STANDARDS ET WEB MOBILE (LILLE) par Gio
Je m'y prends un peu tard je sais, mais bon je suis développeur web et donc hyper fainéant ! Toujours dans le cadre des technologies émergentes, ici HTML5, parce qu'on aime HTML5 chez Wyg , nous seront présent, le vieux ( Aurélien V.) et moi, pour pr...
Cliquez pour lire la suite de l'article par Gio
Logiciels
DocTranslate (V3.1.0.0)DOCTRANSLATE (V3.1.0.0)DocTranslate est un traducteur de document Microsoft Word, PowerPoint et Excel. Il permet d'autom... Cliquez pour télécharger DocTranslate Tribler (2012)TRIBLER (2012)Tribler est un client pair à pair (P2P/Peer-to-Peer) open source avec la capacité de regarder des... Cliquez pour télécharger Tribler OneSwarm (2012)ONESWARM (2012)Le peer-to-peer qui protège votre vie privée, c'est OneSwarm.
Ce logiciel de peer-to-peer crypté... Cliquez pour télécharger OneSwarm PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)PONAMEDIA TV DEVIENS HELLLOOO FLASH
LA TV SUR VOTRE ORDINATEUR.
Toute une plateforme Multi... Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO Academy System (17.2.1.0)ACADEMY SYSTEM (17.2.1.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System
|