|
 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 DYNAMIQUE VERTICAL AVEC EFFET BOUTON
 Information sur la source
 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
Pour les "Membres Club", vous pouvez 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
 Sources de la même categorie
 Commentaires et avis
|
|