Menu glissant

Soyez le premier à donner votre avis sur cette source.

Vue 20 624 fois - Téléchargée 1 770 fois

Description

petit menu glissant situe a gauche de l'écran paramétrable

Source / Exemple :


<html>
<head>
<title>menu gauche</title>

<style type="text/css">
.couleur {
color: white;}
BODY .bouton5{color: red;background-color:#B9A197;cursor:pointer}
BODY .bouton6{color:black;background-color:#B9B3a7;}
</style>

<SCRIPT>

var mngv=0
var magi='aller.jpg'
var magip='allerp.jpg'

function mng(){

var Table_Gauche=document.getElementById('mgauche')

if(mngv==1){
Table_Gauche.style.left=Table_Gauche.offsetLeft-10
if(Table_Gauche.offsetLeft<=-150){
mngv=0
magi='aller.jpg'
magip='allerp.jpg'
document.getElementById('fleche').src='aller.jpg'
return false
}
setTimeout("mng()",16)
}

if(mngv==0){
Table_Gauche.style.left=Table_Gauche.offsetLeft+10
if(Table_Gauche.offsetLeft>=0){
mngv=1
magi='retour.jpg'
magip='retourp.jpg'
document.getElementById('fleche').src='retour.jpg'
return false
}
setTimeout("mng()",16)
}}

</SCRIPT>
</head>
<body>

<table background= metale.jpg id="mgauche"  
style='position:absolute;top:50px;left:-150px;width:185;height:200;z-Index:10'>

<tr><td><b>formation l'essentiel</b></td><td><img id="fleche" src=aller.jpg onMouseover=this.src=magip; onMouseout=this.src=magi;  onclick=mng()></td>
<tr><td bgcolor=#B9B3A7 onmouseover=className='bouton5' onmouseout=className='bouton6'>div</td></td></tr>

<tr><td bgcolor=#B9B3A7 onmouseover=className='bouton5' onmouseout=className='bouton6'>class</td></tr>
<tr><td bgcolor=#B9B3A7 onmouseover=className='bouton5' onmouseout=className='bouton6'>tableau</td></tr>
<tr><td bgcolor=#B9B3A7 onmouseover=className='bouton5' onmouseout=className='bouton6'>formulaire</td></tr>
<tr><td bgcolor=#B9B3A7 onmouseover=className='bouton5' onmouseout=className='bouton6'>frame</td></tr>

<tr><td><b>liens</b></td></tr>
<tr><td bgcolor=#B9B3A7 onmouseover=className='bouton5' onmouseout=className='bouton6'>oxo</td></tr>
<tr><td bgcolor=#B9B3A7 onmouseover=className='bouton5' onmouseout=className='bouton6'>ici</td></tr>
<tr><td bgcolor=#B9B3A7 onmouseover=className='bouton5' onmouseout=className='bouton6'>la</td></tr>

<tr><td bgcolor=#B9B3A7 onmouseover=className='bouton5' onmouseout=className='bouton6'>terre
<tr><td bgcolor=#B9B3A7 onmouseover=className='bouton5' onmouseout=className='bouton6'>m'entendez vous</td></tr>

<tr><td><b>video</b></td></tr>
</td></tr>
<tr><td><a href="mailto:batman_vs_spiderman.nul"><b>me contacter</b></a>
</td></tr>
<tr><td>
</td></tr>
</table>
</body>
</html>

Conclusion :


je l'aime bien mon script

Codes Sources

A voir également

Ajouter un commentaire Commentaires
Messages postés
17
Date d'inscription
dimanche 23 octobre 2005
Statut
Membre
Dernière intervention
23 novembre 2014

bonjour,

je le trouve très bien se code
je m'en suis inspiré pour pouvoir développer ma domotique sur base arm
j'ai juste modifier afin que cela marche avec multi tableau

mng(div,num) num pour connaitre le numéro du div concerné
mngv[num] tableau des état des div
Messages postés
4
Date d'inscription
jeudi 23 décembre 2004
Statut
Membre
Dernière intervention
23 septembre 2010

Renommer vos images respectivement : aller allerp retour et retourp en 1 1p -1 et -1p et voici un code plus court :)

<html><head>
<script type="text/javascript">
var mngv=1;
function mng() {
var TAB=document.getElementById('mgauche');
TAB.style.left=TAB.offsetLeft+(4*mngv);
if((TAB.offsetLeft>0 && mngv==1) || (TAB.offsetLeft<=-152 && mngv==-1)) {
mngv=-mngv;
document.getElementById('fleche').src=magi[mngv];
return false;
}
setTimeout("mng()",1);
}
</script>
</head>
Lien 1, ,
----
div, ,
----
LIEN 2,
----
div

</html>
Messages postés
1796
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
17 septembre 2021
136
il y a quand meme une chose pour laquelle je suis d accord avec toi c'est le fait d'avoir des lacunes dans la construction d'une page web. et par contre pour la portabilite au niveau des anciens navigateur je pense qu'elle doit etre bonne a moins d'etre sous windows 95 ou meme 98 et de n'avoir pas changer la version de son navigateur et j'avoue que c'est possible l'ayant vecu moi meme mais tres tres rare. finalement mon script ne semble pas si vieux que sa (lol)
Messages postés
253
Date d'inscription
vendredi 13 juin 2003
Statut
Membre
Dernière intervention
18 mai 2009

ça marche nikel sous un IE 6 en tout cas se qui est à mon avis représnte 90% des versions IE (hors IE7)
Messages postés
31
Date d'inscription
lundi 14 février 2005
Statut
Membre
Dernière intervention
29 octobre 2008

y'a rien de pourri :)
tout est toujours bon a prendre...pardon si tu l'a mal pris, je te donnais juste les points négatifs considérant le "code optimisé" qui m'a fait hérisser les poils du dos....

Et c'est malheure"ux a dire, mais c'est encore la mise en page par tableau qui offre le moins de différences entre navigateur (si on oublie le coté accessibilité du code pour les multiples navigateurs)

Et pour le javascript c'est pareil, je suis pas sur qu'il fonctionne sur les vieux IE.....
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.