11548 sujets

JavaScript, DOM et API Web HTML5

Menu accordeon

Bonjour,
J'ai trouvé ce menu accordéon sur internet, tout marche très bien.
Sauf que j'aimerais qu'un seul menu ne s'ouvre a la fois.
par exemple, si j'ouvre un menu, j'aimerais qu'il se referme quand j'en ouvre un autre.


Voici le code :

var mnhv='';

function mnh(vl,pb){
if(controle==1){
controle=0;
bl=vl;
pl=pb;
if(document.getElementById(vl).offsetTop<=64){
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<=64){
return false;
}
setTimeout("mnh(bl)",4);
}
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)",4);
}}




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > 
<head> 
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> 
	<meta name="description" content="0000000000000000000" /> 
	<meta name="keywords" content="00000, 00000, 00000" /> 
	<meta name="robots" content="all" />
	<title>Page title</title> 
	<style type="text/css"title="Style"media="screen"> @import "style.css";</style> 
	<script type="text/javascript"src="menuScript.js"></script>
</head>

<div id='page'>
	<div id='contmenu'>
		<div id='headmenu'>
		</div>
		<div id='divgeneral'class="element1">
			<div id='top' onclick='controle=1;mnh("mh",344,"m")'>
				<img src="img/port_button_bg.png" alt="bouton du menu portfolio">
			</div>

				<div class='contexte'>
				<img src="img/art/art_000.png" alt="image, design, objet">
				</div>

		<div id='mh'class="menu">
			<div id='top' onclick='controle=1;mnh("mi",344,"m")'>
				<img src="img/port_button_bg.png" alt="bouton du menu portfolio">
			</div> 

				<div class='contexte'>
				<img src="img/art/art_000.png" alt="image, design, objet">
				</div>

		<div id='mi'class="menu">
			<div id='top' onclick='controle=1;mnh("mj",344,"m")'>
				<img src="img/port_button_bg.png" alt="bouton du menu portfolio">
			</div>

				<div class='contexte'>
				<img src="img/art/art_000.png" alt="image, design, objet">
				</div>

		<div id='mj'class="menu">
			<div id='top' onclick='controle=1;mnh("mk",344,"m")'>
				<img src="img/port_button_bg.png" alt="bouton du menu portfolio">
			</div>

				<div class='contexte'>
				<img src="img/art/art_000.png" alt="image, design, objet">
				</div>

		<div id='mk'class="menu">
				<img src="img/port_footer.png" alt="footer du menu portfolio">
		</div>
		</div>
		</div>
		</div>
		</div>
		</div>
</div>
		
		
		


</body>

</html>


/* ==================== +HTML+ ==================== */

html{
	margin:0;
	padding:0;
}
body{
	background-color:black;
	height:100%;
	margin:0;
	padding:0;
}
img{
	border:0px;
}

/* ==================== PAGE ==================== */

#page {
	margin-left: auto;
	margin-right: auto;
	padding:0 0 -50px 0;
	width:1012px;
	background-color:green;
}

#headmenu {
	width:400px;
	height:200px;
	background-color:red;
}

.menu {
	position:absolute;
	top:64px;
	width:400px;
	height:300px;
}

.element1 {
	overflow:hidden;
	position:absolute;
	width:400px;
	height:288px;
}

#top {
	width:400px;
	height:64px;
	cursor:pointer;
}

#contmenu{
	top:10px;
	bottom:10px;
	left:10px;
	position:relative;
	width:400px;
	height:1750px;
}

#contmenu img{
	background-color:green;
}
Sujet clos
Aller à