Bonjour,
j'aimerai savoir comment mettre un sous menu a droite du menu après un click.
voici mon code html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<script>
function visibilite(thingId)
{
var targetElement;
targetElement = document.getElementById(thingId) ;
if (targetElement.style.display == "none")
{
targetElement.style.display = "inline";
}
else
{
targetElement.style.display = "none" ;
}
}
</script>
</head>
<body>
<div class="menuhaut">A voir sur mon site</div>
<ul class="menu">
<li><a href="javascript:visibilite('SousMenu1')">Rubrique</a>
<div id="SousMenu1" style="display:none;">
<ul>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
</ul>
</div>
</li>
<li><a href="javascript:visibilite('SousMenu2')">Rubrique</a>
<div id="SousMenu2" style="display:none;"><ul>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
</ul>
</div>
</li>
<li><a href="javascript:visibilite('SousMenu3')">Rubrique</a>
<div id="SousMenu3" style="display:none;"><ul>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
</ul>
</div>
</li>
<li><a href="javascript:visibilite('SousMenu4')">Rubrique</a>
<div id="SousMenu4" style="display:none;">
<ul>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
</ul></div>
</li>
<li><a href="javascript:visibilite('SousMenu5')">Rubrique</a>
<div id="SousMenu5" style="display:none;"><ul>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
</ul></div>
</li>
<li><a href="javascript:visibilite('SousMenu6')">Rubrique</a>
<div id="SousMenu6" style="display:none;"><ul>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
</ul></div>
</li>
</ul>
</body>
</html>
et voici mon code css:
#bgright {right:0;width:150px;background-color:#222933;}
#bgcentre {margin-left: 150px;margin-right: 150px;width:724px;background-color:#222933;}
#content, #left, #right, #header, #footer, #centre {position:relative;z-index:2;}
#sous_menu{margin:5px 0 0 0;padding:0;width:150px;font: 10px/24px Verdana;text-decoration: none;list-style: none;}
.menuhaut {margin:5px 0 0 0;padding:0;width:150px;font: 10px/24px Verdana;text-decoration: none;list-style: none;background:url(images/menuhaut.jpg);height:32px;text-align:center;color:#fff;font-weight : bolder;}
ul.menu {margin:0 0 0 0;padding:0;width:150px;text-decoration: none;background:url(images/menufond.jpg)}
ul.menu li {border-bottom: 1px solid #6fac1c;margin:0 0 0 8px;padding:0;list-style-type: none;font-family: verdana ; font-size: 8pt ;padding:0 0 0 2px;width:130px;}
ul.menu li a {color: #fff;height:15px;text-decoration: none;width:150px;margin:0 0 0 0; line-height:15px;outline:none}
ul.menu li a:hover {color: #6fac1c;height: 15px;text-decoration: none;width:150px;margin:0 0 0 0;line-height:15px}
.menubas {margin:0;padding:0;width:150px;background:url(images/menubas.jpg);height:19px;}
p {margin:0 0 0 0;padding:0;font-family: verdana ; font-size: 10pt;color:#fff; line-height:10pt}
.fondmenu {margin:0 0 0 0;padding:0;width:150px;text-decoration: none;background:url(images/menufond.jpg);font: 10px/24px Verdana}
table, td, tr, img, form { margin:0 auto 0; padding:0 ; border :0}
input { WIDTH: 120px ;margin:0 0 0;padding:0;}
ul.slogan {margin:24px 0 0 0;padding:0;width:230px;text-decoration: none;position:absolute;right:0}
ul.slogan li {color: #5b9f04;height: 40px;font-family: verdana ; font-size: 12pt ;margin:0;padding:0;list-style-type: none;text-decoration: none;font-weight : bolder;}
ul.slogan a {color: #5b9f04;height: 40px;font-family: verdana ; font-size: 12pt ;margin:0;padding:0;list-style-type: none;text-decoration: none;font-weight : bolder;outline:none}
ul.slogan a:hover {color: #758cb0;height: 40px;font-family: verdana ; font-size: 12pt ;margin:0;padding:0;list-style-type: none;text-decoration: none;font-weight : bolder;}
#vert a {color: #2c496b;}
#vert a:hover {color: #5b9f04;}
#navcontainer {
background: #036;
border-top: 1px solid steelblue;
font: normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
}
#navlist {
list-style: none outside none;
margin: 0;
padding: 0;
}
@media all {
#navlist {
text-align: center
}
}
#navlist li {
bottom: 11px;
display: inline;
line-height: 1.2em;
margin: 0;
padding: 0;
position: relative;
}
html>body #navlist li {
background: #000;
margin: 0 3px 0 0;
padding: 4px 0px 4px 0;
}
#navlist a, #navlist a:link, #navlist a:visited {
background: #900;
border: 1px solid #FFF;
bottom: 2px;
color: #FFF;
cursor: pointer;
display: inline;
height: 1em;
margin: 0;
padding: 3px 5px 3px 5px;
position: relative;
right: 2px;
text-decoration: none;
}
#navlist a:hover {
background: #C00;
bottom: 1px;
color: #FFF;
position: relative;
right: 1px;
}
#navlist a:active {
background: #999;
bottom: 0px;
color: #FFF;
position: relative;
right: 0px;
}
#navlist li#active {
background: #369;
bottom: 13px;
display: inline;
margin: 0 3px 0 0;
padding: 0;
position: relative;
}
html>body #navlist li#active {
background: #000;
margin: 0 4px 0 4px;
}
#navlist #active a, #navlist #active a:link, #navlist #active a:visited, #navlist #active a:hover {
background: #369;
border-bottom: none;
border-left: 1px solid #9CC;
border-right: 1px solid #9CC;
border-top: 1px solid #9CC;
bottom: 0;
color: #FFF;
cursor: text;
margin: 0;
padding: 2px 5px 0 5px;
position: relative;
right: 0;
}
/*Pied et copyright*/
.footer {position:absolute;color:#fff;padding:0;width:700px;height:15px;font: 9px/12px Verdana;margin: 3px 0 0 0;}
.footer a {margin: 0 0 0 0;padding: 0;color:#fff;outline:none;text-decoration: none;}
.footer a:hover {margin: 0;padding: 0;color:#2c496b;text-decoration: none;}
a.copyright {position:absolute;bottom:0;width:200px;height:10px;right:5px;outline:none;}
#pied {width:1024px;height:20px ;position:relative;margin: 0 auto 0 ;background-color:#88e539;clear: both;}
#left {width: 150px;float: left;color:#fff;}
#right {width: 150px;float: right;}
#content {margin-left: 155px;margin-right: 155px;top:0;font-family: verdana ; font-size: 10pt;color:#fff; line-height:10pt}
