18041 sujets

Questions générales et questions de débutants

Ouverture sous-menu vertical css

Bonjour et bonne année a tous,

je me suis basé sur le tuto Alsacreations pour créer le menu de mon site.
Mon Menu comporte quelques sous-menu.
Je cherche a ce que certain sous-menu soient déjà ouvert/visible au chargement de la page.

Mon Javascript:

<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>


Mon css:


<style type="text/css">


body {
	margin: 0;
	padding: 0;
	font-family: Tahoma;
	font-size: 11px;
	color: #0033FF;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
	position: absolute;
	top: 0;
	left: 0;
	background-color: #FFFFFF;
	font-family: Tahoma;
	font-size: 11px;
	color: #646464;
}
dl#menu {
	width: 210px;
}
dl#menu dt {
	cursor: pointer;
	;
	line-height: 22px;
	text-align: left;
	font-weight: bold;
	background-color: #FFFFFF;
	margin-right: 20px;
	margin-left: 20px;
	border-bottom-width: 1px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-bottom-color: #3366FF;
}
dl#menu dd {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #3366FF;
	margin-right: 20px;
	margin-left: 20px;
	line-height: 22px;
}
dl#menu li {
	text-align: left;
	background: #fff;
}
dl#menu dt a {
	text-decoration: none;
	display: block;
	border: 0 none;
	height: 100%;
	color: #646464;
	padding-left: 35px;
	background-image: url(images/gr-arrow.gif);
	background-repeat: no-repeat;
	background-position: 16px;
	font-weight: bold;
}
dl#menu li a {
	text-decoration: none;
	display: block;
	border: 0 none;
	height: 100%;
	color: #646464;
	padding-left: 45px;
	text-align: left;
}


dl#menu li a:hover, dl#menu dt a:hover {
	background-color: #C6CFF4;
}

-->
</style>


HTML:

<body>

<dl id="menu">

		<dt onclick="javascript:montre();"><a href="#">Home</a></dt>
			
		<dt onclick="javascript:montre('smenu2');"><a href="#">About us</a></dt>
			<dd style="display: none;" id="smenu2">
				<ul>
					<li><a href="#">Sous-Menu 2.1</a></li>
					<li><a href="#">Sous-Menu 2.2</a></li>
					<li><a href="#">Sous-Menu 2.3</a></li>
				</ul>
			</dd>	

		<dt onclick="javascript:montre('smenu3');"><a href="#">Media</a></dt>
			<dd style="display: none;" id="smenu3">
				<ul>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>

				</ul>
			</dd>
  
</dl>


</body>


je pensais que j'arriverais a mes fin en modifiant la ligne 
<dd style="display: none;" id="smenu2">
ainsi 
<dd id="smenu2">


Malheureusement pour moi, au chargement la page le sous menu est bien ouvert mais se referme droit derrière.

comment faire pour que celui-ci reste visible a l'ouverture de la page mais qu'il se ferme si je clique sur un autre point de menu?

Merci pour toute aide.

DmZ
Bonjour,

J'ais compris que ca ce jouais a niveau du javascript.
si je change l'id du smenu en smenux p.ex, le menu est ouvert au chargement de la page mais reste aussi ouvert si je click sur un autre point de menu.

Quelqu'un pourrait-il m'aider a resoudre ce problème ?

Merci d'avance.
Sujet clos
Aller à