CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2012 02 11 23:51:38

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

Menu & Co

> MENU JAVASCRIPT MULTI NIVEAU AVEC HERITAGE

MENU JAVASCRIPT MULTI NIVEAU AVEC HERITAGE

Information sur la source

Note :

4,67 / 10

Catégorie :Menu & Co Niveau :Débutant Date de création :05/01/2004 Date de mise à jour :05/01/2004 17:34:06 Vu :19 335

Auteur : ayperos

Ecrire un message privé

Site perso

Commentaire sur cette source (4)

Ajouter un commentaire et/ou une note

Description

Cliquez pour voir la capture en taille normale

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

UN MENU EN CSS par Julien39

FLÈCHE CLIGNOTANTE AU SURVOL D'UN LIEN par lecurieux41

TREEMENU-2.3.6-MACNIP par neep

MENU CIRCULAIRE par adelmonis

MENU TASKBAR WINDOWSXP HOME par micking

Toutes les sources de la catégorie Menu & Co

Commentaires et avis

Commentaire de tit1012 le 05/01/2004 21:44:02

Moi G virer le + "\\\\n" dans document.write(zstr + "\\\\n")
sinno sa bugguai si tu veu un screen di le moi
sinon c assez bien

Commentaire de jfredd le 19/02/2004 16:24:27

Bonjour,

moi sous win XP ça n'affiche rien et j'ai un msg d'IE6 comme quoi
ligne 242
car 3
Erreur: 'MorpheusMenu' est indéfini
Code 0

Voilà moi ça ne me dit rien du tout mais peut-être y a-t-il vraiment un problème sur ce script.

A+
FRED

Commentaire de ayperos le 19/02/2004 16:48:57

alors, pour les \\\\\\\\\\n je pense que c'est un filtre du site CS donc vous pouvez les enlever, ils ne sont pas nécessaire...

par contre je ne garantie pas la compatibilité avec des navigateurs autre que IE 5.5 (comme expliqué plus haut).
il y a donc peut etre des bug dans des versions superieurs genre IE6.

a propos, le script fait 216 ligne (copié collé d'ici) si c'est la ligne 242 c'est que tu l'as peux etre mal implémenté... et ça aussi je ne le garantie pas...

pour rappel : ce script est juste là a titre pedagogique pour voir le fonctionnement de l'heritage avec le javascript... ;)

Commentaire de beladel le 20/10/2005 15:00:23

Salut,
Sur WinXP, IE6: fonctionne bien (surtout apès avoir enlever les \\\\n).
Sur NS7, Mozila FireFox1.0.: affichage du menu mais pas les sous-menus.
Voilà.

Ajouter un commentaire

Nos sponsors

Derniers Blogs

SESSION SILVERLIGHT 5 3D : SLIDES ET DEMOS par Groc

[TECHDAYS 2012] SESSION WEBMATRIX 2 : LE COUTEAU SUISSE GRATUIT POUR VOS DéVELOPPEMENTS WEB - SLIDES par gpommier

[SHAREPOINT] LES SESSIONS TECHDAYS 2012. par Patrick Guimonet

TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3 par ROMELARD Fabrice

MISHRA READER : UN LECTEUR RSS TRèS ZUNE STYLE EN OPEN SOURCE ! par Vko

Forum

RE : RéCUPéRER LA VALEUR D'UNE VARIABLE PHP POUR L'UTILISER EN JAVASCRIPT par stealone

RE : TRANSFARMATION DES VARIABLES par marlopremier

RE : ADAPTER UN SCRIPT POUR IE6 par Ewan83

ADAPTER UN SCRIPT POUR IE6 par Ewan83

RE : CREATION DE SCORING OU RATING par Alex16000

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Passerelle Pericles sur site Joomla 17
Budget : 499€
Infogerance Serveur Debian Linux
Budget : 2 400€
Developpeur applications iphone - ipad - android
Budget : 800€

Logiciels

PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)

PONAMEDIA TV DEVIENS HELLLOOO FLASH LA TV SUR VOTRE ORDINATEUR. Toute une plateforme Multi...

Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO
Academy System (17.2.1.0)
ACADEMY SYSTEM (17.2.1.0)

Logiciel de gestion des établissements. - élèves/étudiants (inscription, dossier, absence...) -...

Cliquez pour télécharger Academy System
Easy-Planning (1.0.0.1)
EASY-PLANNING (1.0.0.1)

Basé sur les mêmes principes que MyPlanning, Easy-Planning permet de créer des plannings sous la ...

Cliquez pour télécharger Easy-Planning
COLLECTOR PLUS (3.00B)
COLLECTOR PLUS (3.00B)

COLLECTOR PLUS version 3.00B est un logiciel utilisant une base de données alimentée par : - L...

Cliquez pour télécharger COLLECTOR PLUS
LettresFaciles 2011 (8.0.0.1)
LETTRESFACILES 2011 (8.0.0.1)

LettresFaciles est un logiciel facilitant la création et la rédaction de lettres types. Son inte...

Cliquez pour télécharger LettresFaciles 2011