AccueilCodesTutorielsForumsEmploiLivresGuide achatConnexion

  • Javascript / Ajax / DHTML CodeS-SourceS
  • RSS CodeS-SourceS
  • CodyxBot, le Bot GTalk & MSN qu'il vous faut !
  • Générez des revenus avec vos codes, scripts et tutoriaux
  • Aide à la navigation du site
begin process at 2009 07 04 10:46:03
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 EN CASCADE


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 : 05/10/2008 14:30:10 Vu / téléchargé: 11 394 / 837
Auteur : kazma Ecrire un message privé
Note :
8 / 10 - par 1 personne
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

  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • <html <html xmlns="http://www.w3.org/1999/xhtml">
  • <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+'px';
  • 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+'px';
  • 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>
  • </body>
  • </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html <html xmlns="http://www.w3.org/1999/xhtml">
<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+'px';
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+'px';
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>
</body>
</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 !

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.
05 octobre 2008 14:30:10 :
mise a jour xhtml

Commentaires et avis

signaler à un administrateur
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 ?)

signaler à un administrateur
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

signaler à un administrateur
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++

signaler à un administrateur
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)

signaler à un administrateur
Commentaire de rambc le 28/07/2008 14:11:47 8/10

Seule critique : il faut connaître à l'avance la hauteur des DIV. Peut-on l'adapter au contenu ?

signaler à un administrateur
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 !

signaler à un administrateur
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>

signaler à un administrateur
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)

signaler à un administrateur
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>

signaler à un administrateur
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 !

signaler à un administrateur
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++

signaler à un administrateur
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 )
@+

Ajouter un commentaire

Nos sponsors

Sondage...

CalendriCode

Juillet 2009
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
2728293031  

Consulter la suite du CalendriCode

Téléchargements

Logiciels à télécharger sur le même thème :

Comparez les prix Nouvelle version


RIM BlackBerry Storm 9530
Entre 72€ et 72€


Visiter le guide achat

Photothèque Nouveau !

Photo friends at the beach.Photo pretty girls
Photo femme plage beauté 

Visiter la photothèque


Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés
Temps d'éxécution de la page : 0,671 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.