Menu en cascade

Soyez le premier à donner votre avis sur cette source.

Vue 18 298 fois - Téléchargée 1 372 fois

Description

c'est un menu en cascade des div imbrique les un sur les autres
qui se deroulent dansle zip il y a une source avec un menu 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 / Exemple :


<!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">

body{
font-size:12px;
margin-left:20px;
}

.menu1 {
position:absolute;
top:26px;
left:0;
width:500px;
height:300px;
background-color: white;
}

.element1 {
overflow:hidden;
position:absolute;
top:00px;
left:0px;
width:500px;
height:114px;
background-color: white;
}

#haut {
width:500px;
height:26px;
background-image:url("off.jpg");
color:white;
cursor:pointer;
}
#haut:hover{
background-image:url("on.jpg");
color:red;
}

#contmenu{
background-color:brown;
top:50px;
left:60px;
position:relative;
width:500px;
}

.textmenu{
font-size:18px;
margin-left:10px;
}

.contexte{
font-size:14px;
margin:10px;
}

</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<=26){
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<=26){
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 ='contmenu'>
<div id='divgeneral'class="element1">
<div id='haut' onclick='controle=1;mnh("mh",330,"m")'>
<span class='textmenu'>premier</span>
</div>

<div class='contexte'>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse malesuada mi vel risus. Nulla ipsum risus, malesuada gravida, dapibus et, dapibus rhoncus, orci. Quisque suscipit. Praesent sed tellus facilisis lectus ultrices laoreet. Donec eu orci in metus egestas hendrerit. In hac habitasse platea dictumst. Integer blandit ultricies erat. Nunc viverra blandit velit. Maecenas tristique tortor non ante. In pharetra mi quis metus. Cras urna dolor, volutpat et, tincidunt quis, accumsan a, erat. Donec et dolor at elit congue molestie. In mi sapien, porta ut, cursus placerat, sodales in, libero. Aliquam tempus vestibulum ipsum. Suspendisse ligula orci, dignissim eu, laoreet ut, interdum sit amet, tortor. Vestibulum est lacus, sagittis faucibus, sollicitudin fringilla, pretium non, ipsum. Quisque enim. Nullam tortor mi, posuere et, pellentesque ut, laoreet quis, lectus. Mauris euismod aliquet mi. Pellentesque eu pede vitae nibh imperdiet convallis.
Mauris dictum congue lectus. Fusce erat elit, imperdiet non, aliquam sed, lobortis id, libero. Donec dui erat, sollicitudin sed, blandit eget, aliquam non, mauris. Mauris lobortis. Suspendisse orci metus, lobortis ut, sollicitudin et, laoreet eu
</div>

<div id='mh'class="menu1">
<div id='haut' onclick='controle=1;mnh("mi",170,"m")'>
<span class='textmenu'>deuxieme</span>
</div> 

<div class='contexte'>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec vel justo. Integer ornare dignissim lectus. Nunc tellus. Donec pharetra aliquam neque. Vestibulum ornare tincidunt mauris. Duis ut felis et ipsum feugiat faucibus. Phasellus enim magna, sodales id, mollis vel, fringilla et, felis. Integer placerat, tortor eu blandit eleifend, elit leo fringilla orci, quis tristique leo justo ut quam. Aenean dolor. Donec tempus. Ut dapibus odio vitae ligula.

</div>

<div id='mi'class="menu1">
<div id='haut' onclick='controle=1;mnh("mj",240,"m")'>
<span class='textmenu'>troisieme</span>
</div>

<div class='contexte'>
In posuere velit sit amet tortor. Donec elementum ipsum at ante luctus elementum. Duis varius dolor a tortor. Donec mi. Phasellus posuere. Mauris enim erat, commodo et, porta quis, consequat quis, nibh. Maecenas convallis eleifend ante. Phasellus metus metus, tempor sed, rhoncus ac, feugiat a, ante. Morbi sit amet ipsum. Cras eu leo quis pede condimentum tempor. Curabitur dictum elit sed lacus. Sed tortor magna, euismod non, mollis a, egestas nec, quam. Fusce porttitor porttitor nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce faucibus, ipsum vel consequat sodales, odio nulla pretium elit, sit amet tempor magna dolor vitae tellus. Quisque odio.
</div>

<div id='mj'class="menu1">

<div id='haut' onclick='controle=1;mnh("mk",150,"m")'>
<span class='textmenu'>quatrieme</span>
</div>

<div class='contexte'>
Nulla eget ante. In luctus nunc eu nisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse lectus sem, commodo vitae, scelerisque eget, varius vitae, neque. Maecenas sed risus. Pellentesque erat. Morbi varius elit id augue. In ultrices vulputate mauris. Vivamus libero ligula, viverra eget, placerat at, adipiscing at, elit. Quisque sapien eros, fermentum a, cursus vel, dignissim id, massa. Donec hendrerit neque sit amet arcu. Cras adipiscing tincidunt elit.
</div>

<div id='mk'class="menu1">
</div>
</div>
</div>
</div>
</div>
</div>

</body>

</html>

Conclusion :


ca marche

Codes Sources

A voir également

Ajouter un commentaire Commentaires
Messages postés
2
Date d'inscription
vendredi 28 octobre 2005
Statut
Membre
Dernière intervention
19 mai 2011

Salut, j'arrive un peu tard, mais c'est exactement ce que je cherche... Reste plus qu'à installer :) Merci pour cette petite prog.
Messages postés
8
Date d'inscription
dimanche 11 avril 2010
Statut
Membre
Dernière intervention
29 avril 2010

Super, je suis débutante, et je peux dire que les codes proposés sont super pour apprendre. Celui je le trouve excellent. :-)

Adelmonis
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
et pour la "atille auto" des div,
à priori : agrandir tant que
offsetWidth est != clientWidth
( overflow:auto dans le style du div )
@+
Messages postés
3472
Date d'inscription
lundi 16 juillet 2007
Statut
Membre
Dernière intervention
28 février 2014
33
@krma : Salut,

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

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

a++
Messages postés
20
Date d'inscription
samedi 20 septembre 2003
Statut
Membre
Dernière intervention
14 août 2008

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 !
Afficher les 14 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.