Bonjour !
Je bloque depuis quelques temps sur un problème avec mon code. Je souhaite faire un menu déroulant horizontal et j'ai ces codes (une page hmtl, une page css et une page js) que voici :
HTML
CSS
JAVASCRIPT
Ayant déjà fait des menus horizontaux, j'ai supposé que rajouter des "align-block" suffiraient... mais ce n'est pas le cas. Je ne vois vraiment pas ce que je pourrais faire d'autre...
Merci à la bonne âme qui tentera de m'aider !
Je bloque depuis quelques temps sur un problème avec mon code. Je souhaite faire un menu déroulant horizontal et j'ai ces codes (une page hmtl, une page css et une page js) que voici :
HTML
<!DOCTYPE html>
<head>
<meta charset="utf-8"/>
<title>Menu</title>
<link rel ="stylesheet" media="screen" type = "text/css" title="style" href="menu.css" />
<script type="text/javascript" src="menu.js"></script>
</head>
<body align="center">
<div id="navigation">
<div id="menu">
<div class="menu" id="menu1" onclick="afficheMenu(this)">
<a href="#">Menu 1</a>
</div>
<div id="sousmenu1" style="display:none">
<div class="sousmenu">
<a href="#">Sous-Menu 1</a>
</div>
<div class="sousmenu">
<a href="#">Sous-Menu 2</a>
</div>
<div class="sousmenu">
<a href="#">Sous-Menu 3</a>
</div>
<div class="sousmenu">
<a href="#">Sous-Menu 4</a>
</div>
<div class="sousmenu">
<a href="#">Sous-Menu 5</a>
</div>
</div>
<div class="menu" id="menu2" onclick="afficheMenu(this)">
<a href="#">Menu 2</a>
</div>
<div id="sousmenu2" style="display:none">
<div class="sousmenu">
<a href="#">Sous-Menu 1</a>
</div>
<div class="sousmenu">
<a href="#">Sous-Menu 2</a>
</div>
<div class="sousmenu">
<a href="#">Sous-Menu 3</a>
</div>
<div class="sousmenu">
<a href="#">Sous-Menu 4</a>
</div>
<div class="sousmenu">
<a href="#">Sous-Menu 5</a>
</div>
</div>
<div class="menu" id="menu3" onclick="afficheMenu(this)">
<a href="#">Menu 3</a>
</div>
<div id="sousmenu3" style="display:none">
<div class="sousmenu">
<a href="#">Sous-Menu 1</a>
</div>
<div class="sousmenu">
<a href="#">Sous-Menu 2</a>
</div>
<div class="sousmenu">
<a href="#">Sous-Menu 3</a>
</div>
<div class="sousmenu">
<a href="#">Sous-Menu 4</a>
</div>
<div class="sousmenu">
<a href="#">Sous-Menu 5</a>
</div>
</div>
</body>
</html>CSS
*{
margin:0;
padding:0;
}
#menu{
width : 150px; /* Largeur du bloc du menu*/
margin : auto;
display : inline-block; /*ligne ajoutée*/
}
#menu a {
display : inline-block; /*ligne ajoutée*/
}
.menu, .sousmenu{
text-align:center;
}
.menu{
height:18px;
width:150px;
padding:2px 0;
background:#404040;
color:#fff;
display : inline-block; /*ligne ajoutée*/
}
.sousmenu{
height:18px;
width:150px;
padding:1px 0;
background:#808080;
color:#fff;
}
.menu a{
display: inline-block; /*ligne ajoutée*/
width:100%;
height:100%;
color:#fff;
font-family:arial,sans-serif;
font-size:12px;
font-weight:bold;
text-decoration:none;
background:#404040;
}
.sousmenu a{
display:block;
width:100%;
height:100%;
color:#fff;
font-family:arial,sans-serif;
font-size:12px;
font-weight:bold;
text-decoration:none;
background:#808080;
}
.menu a:hover, .sousmenu a:hover, .menu a:active, .sousmenu a:active, .menu a:focus, .sousmenu a:focus{
background:#ca0008;
}JAVASCRIPT
function afficheMenu(obj){
var idMenu = obj.id;
var idSousMenu = 'sous' + idMenu;
var sousMenu = document.getElementById(idSousMenu);
/*****************************************************/
/** on cache tous les sous-menus pour n'afficher **/
/** que celui dont le menu correspondant est cliqué **/
/** où 5 correspond au nombre de sous-menus **/
/*****************************************************/
for(var i = 1; i <= 5; i++){
if(document.getElementById('sousmenu' + i) && document.getElementById('sousmenu' + i) != sousMenu){
document.getElementById('sousmenu' + i).style.display = "none";
}
}
if(sousMenu){
//alert(sousMenu.style.display);
if(sousMenu.style.display == "block"){
sousMenu.style.display = "none";
}
else{
sousMenu.style.display = "block";
}
}
}Ayant déjà fait des menus horizontaux, j'ai supposé que rajouter des "align-block" suffiraient... mais ce n'est pas le cas. Je ne vois vraiment pas ce que je pourrais faire d'autre...
Merci à la bonne âme qui tentera de m'aider !