MENU EN CASCADE menu glissant, menu cascade, menu déroulant, menu horizontal, Source N°47404

Information sur la source

Catégorie :Menu & Co Classé sous : menu glissant, menu cascade, menu déroulant, menu horizontal Niveau : Débutant Date de création : 24/07/2008 Date de mise à jour : 31/07/2008 16:02:25 Vu / téléchargé: 6 068 / 442

Auteur : kazma

Ecrire un message privé

Note :

8,00 / 10

1
2
3
4
5
6
7
8
9
10

Commentaire sur cette source (12)

Ajouter un commentaire et/ou une note

Description

Cliquez pour voir la capture en taille normale

c'est un menu en cascade des div imbrique les un sur les autres
qui se deroulent comme ceux que l'on trouve sur la page du site certains trouverons peut etre que la presentation est simple c'est volontaire je n'ai pas voulu encombre le script pour facilite l'adaptation selon les besoins.en plus le zip jai rajouter une source qui permet de gere plusieurs menu dans une page et une autre source ou le menus qui est ouvert remontent automatiquement quand on en ouvre un autre.

Source

<html><head>
<title>menu</title>
<style type="text/css">
.Style1 {
background-color: gray;
}
.element {
background-color: blue;
}
.element2 {
background-color: red;
}
.element3 {
background-color: black;
}
.element4 {
background-color: white;
}
</style>
<script TYPE="text/javascript">
var mnhv=''
function mnh(vl,pb){
if(controle==1){
controle=0
bl=vl
pl=pb
if(document.getElementById(vl).offsetTop<=20){
mnhv=1
}
if(document.getElementById(vl).offsetTop>=pl){
mnhv=0
}
}
var Table_haut=document.getElementById(bl)
var divgener=document.getElementById('divgeneral')
if(mnhv==0){
Table_haut.style.top=Table_haut.offsetTop-10
divgener.style.height=divgener.offsetHeight-10+'px'
if(Table_haut.offsetTop<=20){
return false
}
setTimeout("mnh(bl)",16)
}
if(mnhv==1){
Table_haut.style.top=Table_haut.offsetTop+10
divgener.style.height=divgener.offsetHeight+10+'px'
if(Table_haut.offsetTop>=pb){
return false
}
setTimeout("mnh(bl,pl)",16)
}}
</SCRIPT>
</head>
<body bgcolor='green'>
<div id='divgeneral'class="element4" style='overflow:hidden;position:absolute;top:80px; left:300px; width:166px; height:90px; z-Index:10'>
<img src='btn.gif'style='position:absolute;' onclick='controle=1;mnh("mh",120)'>
<div id='mh'class="element" style='position:absolute;top:20px;left:0;width:166px; height:300px; z-Index:11'>
<img src='btn.gif'style='position:absolute;' onclick='controle=1;mnh("mi",150)'>
<div id='mi'class="element2" style='position:absolute;top:20px;left:0;width:166px; height:300px; z-Index:12'>
<img src='btn.gif'style='position:absolute;' onclick='controle=1;mnh("mj",50)'>
<div id='mj'class="element3" style='position:absolute;top:20px;left:0;width:166px; height:300px; z-Index:13'>
<img src='btn.gif'style='position:absolute;' onclick='controle=1;mnh("mk",150)'>
<div id='mk'class="element4" style='position:absolute;top:20px;left:0;width:166px; height:300px; z-Index:14'>
</div>
</div>
</div>
</div>
</div>
</html>

<html><head>

<title>menu</title>

<style type="text/css">
.Style1 {
background-color: gray;
}
.element {
background-color: blue;
}
.element2 {
background-color: red;
}
.element3 {
background-color: black;
}
.element4 {
background-color: white;
}
</style>
<script TYPE="text/javascript">
var mnhv=''

function mnh(vl,pb){
if(controle==1){
controle=0
bl=vl
pl=pb
if(document.getElementById(vl).offsetTop<=20){
mnhv=1
}
if(document.getElementById(vl).offsetTop>=pl){
mnhv=0
}
}
var Table_haut=document.getElementById(bl)
var divgener=document.getElementById('divgeneral')
if(mnhv==0){
Table_haut.style.top=Table_haut.offsetTop-10
divgener.style.height=divgener.offsetHeight-10+'px'
if(Table_haut.offsetTop<=20){
return false
}
setTimeout("mnh(bl)",16)
}
if(mnhv==1){
Table_haut.style.top=Table_haut.offsetTop+10
divgener.style.height=divgener.offsetHeight+10+'px'
if(Table_haut.offsetTop>=pb){
return false
}
setTimeout("mnh(bl,pl)",16)
}}
</SCRIPT>
</head>
<body bgcolor='green'>
<div id='divgeneral'class="element4" style='overflow:hidden;position:absolute;top:80px; left:300px; width:166px; height:90px; z-Index:10'>
<img src='btn.gif'style='position:absolute;' onclick='controle=1;mnh("mh",120)'>
<div id='mh'class="element" style='position:absolute;top:20px;left:0;width:166px; height:300px; z-Index:11'>
<img src='btn.gif'style='position:absolute;' onclick='controle=1;mnh("mi",150)'>
<div id='mi'class="element2" style='position:absolute;top:20px;left:0;width:166px; height:300px; z-Index:12'>
<img src='btn.gif'style='position:absolute;' onclick='controle=1;mnh("mj",50)'>
<div id='mj'class="element3" style='position:absolute;top:20px;left:0;width:166px; height:300px; z-Index:13'>
<img src='btn.gif'style='position:absolute;' onclick='controle=1;mnh("mk",150)'>
<div id='mk'class="element4" style='position:absolute;top:20px;left:0;width:166px; height:300px; z-Index:14'>
</div>
</div>
</div>
</div>
</div>
</html>

Conclusion

c'est du simple mais ca marche

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 !

menu cassade
- btn.gif 356 octets
- menu cascade milti.html 2 877 octets
- menu cascade multi avec retour auto.html 2 912 octets
- menu cascade.html 2 002 octets

Télécharger le zip

Historique

25 juillet 2008 21:55:04 :: le div le plus en arriere plans etait fixe ce qui faisait qu'on le voyait toujour maintenant sa taille change en fonction des menus
31 juillet 2008 16:02:26 :: ajouter d'une source qui permet de gere plusieurs menu dans une page et une autre source ou le menus qui est ouvert remontent automatiquement quand on en ouvre un autre.

Sources du même auteur

Toutes les sources de kazma

Sources de la même categorie

Toutes les sources de la catégorie Menu & Co

Sources en rapport avec celle ci

MENU GLISSANT

Commentaires

Commentaire de nicomilville le 26/07/2008 09:56:26

Salut,

Moi je dis que c'est un bon travail !

En plus plein de gens se demandais comment reproduire le menu et les boites de code sources (le menu est sur graphfr mais les boites je ne les ai pas trouvés) donc tu leur rend un grand service...

a++

PS : merci pour cette source (l'as tu montré au gas sur le forum ?)
Commentaire de kazma le 26/07/2008 22:58:36

jour Nico

l'as tu montré au gas sur le forum ?

oui en esperant que sa lui conviendra
Commentaire de nicomilville le 27/07/2008 09:12:34

oui en esperant que sa lui conviendra

Si ça ne lui convient pas je ne sais pas ce qui lui conviendrai ! lol

Je te metterai une note plus tard quand je regarderai le code en profondeur !

a++
Commentaire de krma le 28/07/2008 09:47:08

Bonjour, c'est vrai qu'elle est classe cette source et ultra pratique dans bien des cas. Le top over the top serait que les n autres div se referment toutes seules lorsque je change de div. Ca éviterait d'avoir à refermer manuellement celles deja ouvertes. Je ne sais pas si les modifs sont compliquées mais je vais tenter le coup.
ps : si qqu'un a une idée, je suis preneur :p)
Commentaire de rambc le 28/07/2008 14:11:47

Seule critique : il faut connaître à l'avance la hauteur des DIV. Peut-on l'adapter au contenu ?
Commentaire de bultez le 28/07/2008 16:28:45

ça peut intéresser pas mal de monde,
on saura vers où les diriger.

>>éviterait d'avoir à refermer manuellement celles deja ouvertes.
"il suffit", avant d'agrandir, de remettre les height
à leur valeurs initiales pour toutes les div.

>>Peut-on l'adapter au contenu ?
peut-être moins facile( ? )
augmenter le height, tant que
la scrollbar existe, peut-être ?
doit y avoir plus simple...

2 propositions d'amélioration
que va bien nous faire kazma !
Commentaire de kazma le 29/07/2008 18:35:08

jour
q1:
ca y est je vient de cree Le top over the top(lol) en gros avec ce script les div(s) se refermes automatiquement et en plus on peut mettre plusieurs menus sur la meme page. en tout cas apres avoir fait les modif j'ai le cerveau plein de if if if enfin voila ca marche.

q2:
il faut connaître à l'avance la hauteur des DIV

si tu met le contunu dans un tableau ou un div tu peut connaitre leurs hauteur par le dom a la palce de la valeur on pourait mettre a la place
( document.getElementById(l'element).offsetHeight))???
c'est a exploiter

<html><head>

<title>menu</title>

<style type="text/css">
.Style1 {
background-color: gray;
}
.element {
background-color: blue;
}
.element2 {
background-color: red;
}
.element3 {
background-color: black;
}
.element4 {
background-color: white;
}
</style>
<script TYPE="text/javascript">
var mnhv=1
var retour=''
function mnh(vl,pb,dg){
if(controle==1){
controle=0
bl=vl
pl=pb
gd=dg
}
var Table_haut=document.getElementById(bl)
var divgener=document.getElementById(gd)
if(mnhv==0){
var Table_retour=document.getElementById(retour)
Table_retour.style.top=Table_retour.offsetTop-10
document.getElementById(retour2).style.height=document.getElementById(retour2).offsetHeight-10+'px'
if(Table_retour.offsetTop<=20){
mnhv=1
}
}
if(mnhv==1){
if(retour==bl){
return false
}
Table_haut.style.top=Table_haut.offsetTop+10
divgener.style.height=divgener.offsetHeight+10+'px'
if(Table_haut.offsetTop>=pb){
mnhv=0
retour=bl
retour2=gd
return false
}
}
setTimeout("mnh(bl,pl,gd)",16)}
</SCRIPT>
</head>
<body bgcolor='green'>
<div id='m'class="element4" style='overflow:hidden;position:absolute;top:80px; left:300px; width:166px; height:90px; z-Index:10'>
<img src='btn.gif'onclick='controle=1;mnh("mh",120,"m")'>

<div id='mh'class="element" style='position:absolute;top:20px;left:0;width:166px; height:300px; z-Index:11'>
<img src='btn.gif' onclick='controle=1;mnh("mi",150,"m")'>

<div id='mi'class="element2" style='position:absolute;top:20px;left:0;width:166px; height:300px; z-Index:12'>
<img src='btn.gif'style='position:absolute;' onclick='controle=1;mnh("mj",100,"m")'>

<div id='mj'class="element3" style='position:absolute;top:20px;left:0;width:166px; height:300px; z-Index:13'>
<img src='btn.gif'style='position:absolute;' onclick='controle=1;mnh("mk",150,"m")'>

<div id='mk'class="element4" style='position:absolute;top:20px;left:0;width:166px; height:300px; z-Index:14'>
</div>
</div>
</div>
</div>
</div>
<div id='mmm'class="element" style='overflow:hidden;position:absolute;left:100px;width:166px; height:90px;'>
<img src='btn.gif'style='position:absolute;' onclick='controle=1;mnh("a",150,"mmm")'>

<div id='a'class="element4" style='position:absolute;left:0px;top:20px;width:166px; height:300px; '>
<img src='btn.gif'style='position:absolute;' onclick='controle=1;mnh("b",150,"mmm")'>

<div id='b'class="element2" style='position:absolute;left:0px;top:20px;width:166px; height:300px;'>
<img src='btn.gif'style='position:absolute;' onclick='controle=1;mnh("c",50,"mmm")'>

<div id='c'class="element3" style='position:absolute;left:0px;top:20px;width:166px; height:300px;'>
<img src='btn.gif'style='position:absolute;' onclick='controle=1;mnh("d",150,"mmm")'>

<div id='d'class="element" style='position:absolute;left:0px;top:20px;width:166px; height:300px;'>
</div>
</div>
</div>
</div>
</div>
</body>

</html>
Commentaire de krma le 29/07/2008 18:43:05

Je découvre... Ca semble mythique. Je teste dans tous les sens avant de sortir la palme d'or :p)
Commentaire de kazma le 29/07/2008 19:07:36

petite modif la sa drevrait etre nikel

<html><head>

<title>menu</title>

<style type="text/css">
.Style1 {
background-color: gray;
}
.element {
background-color: blue;
}
.element2 {
background-color: red;
}
.element3 {
background-color: black;
}
.element4 {
background-color: white;
}
</style>
<script TYPE="text/javascript">
var mnhv=1
var retour=''
function mnh(vl,pb,dg){
if(controle==1){
controle=0
bl=vl
pl=pb
gd=dg
}
var Table_haut=document.getElementById(bl)
var divgener=document.getElementById(gd)
if(mnhv==0){
var Table_retour=document.getElementById(retour)
Table_retour.style.top=Table_retour.offsetTop-10
document.getElementById(retour2).style.height=document.getElementById(retour2).offsetHeight-10+'px'
if(Table_retour.offsetTop<=20){
mnhv=1
if(retour==bl){
return false
}
}
}
if(mnhv==1){

Table_haut.style.top=Table_haut.offsetTop+10
divgener.style.height=divgener.offsetHeight+10+'px'
if(Table_haut.offsetTop>=pb){
mnhv=0
retour=bl
retour2=gd
return false
}
}
setTimeout("mnh(bl,pl,gd)",16)}
</SCRIPT>
</head>
<body bgcolor='green'>
<div id='m'class="element4" style='overflow:hidden;position:absolute;top:80px; left:300px; width:166px; height:90px; z-Index:10'>
<img src='btn.gif'onclick='controle=1;mnh("mh",120,"m")'>

<div id='mh'class="element" style='position:absolute;top:20px;left:0;width:166px; height:300px; z-Index:11'>
<img src='btn.gif' onclick='controle=1;mnh("mi",150,"m")'>

<div id='mi'class="element2" style='position:absolute;top:20px;left:0;width:166px; height:300px; z-Index:12'>
<img src='btn.gif'style='position:absolute;' onclick='controle=1;mnh("mj",100,"m")'>

<div id='mj'class="element3" style='position:absolute;top:20px;left:0;width:166px; height:300px; z-Index:13'>
<img src='btn.gif'style='position:absolute;' onclick='controle=1;mnh("mk",150,"m")'>

<div id='mk'class="element4" style='position:absolute;top:20px;left:0;width:166px; height:300px; z-Index:14'>
</div>
</div>
</div>
</div>
</div>
<div id='mmm'class="element" style='overflow:hidden;position:absolute;left:100px;width:166px; height:90px;'>
<img src='btn.gif'style='position:absolute;' onclick='controle=1;mnh("a",150,"mmm")'>

<div id='a'class="element4" style='position:absolute;left:0px;top:20px;width:166px; height:300px; '>
<img src='btn.gif'style='position:absolute;' onclick='controle=1;mnh("b",150,"mmm")'>

<div id='b'class="element2" style='position:absolute;left:0px;top:20px;width:166px; height:300px;'>
<img src='btn.gif'style='position:absolute;' onclick='controle=1;mnh("c",50,"mmm")'>

<div id='c'class="element3" style='position:absolute;left:0px;top:20px;width:166px; height:300px;'>
<img src='btn.gif'style='position:absolute;' onclick='controle=1;mnh("d",150,"mmm")'>

<div id='d'class="element" style='position:absolute;left:0px;top:20px;width:166px; height:300px;'>
</div>
</div>
</div>
</div>
</div>
</body>

</html>
Commentaire de krma le 29/07/2008 23:43:33

Bonne nouvelle, ça tient le choc dans IE 5 et +, Mozilla, Opera, Safari...
Très bon tout ça !
Donc, si j'ai bien compris, le seul problème restant à régler, est la taille auto des div ?
J'avoue que mes compétences sont dépassées depuis longtemps mais on doit pouvoir s'en tirer avec des %ages plutot que des valeurs absolues non ?
Tu parles de dom mais je ne sais meme pas ce que c'est loll!
En tout cas bravo pour ce script qui va sans doute me servir très bientôt !
Commentaire de nicomilville le 30/07/2008 08:38:51

@krma : Salut,

Le DOM, c'est : le Document Object Model...

On peut s'en servir pour ajouter des élément dynamiquement en javascript...

a++
Commentaire de bultez le 30/07/2008 10:35:48

et pour la "atille auto" des div,
à priori : agrandir tant que
offsetWidth est != clientWidth
( overflow:auto dans le style du div )
@+