Menu dynamique vertical avec effet bouton

Télécharger le projet
Commenter

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.
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

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.

Du même auteur (FasteX_)