|
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 JAVASCRIPT MULTI NIVEAU AVEC HERITAGE
Information sur la source
Description
bon bah voila un bou de code qui vous permettra de mettre en place un menu a N dimension sur votre site.
la particularité etant que j'utilise un peu d'heritage par fleme de dupliquer les données...
donc voila ce code est a prendre comme il est a savoir
qu'il n'est pas fini a 100%
qu'il n'est pas tres propre
qu'il n'est pas toujours bien commenté...
qu'il n'est pas testé sous netscape (d'ailleur je crois pas qu'il fonctionne sous netscape)
mais au moins il marche (sous IE 5.5)...
tout le parametrage se fait dans le contructeur.
Source
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
-
- <html>
- <head>
- <title>Sans titre</title>
- <script language="javascript">
- /////////// variable d'initialisation
- // pas de progression de l'oppacité (100 = instentané)
- var frame = 30
- // temps d'affichage du time out
- var frameTimeOut = 100
-
-
- var ROOTMENU = null
- function dw(zstr) {
- document.write(zstr + "\\\\n")
- }
- ///// déclaration des class
-
- // objet menu principale
- function MorpheusMenu() {
- // attribus des tableau
- this.bordercolorlight = "#CCCCCC"
- this.bordercolordark = "#FFFFFF"
- this.bgColor = "#EEEEEE"
- this.border = 1
- this.frontColor = "#FFFFFF"
- this.cellpadding = 1
- this.cellspacing = 0
- //taille du tableau
- this.width = 200
- this.height = 20
- // taille des cellules
- this.cellWidth = 200
- this.cellHeight = 10
- // taille de la zone d'affichage
- this.clipWidth = 200
- this.clipHeight = this.cellHeight
- // position du menu
- this.top = 10
- this.left = 10
- this.align = "left"
- this.display = ""
- //objet parent et sous objets
- this.parentObj = null
- this.SubMenu = new Array()
- this.lid = ""
-
- // methodes
- this.AddMenu = MorpheusAddSubMenu
- this.Make = MorpheusMakeMenu
- this.Init = MorpheusInitMenu
- }
- /// objet sous menu
- function MorpheusSubMenu(nameIn, hrefIn, targetIn, idIn) {
- //heritage
- this.parent = MorpheusMenu
- this.parent()
- //attribus
- this.name = nameIn
- this.href = hrefIn
- this.target = targetIn
- this.lid = idIn
- this.SubMenu = new Array()
- //methode
- this.AddMenu = MorpheusAddSubMenu
- }
-
- /////////// fonction privé (sur le principe)
- // ajout d'un sous menu
- function MorpheusAddSubMenu(oMenu) {
- oMenu.parentObj = this
- this.SubMenu[this.SubMenu.length] = oMenu
- }
-
- function affiche(obj) {
- if (obj) {
- killAll(ROOTMENU, obj.id)
- obj.style.display = ""
- obj.style.top = event.clientY - event.offsetY
- obj.style.left = (event.clientX - event.offsetX) + parseInt(obj.style.width.substring(0, obj.style.width.length - 2)) - 30
- /// effet de transparence progressive
- Trans("document.all." + obj.id)
- }
- }
-
- function killAll(objMenu, strId) {
- var obj = findMenu(objMenu, strId)
- killChild(obj.parentObj)
- }
-
- function killChild(obj) {
- for (var o in obj.SubMenu) {
- tmpObj = eval("document.all.m" + obj.lid + o)
- if (tmpObj) {
- tmpObj.style.display = "none"
- transObj = tmpObj
- DeTrans("document.all.m" + obj.lid + o)
- }
- killChild(obj.SubMenu[o])
- }
- }
-
- /// fonction donnant un effet de transparence progressive
- /// je l'avoue elle n'est pas de moi mais j'ai oublié où je l'ai trouvé
- function Trans(strObj) {
- var transObj = eval(strObj)
- transObj.filters.alpha.opacity += frame
- if (transObj.filters.alpha.opacity < 100) {
- // alert(objTmp.filters.alpha.opacity)
- cmpt = setTimeout("Trans('" + strObj + "');",frameTimeOut);
- }
- }
-
- /// fonction initialisant la transparence
- /// pareil
- function DeTrans(strObj) {
- var transObj = eval(strObj)
- transObj.filters.alpha.opacity = 0
- }
-
- /// fonction retournant un objet Menu selon un identifiant
- function findMenu(objMenu, strId) {
- //var s = strId.substring(1, strId.length - 1) // ça renvois le parent (au cas ou)
- var s = strId.substr(1)
- //alert(objMenu.lid + ", " + s)
- if (objMenu.lid == s) return objMenu
- for (o in objMenu.SubMenu) {
- cObj = findMenu(objMenu.SubMenu[o], strId)
- if (cObj != null) return cObj
- }
- return null
- }
-
- /// creation du menu
- function MorpheusMakeMenu() {
- if (!ROOTMENU) ROOTMENU = this
- N = 0
- //positionnement des sous menu
- for (objMenu in this.SubMenu) {
- //this.SubMenu[objMenu].top = this.top + N
- this.SubMenu[objMenu].left = this.left + this.cellWidth
- this.SubMenu[objMenu].display = "none"
- this.SubMenu[objMenu].Make()
- N += this.cellHeight
- }
- this.clipHeight = N * this.cellHeight
- if (this.SubMenu.length > 0) {
- dw("<div style='filter:alpha(opacity=100);width:" + this.width + ";z-index:" + (this.lid.toString().length + 1) + ";display:" + this.display + ";position:absolute;left:" + this.left + ";top:" + this.top + "' id='m" + this.lid + "'>")
- dw("<table bordercolorlight=" + this.bordercolorlight + " bordercolordark=" + this.bordercolordark + " width=" + this.width + " height=" + this.height + " cellpadding=" + this.cellpadding + " cellspacing=" + this.cellspacing + " align='" + this.align + "' border=" + this.border + " bgcolor='" + this.bgColor + "' text='" + this.frontColor + "'>")
- var N = 1
- for (objMenu in this.SubMenu) {
- dw("<tr><td width=" + this.cellWidth + " height=" + this.cellHeight + " onmouseout='//kill()' onmouseover='affiche(document.all.m" + this.lid + N + ")'><a href='" + this.SubMenu[objMenu].href + "' target='" + this.SubMenu[objMenu].target + "'>" + this.SubMenu[objMenu].name + "</td></tr>")
- N++
- }
- dw("</table>")
- dw("</div>")
- }
- }
-
- /// Initialisation du menu
- function MorpheusInitMenu() {
-
- }
-
- /// fonction public
- </script>
- </head>
-
- <body>
- <script language="javascript">
- var menuLeft = new MorpheusMenu()
- var IMGPATH = "/"
- var menu1 = new MorpheusSubMenu("Présentation", "#", "_top", 1)
- var menu11 = new MorpheusSubMenu("l'histoire", "#", "_top", 11)
- var menu111 = new MorpheusSubMenu("les chiffre", "#", "_top", 111)
- menu11.AddMenu(menu111)
- var menu112 = new MorpheusSubMenu("les activité", "#", "_top", 112)
- menu11.AddMenu(menu112)
- menu1.AddMenu(menu11)
- var menu12 = new MorpheusSubMenu("informatique", "#", "_top", 12)
- var menu121 = new MorpheusSubMenu("les chiffre", "#", "_top", 121)
- menu12.AddMenu(menu121)
- var menu122 = new MorpheusSubMenu("les activité", "#", "_top", 122)
- menu12.AddMenu(menu122)
- menu1.AddMenu(menu12)
- var menu13 = new MorpheusSubMenu("encore l'histoire", "#", "_top", 13)
- menu1.AddMenu(menu13)
- menuLeft.AddMenu(menu1)
- var menu2 = new MorpheusSubMenu("Accueil", "#", "_top", 2)
- menuLeft.AddMenu(menu2)
- var menu3 = new MorpheusSubMenu("Ressources Humaines", "#", "_top", 3)
- var menu31 = new MorpheusSubMenu("toujour l'histoire", "#", "_top", 31)
- var menu311 = new MorpheusSubMenu("les chiffre", "#", "_top", 311)
- menu31.AddMenu(menu311)
- var menu312 = new MorpheusSubMenu("les activité", "#", "_top", 312)
- menu31.AddMenu(menu312)
- menu3.AddMenu(menu31)
- var menu32 = new MorpheusSubMenu("informatique", "#", "_top", 32)
- var menu321 = new MorpheusSubMenu("les chiffre", "#", "_top", 321)
- menu32.AddMenu(menu321)
- var menu322 = new MorpheusSubMenu("les activité", "#", "_top", 322)
- menu32.AddMenu(menu322)
- menu3.AddMenu(menu32)
- var menu33 = new MorpheusSubMenu("et merde", "#", "_top", 33)
- menu3.AddMenu(menu33)
- menuLeft.AddMenu(menu3)
- var menu4 = new MorpheusSubMenu("Services Généreux", "#", "_top", 4)
- menuLeft.AddMenu(menu4)
- var menu5 = new MorpheusSubMenu("Voyage", "#", "_top", 5)
- menuLeft.AddMenu(menu5)
-
- menuLeft.Make()
- </script>
- </body>
- </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Sans titre</title>
<script language="javascript">
/////////// variable d'initialisation
// pas de progression de l'oppacité (100 = instentané)
var frame = 30
// temps d'affichage du time out
var frameTimeOut = 100
var ROOTMENU = null
function dw(zstr) {
document.write(zstr + "\\\\n")
}
///// déclaration des class
// objet menu principale
function MorpheusMenu() {
// attribus des tableau
this.bordercolorlight = "#CCCCCC"
this.bordercolordark = "#FFFFFF"
this.bgColor = "#EEEEEE"
this.border = 1
this.frontColor = "#FFFFFF"
this.cellpadding = 1
this.cellspacing = 0
//taille du tableau
this.width = 200
this.height = 20
// taille des cellules
this.cellWidth = 200
this.cellHeight = 10
// taille de la zone d'affichage
this.clipWidth = 200
this.clipHeight = this.cellHeight
// position du menu
this.top = 10
this.left = 10
this.align = "left"
this.display = ""
//objet parent et sous objets
this.parentObj = null
this.SubMenu = new Array()
this.lid = ""
// methodes
this.AddMenu = MorpheusAddSubMenu
this.Make = MorpheusMakeMenu
this.Init = MorpheusInitMenu
}
/// objet sous menu
function MorpheusSubMenu(nameIn, hrefIn, targetIn, idIn) {
//heritage
this.parent = MorpheusMenu
this.parent()
//attribus
this.name = nameIn
this.href = hrefIn
this.target = targetIn
this.lid = idIn
this.SubMenu = new Array()
//methode
this.AddMenu = MorpheusAddSubMenu
}
/////////// fonction privé (sur le principe)
// ajout d'un sous menu
function MorpheusAddSubMenu(oMenu) {
oMenu.parentObj = this
this.SubMenu[this.SubMenu.length] = oMenu
}
function affiche(obj) {
if (obj) {
killAll(ROOTMENU, obj.id)
obj.style.display = ""
obj.style.top = event.clientY - event.offsetY
obj.style.left = (event.clientX - event.offsetX) + parseInt(obj.style.width.substring(0, obj.style.width.length - 2)) - 30
/// effet de transparence progressive
Trans("document.all." + obj.id)
}
}
function killAll(objMenu, strId) {
var obj = findMenu(objMenu, strId)
killChild(obj.parentObj)
}
function killChild(obj) {
for (var o in obj.SubMenu) {
tmpObj = eval("document.all.m" + obj.lid + o)
if (tmpObj) {
tmpObj.style.display = "none"
transObj = tmpObj
DeTrans("document.all.m" + obj.lid + o)
}
killChild(obj.SubMenu[o])
}
}
/// fonction donnant un effet de transparence progressive
/// je l'avoue elle n'est pas de moi mais j'ai oublié où je l'ai trouvé
function Trans(strObj) {
var transObj = eval(strObj)
transObj.filters.alpha.opacity += frame
if (transObj.filters.alpha.opacity < 100) {
// alert(objTmp.filters.alpha.opacity)
cmpt = setTimeout("Trans('" + strObj + "');",frameTimeOut);
}
}
/// fonction initialisant la transparence
/// pareil
function DeTrans(strObj) {
var transObj = eval(strObj)
transObj.filters.alpha.opacity = 0
}
/// fonction retournant un objet Menu selon un identifiant
function findMenu(objMenu, strId) {
//var s = strId.substring(1, strId.length - 1) // ça renvois le parent (au cas ou)
var s = strId.substr(1)
//alert(objMenu.lid + ", " + s)
if (objMenu.lid == s) return objMenu
for (o in objMenu.SubMenu) {
cObj = findMenu(objMenu.SubMenu[o], strId)
if (cObj != null) return cObj
}
return null
}
/// creation du menu
function MorpheusMakeMenu() {
if (!ROOTMENU) ROOTMENU = this
N = 0
//positionnement des sous menu
for (objMenu in this.SubMenu) {
//this.SubMenu[objMenu].top = this.top + N
this.SubMenu[objMenu].left = this.left + this.cellWidth
this.SubMenu[objMenu].display = "none"
this.SubMenu[objMenu].Make()
N += this.cellHeight
}
this.clipHeight = N * this.cellHeight
if (this.SubMenu.length > 0) {
dw("<div style='filter:alpha(opacity=100);width:" + this.width + ";z-index:" + (this.lid.toString().length + 1) + ";display:" + this.display + ";position:absolute;left:" + this.left + ";top:" + this.top + "' id='m" + this.lid + "'>")
dw("<table bordercolorlight=" + this.bordercolorlight + " bordercolordark=" + this.bordercolordark + " width=" + this.width + " height=" + this.height + " cellpadding=" + this.cellpadding + " cellspacing=" + this.cellspacing + " align='" + this.align + "' border=" + this.border + " bgcolor='" + this.bgColor + "' text='" + this.frontColor + "'>")
var N = 1
for (objMenu in this.SubMenu) {
dw("<tr><td width=" + this.cellWidth + " height=" + this.cellHeight + " onmouseout='//kill()' onmouseover='affiche(document.all.m" + this.lid + N + ")'><a href='" + this.SubMenu[objMenu].href + "' target='" + this.SubMenu[objMenu].target + "'>" + this.SubMenu[objMenu].name + "</td></tr>")
N++
}
dw("</table>")
dw("</div>")
}
}
/// Initialisation du menu
function MorpheusInitMenu() {
}
/// fonction public
</script>
</head>
<body>
<script language="javascript">
var menuLeft = new MorpheusMenu()
var IMGPATH = "/"
var menu1 = new MorpheusSubMenu("Présentation", "#", "_top", 1)
var menu11 = new MorpheusSubMenu("l'histoire", "#", "_top", 11)
var menu111 = new MorpheusSubMenu("les chiffre", "#", "_top", 111)
menu11.AddMenu(menu111)
var menu112 = new MorpheusSubMenu("les activité", "#", "_top", 112)
menu11.AddMenu(menu112)
menu1.AddMenu(menu11)
var menu12 = new MorpheusSubMenu("informatique", "#", "_top", 12)
var menu121 = new MorpheusSubMenu("les chiffre", "#", "_top", 121)
menu12.AddMenu(menu121)
var menu122 = new MorpheusSubMenu("les activité", "#", "_top", 122)
menu12.AddMenu(menu122)
menu1.AddMenu(menu12)
var menu13 = new MorpheusSubMenu("encore l'histoire", "#", "_top", 13)
menu1.AddMenu(menu13)
menuLeft.AddMenu(menu1)
var menu2 = new MorpheusSubMenu("Accueil", "#", "_top", 2)
menuLeft.AddMenu(menu2)
var menu3 = new MorpheusSubMenu("Ressources Humaines", "#", "_top", 3)
var menu31 = new MorpheusSubMenu("toujour l'histoire", "#", "_top", 31)
var menu311 = new MorpheusSubMenu("les chiffre", "#", "_top", 311)
menu31.AddMenu(menu311)
var menu312 = new MorpheusSubMenu("les activité", "#", "_top", 312)
menu31.AddMenu(menu312)
menu3.AddMenu(menu31)
var menu32 = new MorpheusSubMenu("informatique", "#", "_top", 32)
var menu321 = new MorpheusSubMenu("les chiffre", "#", "_top", 321)
menu32.AddMenu(menu321)
var menu322 = new MorpheusSubMenu("les activité", "#", "_top", 322)
menu32.AddMenu(menu322)
menu3.AddMenu(menu32)
var menu33 = new MorpheusSubMenu("et merde", "#", "_top", 33)
menu3.AddMenu(menu33)
menuLeft.AddMenu(menu3)
var menu4 = new MorpheusSubMenu("Services Généreux", "#", "_top", 4)
menuLeft.AddMenu(menu4)
var menu5 = new MorpheusSubMenu("Voyage", "#", "_top", 5)
menuLeft.AddMenu(menu5)
menuLeft.Make()
</script>
</body>
</html>
Conclusion
pour information, ce code est relativement souple, et en bidouillant l'HTML généré et le positionnement de qq objet, vous pourrez en faire un menu horizontal...
le but de ce code n'etant pas de revolutionner le monde des menu internet, mais simplement de faire un peu d'heritage en javascript...
Sources de la même categorie
Commentaires et avis
|
Comparez les prix Nouvelle version

HTC Touch HD
Entre 25€ et 605€
|