Cherche Menu Rétractable en JS

cs_kopax Messages postés 15 Date d'inscription dimanche 16 mai 2004 Statut Membre Dernière intervention 2 mai 2012 - 29 sept. 2011 à 15:31
cs_kopax Messages postés 15 Date d'inscription dimanche 16 mai 2004 Statut Membre Dernière intervention 2 mai 2012 - 29 sept. 2011 à 23:01
Bonjour,

Je cherche un script me permettant de faire un menu rétractable.
J'aurai besoin d'un petit bouton en haut a droite de ma page, et lorsque je clique dessus, dérouler un grand menu ou le contenu serai un include d'une page php.

Ensuite on doit pouvoir le diminuer à nouveau si on décide de ne plus se servir de ce menu.

Ce que je cherche ressemble à ca :

http://www.imagup.com/data/1131968417.html

Tout ce que j'ai trouvé sont des menu qui s'affiche et se masque au passage de la souris (pas très pratique).

Sinon ma page contient une toolbar, et le site est dans une iframe pour des raisons technique (site sur serveur distant ou je n'ai pas d'accès).
Il faut que le script superpose les deux frames que compose ma page.

Si vous connaissez quelque chose qui pourrait m’intéresser,

Merci d'avance,

kopax

2 réponses

@karamel Messages postés 1815 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 25 novembre 2022 145
29 sept. 2011 à 17:25
un truc dans ce genre

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>menu</title>

<style type="text/css">
.couleur {
color: white;}

.dg2 {
position:fixed;
height:400px;
z-Index:1000;
background-color:#84a5c9;
top:50px;
right:0px;
width:0px;
}

#divmenu2 {
width:200px;
margin-left:30px;
margin-top:30px;
height:200px;
background: #ff0;
}

#fleche2 {
position:absolute;
top:0px;
left:-20px;
height:80px;
margin:0px;
width:20px;
padding:0px;
background-color:#84a5c9;
-moz-border-radius:10px 0px 0px 10px;
-webkit-border-radius:10px 0px 0px 10px;
-o-border-radius:10px 0px 0px 10px;
border-radius:10px 0px 0px 10px;
}
</style>

<script type="text/javascript" language="JavaScript">


function mnd(lui){
typeof this.mndv 'undefined' ? this.mndv 0 : null;
typeof this.elem 'undefined' ? this.elem lui.parentNode : null;

var wrt = ((navigator.appName.substring(0,5)=="Micro") ? parseInt(this.elem.currentStyle.width) : parseInt(getComputedStyle(this.elem, null).getPropertyValue('width')));

this.elem.style.width=(this.mndv == 1) ? wrt-10+'px' : wrt+10+'px';

if(this.mndv==1 && wrt<=0){
this.mndv=0;
return false;
}

if(this.mndv==0 && wrt>=300){
this.mndv=1;
return false;
}
setTimeout("mnd()",20);
}
</script>
</head>












jhfgjhujidfss fjkuiout eziuououoiu tzeroiuo










</html>
1
cs_kopax Messages postés 15 Date d'inscription dimanche 16 mai 2004 Statut Membre Dernière intervention 2 mai 2012
29 sept. 2011 à 23:01
Merci pour ta réponse,

Le problème c'est que le menu se trouve dans le frame haut qui ne comporte qu'une div, et j'aimerai qu'il superpose ma page + l'iframe constituant la majeur partie de ma page.

De plus, j'utilise dans ce menu, un copytoclipboard en flash (Zeroclipboard), qui pose un élément flash au dessus d’élément html. (dans le but d'avoir dans mon presse papier des commandes SSH)

Lorsque je fais déplacer le menu, les éléments flash ne sont pas dans la page car au départ, le menu est en dehors de la page.
Il faut donc que au premier chargement de la page, le menu soit charger à sa position dérouler avant de se masquer.

des idées ?
0