begin process at 2010 02 09 19:37:16
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Menu & Co

 > MENU DYNAMIQUE VERTICAL AVEC EFFET BOUTON

MENU DYNAMIQUE VERTICAL AVEC EFFET BOUTON


 Information sur la source

Note :
4,4 / 10 - par 5 personnes
4,40 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Menu & Co Niveau :Débutant Date de création :07/11/2004 Date de mise à jour :12/11/2004 03:10:10 Vu / téléchargé :27 673 / 6 532
Auteur : FasteX_

Ecrire un message privé
Commentaire sur cette source (32)
Ajouter un commentaire et/ou une note

 Description

Son utilité est la meme que tout autre menu. Sauf que celui-ci est, je pense, relativement court et facile à comprendre à comparer au autres.  C'est le premier menu dynamique que je fait et j'espere qu'il vous plaira.

Source

  • __________________________________________________________________________
  • Script en JavaScript
  • __________________________________________________________________________
  • var C_MENUBG = "silver"
  • var C_MENUTEXT = "black"
  • var C_ITEMBG = "#bf9f7a"
  • var C_ITEMTEXT = "black"
  • function CreateMenu() {
  • document.write("<table onselectstart=\"return false\" oncontextmenu=\"return false\" width=200><tr><td>")
  • for (var i = 0; i < menus.length; i++) {
  • document.write("<span class=3dOut style=background-color:"+C_MENUBG+";color:"+C_MENUTEXT+";display:; id=element"+i+" onMouseOut=DoMenuMouseUp(this) onMouseDown=DoMenuMouseDown(this) onMouseUp=DoMenuMouseUp(this) onClick=DoMenuClick(this)><center>"+menus[i]+"</center></span>")
  • for (var j = 0; j < sousmenus[i].length; j++)
  • document.write("<span class=item style=background-color:"+C_ITEMBG+";color:"+C_ITEMTEXT+";display:none; id=element"+i+"$"+j+"><center>"+sousmenus[i][j]+"</center></span>")
  • }
  • document.write("</td></tr></table>")
  • }
  • function DoMenuMouseDown(element) {
  • element.className = "3dIn"
  • }
  • function DoMenuMouseUp(element) {
  • element.className = "3dOut"
  • }
  • function DoMenuClick(element) {
  • ShowHideMenu(element)
  • }
  • function ShowHideMenu(element) {
  • var n = GetNumMenu(element)
  • if (GetObject("element"+n+"$0").style.display == "none")
  • ShowMenu(element)
  • else
  • HideMenu(element)
  • }
  • function ShowMenu(element) {
  • var n = GetNumMenu(element)
  • for (var i = 0; i < sousmenus[n].length; i++)
  • GetObject("element"+n+"$"+i).style.display = ""
  • }
  • function HideMenu(element) {
  • var n = GetNumMenu(element)
  • for (var i = sousmenus[n].length - 1; i >= 0; i--)
  • GetObject("element"+n+"$"+i).style.display = "none"
  • }
  • function GetNumMenu(element) {
  • var n = 0
  • while (GetObject("element"+n) != element)
  • n++
  • return n
  • }
  • function GetObject(id) {
  • return document.getElementById(id)
  • }
  • __________________________________________________________________________
  • Feuille de style
  • __________________________________________________________________________
  • .3dOut {
  • border: solid 1px;
  • border-top-color: white;
  • border-bottom-color: gray;
  • border-left-color: white;
  • border-right-color: gray;
  • font-family: Ms Serif;
  • font-size: 18px;
  • color: black;
  • width: 175;
  • height: 10;
  • cursor: default;
  • }
  • .3dIn {
  • border: solid 1px;
  • border-top-color: gray;
  • border-bottom-color: white;
  • border-left-color: gray;
  • border-right-color: white;
  • font-family: Ms Serif;
  • font-size: 18px;
  • color: black;
  • width: 175;
  • height: 10;
  • cursor: default;
  • }
  • .item {
  • font-family: Ms Serif;
  • font-size: 18px;
  • width: 175;
  • height: 10;
  • cursor: default;
  • }
  • __________________________________________________________________________
  • Contenu de la page html
  • __________________________________________________________________________
  • <html>
  • <title>:: Menu Dynamique</title>
  • <head>
  • <link rel=stylesheet href="style.css" />
  • <script language=JavaScript src="dyn_menu.js"></script>
  • <!-- Début du script -->
  • <script language=JavaScript>
  • <!--
  • var menus = [
  • "Menu 1",
  • "Menu 2",
  • "Menu 3",
  • "Menu 4",
  • "Menu 5",
  • "Menu 6",
  • "Menu 7",
  • "Menu 8"
  • ]
  • var sousmenus = [
  • /* Options du premier menu */
  • [
  • "Option 1",
  • "Option 2",
  • "Option 3",
  • "Option 4",
  • "Option 5"
  • ],
  • /* Options du deuxième menu */
  • [
  • "Option 1",
  • "Option 2",
  • "Option 3"
  • ],
  • /* Options du troisième menu */
  • [
  • "Option 1",
  • "Option 2",
  • "Option 3",
  • "Option 4",
  • "Option 5",
  • "Option 6",
  • "Option 7"
  • ],
  • /* Options du quatrième menu */
  • [
  • "Option 1",
  • "Option 2",
  • "Option 3",
  • "Option 4"
  • ],
  • /* Options du cinquième menu */
  • [
  • "Option 1",
  • "Option 2"
  • ],
  • /* Options du sixième menu */
  • [
  • "Option 1",
  • "Option 2",
  • "Option 3",
  • "Option 4",
  • "Option 5",
  • "Option 6",
  • "Option 7",
  • "Option 8"
  • ],
  • /* Options du septième menu */
  • [
  • "Option 1",
  • "Option 2",
  • "Option 3",
  • "Option 4",
  • "Option 5",
  • "Option 6"
  • ],
  • /* Options du huitième menu */
  • [
  • "Option 1",
  • "Option 2",
  • "Option 3",
  • "Option 4"
  • ]
  • ]
  • CreateMenu()
  • //-->
  • </script>
  • <!-- Fin du script //-->
  • </head>
  • <body bgcolor=black oncopy="return false"></body>
  • </html>
__________________________________________________________________________
Script en JavaScript
__________________________________________________________________________

var C_MENUBG = "silver"
var C_MENUTEXT = "black"

var C_ITEMBG = "#bf9f7a"
var C_ITEMTEXT = "black"

function CreateMenu() {
   document.write("<table onselectstart=\"return false\" oncontextmenu=\"return false\" width=200><tr><td>")
   for (var i = 0; i < menus.length; i++) {
      document.write("<span class=3dOut style=background-color:"+C_MENUBG+";color:"+C_MENUTEXT+";display:; id=element"+i+" onMouseOut=DoMenuMouseUp(this) onMouseDown=DoMenuMouseDown(this) onMouseUp=DoMenuMouseUp(this) onClick=DoMenuClick(this)><center>"+menus[i]+"</center></span>")
      for (var j = 0; j < sousmenus[i].length; j++)
         document.write("<span class=item style=background-color:"+C_ITEMBG+";color:"+C_ITEMTEXT+";display:none; id=element"+i+"$"+j+"><center>"+sousmenus[i][j]+"</center></span>")
   }
   document.write("</td></tr></table>")
}

function DoMenuMouseDown(element) {
   element.className = "3dIn"
}

function DoMenuMouseUp(element) {
   element.className = "3dOut"
}

function DoMenuClick(element) {
   ShowHideMenu(element)
}

function ShowHideMenu(element) {
   var n = GetNumMenu(element)
   if (GetObject("element"+n+"$0").style.display == "none")
      ShowMenu(element)
   else
      HideMenu(element)
}

function ShowMenu(element) {
   var n = GetNumMenu(element)
   for (var i = 0; i < sousmenus[n].length; i++)
      GetObject("element"+n+"$"+i).style.display = ""
}

function HideMenu(element) {
   var n = GetNumMenu(element)
   for (var i = sousmenus[n].length - 1; i >= 0; i--)
      GetObject("element"+n+"$"+i).style.display = "none"
}

function GetNumMenu(element) {
   var n = 0
   while (GetObject("element"+n) != element)
      n++
   return n
}

function GetObject(id) {
   return document.getElementById(id)
}
__________________________________________________________________________
Feuille de style
__________________________________________________________________________

.3dOut {
   border: solid 1px;
   border-top-color: white;
   border-bottom-color: gray;
   border-left-color: white;
   border-right-color: gray;
   font-family: Ms Serif;
   font-size: 18px;
   color: black;
   width: 175;
   height: 10;
   cursor: default;
}

.3dIn {
   border: solid 1px;
   border-top-color: gray;
   border-bottom-color: white;
   border-left-color: gray;
   border-right-color: white;
   font-family: Ms Serif;
   font-size: 18px;
   color: black;
   width: 175;
   height: 10;
   cursor: default;
}

.item {
   font-family: Ms Serif;
   font-size: 18px;
   width: 175;
   height: 10;
   cursor: default;
}
__________________________________________________________________________
Contenu de la page html
__________________________________________________________________________

<html>
<title>:: Menu Dynamique</title>
<head>

<link rel=stylesheet href="style.css" />
<script language=JavaScript src="dyn_menu.js"></script>

<!-- Début du script -->

<script language=JavaScript>
<!--
var menus = [
   "Menu 1",
   "Menu 2",
   "Menu 3",
   "Menu 4",
   "Menu 5",
   "Menu 6",
   "Menu 7",
   "Menu 8"
]

var sousmenus = [
   /* Options du premier menu */
   [
      "Option 1",
      "Option 2",
      "Option 3",
      "Option 4",
      "Option 5"
   ],

   /* Options du deuxième menu */
   [
      "Option 1",
      "Option 2",
      "Option 3"
   ],

   /* Options du troisième menu */
   [
      "Option 1",
      "Option 2",
      "Option 3",
      "Option 4",
      "Option 5",
      "Option 6",
      "Option 7"
   ],

   /* Options du quatrième menu */
   [
      "Option 1",
      "Option 2",
      "Option 3",
      "Option 4"
   ],

   /* Options du cinquième menu */
   [
      "Option 1",
      "Option 2"
   ],

   /* Options du sixième menu */
   [
      "Option 1",
      "Option 2",
      "Option 3",
      "Option 4",
      "Option 5",
      "Option 6",
      "Option 7",
      "Option 8"
   ],

   /* Options du septième menu */
   [
      "Option 1",
      "Option 2",
      "Option 3",
      "Option 4",
      "Option 5",
      "Option 6"
   ],

   /* Options du huitième menu */
   [
      "Option 1",
      "Option 2",
      "Option 3",
      "Option 4"
   ]
]

CreateMenu()
//-->
</script>

<!-- Fin du script //-->

</head>

<body bgcolor=black oncopy="return false"></body>
</html>

 Conclusion

Jusqu'a présent je ne connais pas de bugs, prevenez-moi s'il y en a.

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Historique

12 novembre 2004 03:10:11 :
- Ajoût de menus et d'options - Effet bouton sur les menus - Couleurs éditables - Amélioration du code

 Sources du même auteur

Source avec Zip Source avec une capture JEU SIMPLE ET EFFICACE DE TIC-TAC-TOE SE JOUANT SUR UN MÊME ...
Source avec Zip Source avec une capture OUTIL DE RECHERCHE SIMPLE ET PARAMÈTRABLE
Source avec Zip PROTOTYPE DE DRAG'N DROP
CONVERTISSEUR DE MESURES D'ANGLES
Source avec Zip Source avec une capture MENU DYNAMIQUE HORIZONTAL SIMPLE
Toutes les sources de FasteX_

 Sources de la même categorie

Source avec Zip Source avec une capture MENU VERTICALE GAUCHE ET DROIT DEROULANT par kazma
Source avec Zip Source avec une capture MENU VERTICALE EN TRANSPARENCE par dlvains
Source avec Zip Source avec une capture MENU DÉROULANT EN IMAGES par dlvains
Source avec Zip TBFRAME: TAB BROWSING FRAME par triumphs
Source avec Zip Source avec une capture MENU PRINCIPAL par ali1987
Toutes les sources de la catégorie Menu & Co

Commentaires et avis

Commentaire de fg85 le 07/11/2004 11:35:57

Script simple et efficace , si tu pouvais faire une version plus "lourde" avec plus d'options je pense que se serait bien .
Je met 7/10 !!

Commentaire de oolnet le 08/11/2004 09:06:28

Chapeau.....

Commentaire de coucou747 le 17/11/2004 14:05:34

euh... sous Konqueror ou Mozilla ça ne passe pas...
t'as écrit en noir sur du noir..

Commentaire de abbaye le 03/12/2004 20:54:41

Désolé, mais chez moi il y a rien qui marche!!!
Ton script est en trois parties j'ai bien recopier la dernière dans ma page html, mais la première je l'a met ou? D'autre part il y a pleins d'erreurs (balises, symbole illégal etc.) dans ton script. Je travail avec Webexpert 2000 et il voit tout!!! Merci de ta réponse si tu a le temps. Salutations

Commentaire de _yan_ le 23/12/2004 16:21:15

Salut
je confirme que dans mozilla rien ne s'affiche que faudrait -il changer pour cela ?
en changeant la couleur du texte et des cellules, la page est toujours noire dans mozila ...
celui qui a une réponse, c'est le bienvenue;..
@+

Commentaire de praadip le 29/01/2005 01:35:12

salut c'est  bien ca marche bien le script ...je voulais juste savoir comment faire pour afficher un site web des qu'on clique sur un des menus et sous menus.

Commentaire de FasteX_ le 29/01/2005 03:17:44

   Salut praadip, le code est arangé pour déroulé les menus et les sous-menus selon une liste de labels contenus dans un array. Tu peux très bien définir un label comme suit: "<span onclick=redir(taPage)>Ton site</span>" (où redir serait une fonction qui redirige vers une autre page) Cela devrait t'envoyer sur une page au clique ;-)

Commentaire de extinguisher le 07/05/2005 14:47:45

Bonjour FasteX_ et bravo pour ton menu.

Je suis étudiant et pour mon travail de javascript j'aimerais reprendre ton ossature. Pour bien comprendre les choses, tu as donc 8 menus, agrémentés chacun de plusieurs sous-menus. Ce que je voudrais, c'est que les sous menus puissent contenir un deuxième sous menu. Donc soit je trouve un moyen pour que tes sous menus apparaissent eux aussi sous forme de boutons, soit je trouve un moyen pour ajouter (d'une facon quelconque) un 2è sous menu lié au 1er (genre liste déroulante partant sur la droite du premier sous-menu). Tu pourrais m'aider?

Merci d'avance

Commentaire de glannad le 08/05/2005 14:31:55

C'est bien beau, mais comment faire les liens sur les options ?
Merci de me renseigner.

Commentaire de FasteX_ le 09/05/2005 03:39:48

   Pour qu'un élément soit un lien tu n'as qu'a remplacer le texte par <a href=destination>Texte</a>

A+, FasteX

Commentaire de risk30 le 24/06/2005 12:08:51

Je trouve ce menu très bien par ce qu'il est simple, cependant j'ai un probleme: J'ai mis des liens sur les sous menu du type : <a href=index.php?menu=page02>page02</a>  , ce qui me permet d'inclure (fonction PHP : include)mes page de mon site. ça marche bien mais le probleme c'est que le menu ne reste pas ouvert !!!!! Est ce que quelqu'un à le même type de problème, Savez vous comment faire pour y remédier...
Merci d'avance.

Commentaire de Mr_M le 24/06/2005 12:29:46

bonjour tout le monde alors mon problème est qu'à la place de rentrer les menus à la main j'aimerais qu'il prenne les nom de mes champs de ma base de données ! Elle est composé d'un table "catégorie" et d'un autre "sous-catégorie". J'ai déjà fait des menus déroulant liés entre eux mais j'arrive pas adapter la même chose à ton code, dès que je mets du PHP il ne m'affiche plus le menu.

bonne journée

Commentaire de coucou747 le 25/06/2005 02:07:11

pour ta bdd, on aimerais plus de détails.... quel est ton système de BDD ??? les tables ????

en php, t'as mysql_query(); qui permet de faire des requettes...

sinon, pour que le menu reste ouvert, il faut chercher si le lien est enfant, et si il est enfant, alors on l'ouvre...

Commentaire de FasteX_ le 25/06/2005 23:18:32

   Bonjour. Dans mon code, j'utilise des tables. Ce n'est peut-être pas ce qui est le plus efficace comme base de données, mais c'est, selon moi, le moyen le plus simple et le plus rapide. Je ne me sert jamais des autres sortes de bases (je ne les connais pas...)

Commentaire de coucou747 le 26/06/2005 11:39:03

lol

réfléchis un peu et donnes mois exactement les détails que je demandais...

PS : tout ce que t'as dis, c'était que tu utilisais plusieurs tables, rien de plus... Une DBB, c'est toujours un espace qui peut regrouper une ou plusieurs tables...

Commentaire de FasteX_ le 26/06/2005 22:16:04

   Je ne sais pas trop ce qu'il y a à dire sur ma bdd. Sinon que la table 'menus' est la liste des captions des menus principaux et 'sousmenus' la liste des captions des sous-menus. Sincèrement je ne vois pas ce qui est dur à comprendre dans mon code...

Commentaire de coucou747 le 26/06/2005 22:53:12

Oh, oui, excuses moi, je croyais que tu récupèrais ça d'une base MYSQL ou autre, je demandais donc comment était formé la table...

En mysql, on aurait vu une table comme ceci :
id, lien, texte, lien_parent
et avec ça, on aurait pu faire autant de sous menus qu'on veut...

pour ton problème :
il faut lire la ou on est, puis ensuite ouvrir le menu qui mène ou on est...

Commentaire de Mr_M le 28/06/2005 14:49:06

et oui coucou747 c'est moi qui ai un problème pour inclure mes bases de données mysql dans le menu de Fastex_ j'arrive pas à adapter mes tables à son menu !!! ma table est du type id, categorie (int), sous-categorie(int). et j'ai 2 autres tables qui sont catégories et sousCategories qui marchent pareil : id, nom

Commentaire de coucou747 le 28/06/2005 21:05:48

var menus = [
et tu liste les categories

var sousmenus = [
et tu fais une boucle avec un select where categorie=...

Commentaire de Mr_M le 29/06/2005 15:23:29

ça ne marche pas car je dois integrer du PHP dans du javascript j'écrit mon code, j'ai pas de message d'erreur mais cela m'affiche une page blanche !!! et là, c'est juste pour la catégorie !

Commentaire de coucou747 le 29/06/2005 16:04:41

intègrer du php dans du javascript... on aura tout vu ici !
le php est un langage server et le js un langage client !!!

on peut mettre du js dans du php, mais pas le contraire...

Commentaire de Mr_M le 29/06/2005 16:43:25

Bon bah c'est foutu alors puisque le script du menu est en javascript !!! (var menus [ ... ])

Commentaire de coucou747 le 29/06/2005 17:33:50

mais t'as qu'a faire écrire à ton php du javascript !

echo '<script>';
$req=mysql_querry('SELECT ... ... FROM mabase.table_menu;');
...
echo '</script>';

Commentaire de FasteX_ le 30/06/2005 00:19:12

Les bases de données mysql et les requêtes SELECT ... FROM ... comment ça marche ? Est-ce que c'est bien long à apprendre ? Et surtout, est-ce que ça en vaut la peine ??

Commentaire de coucou747 le 30/06/2005 11:42:14

Je ne fais du sql que depuis deux semaines et j'ai déja fait un forum, un blog, un moteur de sondage, enfin voila, mysql, c'est super simple...
je ne te donnerais pas de cours sur le mysql, je te conseille de chercher sur le net ou d'acheter un livre...
On ne peut pas interroger directement une base de données mysql en javascript, la base mysql est sur un serveur, et le javascript ne permet pas de discuter avec un serveur mysql... (ça serait une faille de sécuritée considérable : ton login et mdp seraient en clair dans ton javascript)

Tu peux par contre faire du php, du perl ... pour accèder à une base de donnée mysql.

si tu ne fais pas de php, alors commence par le php, et est-ce-que ça en vaut la peine ? Sincèrement, oui ! ça te permet de trier une base hyper facilement, de faire des regroupements de deux bases, ou d'une base, en spécifiant le paramètre unique...

Commentaire de FasteX_ le 01/07/2005 19:57:29

Merci coucou747 pour ta réponse assez complète. Je vais commencer à apprendre sérieusement le php!

Commentaire de Romain2006 le 19/04/2006 21:17:40

Bonjour à tous !
Je suis encore débutant dans ce genre de trucs... et je ne sais pas où insérer le script et la feuille de style. Faut-il les mettre dans une autre page?

merci d'avance pour vos réponses !

Commentaire de FasteX_ le 19/04/2006 23:28:07

Dans 2 fichiers différents:

Feuille de style     -> style.css
Script               -> dyn_menu.js

Commentaire de Romain2006 le 20/04/2006 11:49:22

Merci Beaucoup

Commentaire de flattazor le 08/11/2007 17:18:33

bonjour,
trés beau menu, j'ai apporté des correctifs pour qu'il soit compatible ie et firefox.

pour le fichier .js

ligne 14-26 remplacer 3dout par troisdout

ligne 22 remplacer 3din par troisdin

ligne 44 ajouter entre les guillemets apres display le mot block

pour le css.
rajouter les unités pour les tailles
ligne 76-90-98 178px
ligne 77-91-99 20px

ligne 67 remplacer 3dout par troisdout

ligne 81 remplacer 3din par troisdin

voilà, merci pour le code fastex

Commentaire de flattazor le 09/11/2007 08:06:40

désolé pour le deuxième post mais un oubli à la ligne 14

aprés display: mettre block

biensur les références de N° de ligne font appellent au code source ci-dessus.

voilà, je crois je ne rien oublié cette fois...

Commentaire de darkscythe le 27/01/2009 12:25:11 9/10

C'est chouette moi je dis après un peu d'amélioration à faire soit même dans le style mais c'est gère !!

 Ajouter un commentaire

Nos sponsors


Sondage...

CalendriCode

Février 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728

Consulter la suite du CalendriCode
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 3,526 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)