Menu verticale gauche et droit deroulant

Soyez le premier à donner votre avis sur cette source.

Vue 17 591 fois - Téléchargée 2 151 fois

Description

c'est repris d'une de mes source (menu glissant) sauf que au lieu de deplacer un element dans le document c'est un div en overflow hidden qui s'agrandi et rapetisse sa permet entre autre de mettre un menu a droite de l'ecran

Source / Exemple :


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

<link rel="stylesheet" href="menu/menu_style2.css" type="text/css" />

<SCRIPT>
var mndv=0
var mngv=0

function mng(){

var Table_Gauche=document.getElementById('dg1')

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

if(mngv==1){
Table_Gauche.style.width = wrg-10+'px'
if(wrg<=39){
mngv=0
document.getElementById('gm2').src='aller.gif'
return false
}
setTimeout("mng()",16)
}

if(mngv==0){
Table_Gauche.style.width= wrg+10+'px'
if(wrg>=200){
mngv=1
document.getElementById('gm2').src='retour.gif'
return false
}
setTimeout("mng()",16)
}}

function mnd(){

var Table_droite=document.getElementById('dg2')

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

if(mndv==1){
Table_droite.style.width=wrt-10+'px'
if(wrt<=44){
mndv=0
document.getElementById('gm1').setAttribute('src','retour.gif')
return false
}
setTimeout("mnd()",16)
}
if(mndv==0){
Table_droite.style.width=wrt+10+'px'
if(wrt>=200){
mndv=1
document.getElementById('gm1').setAttribute('src','aller.gif')
return false
}
setTimeout("mnd()",16)
}
}

</SCRIPT>
</head>
<body bgcolor='black'>

<div id="dg1">	
	
	<div id="divmenu1">

		<ul id="menu">
		<li><a href="" target="_self">premier</a></li>
		<li><a href="" target="_self">deuxieme</a></li>
		<li><a href="" target="_self">troisieme</a></li>
		<li><a href="" target="_self">quatrieme</a></li>
		<li><a href="" target="_self">cinquieme</a></li>
		<li><a href="" target="_self">sixieme</a></li>
		<li><a href="" target="_self">septieme</a></li>
		<li><a href="" target="_self">huitieme</a></li>
		<li><a href="" target="_self">neuf</a></li>
		<li><a href="" target="_self">dix</a></li>
		<li><a href="" target="_self">premier</a></li>
		<li><a href="" target="_self">deuxieme</a></li>
		<li><a href="" target="_self">troisieme</a></li>
		<li><a href="" target="_self">quatrieme</a></li>
		<li><a href="" target="_self">cinquieme</a></li>
		<li><a href="" target="_self">sixieme</a></li>
		<li><a href="" target="_self">septieme</a></li>
		<li><a href="" target="_self">huitieme</a></li>
		<li><a href="" target="_self">neuf</a></li>
		<li><a href="" target="_self">dix</a></li>
	</ul>
	</div>
	<div id='fleche1'onmouseover='mng()'><img id='gm2'src='aller.gif' style='margin-left:2px'>
	</div>
	</div>
	
	
	<div id="dg2">
	
	<div id="divmenu2">
		<ul id="menu">
		<li><a href="" target="_self">premier</a></li>
		<li><a href="" target="_self">deuxieme</a></li>
		<li><a href="" target="_self">troisieme</a></li>
		<li><a href="" target="_self">quatrieme</a></li>
		<li><a href="" target="_self">cinquieme</a></li>
		<li><a href="" target="_self">sixieme</a></li>
		<li><a href="" target="_self">septieme</a></li>
		<li><a href="" target="_self">huitieme</a></li>
		<li><a href="" target="_self">neuf</a></li>
		<li><a href="" target="_self">dix</a></li>
		<li><a href="" target="_self">premier</a></li>
		<li><a href="" target="_self">deuxieme</a></li>
		<li><a href="" target="_self">troisieme</a></li>
		<li><a href="" target="_self">quatrieme</a></li>
		<li><a href="" target="_self">cinquieme</a></li>
		<li><a href="" target="_self">sixieme</a></li>
		<li><a href="" target="_self">septieme</a></li>
		<li><a href="" target="_self">huitieme</a></li>
		<li><a href="" target="_self">neuf</a></li>
		<li><a href="" target="_self">dix</a></li>
	</ul>
	</div>

	<div id='fleche2'onmouseover='mnd()'><img id='gm1'src='retour.gif'>
	</div>
</div>

Conclusion :


bloup bloup

Codes Sources

A voir également

Ajouter un commentaire

Commentaire

Messages postés
48
Date d'inscription
jeudi 18 octobre 2007
Statut
Membre
Dernière intervention
5 août 2009

Salut Kazma,

Quelques petites remarque.
Tout dabord il manque la doc html tout en haut.
Pourquoi n as tu pas separe le js du html?. J ai telecharger ton script et je l ai ameliorer a ma facon.
En dynamisant le menu. J ai fais une boucle du type foreach de php mais plus compliquer a faire. J ai utiliser la technique presente sur cette page: http://www.toutjavascript.com/savoir/savoir09.php3.
Ca marche tout aussi bien et c'est plus dynamique.
Sinon bravo pour le srcipt je vais le mettre dans ma librairie.
A bientot
Benjamin

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.