Menu dynamique vertical avec effet bouton

Soyez le premier à donner votre avis sur cette source.

Vue 36 508 fois - Téléchargée 7 172 fois

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 / Exemple :


__________________________________________________________________________
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.

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
8
Date d'inscription
samedi 29 novembre 2008
Statut
Membre
Dernière intervention
4 mars 2010

merci jazaka allaho khayran ce très bien fait
Messages postés
26
Date d'inscription
vendredi 13 juin 2008
Statut
Membre
Dernière intervention
18 février 2009

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 !!
Messages postés
8
Date d'inscription
dimanche 23 septembre 2007
Statut
Membre
Dernière intervention
12 janvier 2010

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...
Messages postés
8
Date d'inscription
dimanche 23 septembre 2007
Statut
Membre
Dernière intervention
12 janvier 2010

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
Messages postés
3
Date d'inscription
mercredi 19 avril 2006
Statut
Membre
Dernière intervention
20 avril 2006

Merci Beaucoup
Afficher les 33 commentaires

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.