Menu verticale gauche et droit deroulant

Télécharger le projet
Commenter

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
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

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.

Du même auteur (@karamel)