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

Ce site au démarrage

begin process at 2012 02 12 00:36:24

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

MENU EN CASCADE

Information sur la source

Note :

9,00 / 10

Catégorie :Menu & Co Classé sous :menu accordeon, accordeon, menu déroulant, menu glissant, menu cascade Niveau :Débutant Date de création :24/07/2008 Date de mise à jour :22/10/2009 10:37:38 Vu / téléchargé :15 624 / 1 116

Auteur : kazma

Ecrire un message privé

Commentaire sur cette source (14)

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

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

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

Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

menu cassade
- menu cascade milti.html 8 225 octets
- menu cascade multi avec retour auto.html 8 208 octets
- menu cascade.html 5 444 octets
- off.jpg 340 octets
- on.jpg 349 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.
05 octobre 2008 14:30:10 :: mise a jour xhtml
21 octobre 2009 19:51:16 :: amélioration de esthétisme et utilisation du css
21 octobre 2009 23:02:45 :: optimisation et embellissement
22 octobre 2009 10:37:38 :: modif de la capture , amelioration du designe et elimination de varibles global

Sources du même auteur

EFFET DE ROTATION A 360° D'IMAGE AVEC ACCELERATION DECELERAT...

PETIT LOGICIEL DE DESSIN, RETOUCHE AVEC CANVAS

DRAG & DROP VERS UN CANVAS

DIAPO EN CSS 3D

CONVERTISSEUR D'IMAGE BASE 64

Toutes les sources de kazma

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

Sources en rapport avec celle ci

DEUX MENU DÉROULANT LE PREMIER GÉNÈRE LE DEUXIÈME MENU par hakimastouri

ARBORECENCE XP DRAG-ON-DROP par micking

MENU VERTICALE GAUCHE ET DROIT DEROULANT par kazma

MENU DÉROULANT EN IMAGES par dlvains

MENU GLISSANT par kazma

Commentaires et avis

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 administrateur CS

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 8/10

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 administrateur CS

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 administrateur CS

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 )
@+

Commentaire de adelmonis le 29/04/2010 22:41:44 10/10

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

Adelmonis

Commentaire de zecristof le 19/05/2011 11:36:26

Salut, j'arrive un peu tard, mais c'est exactement ce que je cherche... Reste plus qu'à installer :) Merci pour cette petite prog.

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

menu accordeon vertical [ par titoine2000 ] BonjourJ'aimerais adapter le menu suivant pour mon site:http://www.phatfusion.net/imagemenu/mais le mettre en menu vertical, dans le genre de celui-ci accordeon spry [ par zrellianiss ] Bonjour je suis vraiment pour le dérangement mais je cherche qlq un qui peut m'aider a resoudre une tout petite probleme dans un menu accordeon: je ne Accordeon : Comment ouvrir un onglet à l'aide d'un bouton [ par jobe06 ] Bonjour Sur [url=www.bexigraph.com]mon site[/url] j'aimerai avoir la possibilité, d'ouvrir l'onglet "tarifs" à partir d'un bouton qui se trouve sur l' menu accordeon [ par thiluk ] Bonjour, Je dois gérer le site dans la société ou je travaille et sur celui-ci il y a un menu accordéon qui me pose quelques soucis: sur certain brow

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

Tribler (2012)
TRIBLER (2012)

Tribler est un client pair à pair (P2P/Peer-to-Peer) open source avec la capacité de regarder des...

Cliquez pour télécharger Tribler
OneSwarm (2012)
ONESWARM (2012)

Le peer-to-peer qui protège votre vie privée, c'est OneSwarm. Ce logiciel de peer-to-peer crypté...

Cliquez pour télécharger OneSwarm
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