18073 sujets

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

Assembler menu et sous-menus différents [Résolu]

Bonjour à tous !

Je tente de mettre un sous-menu différent du menu que j'ai trouvé mais je n'arrive pas à les assembler.
Au bout de 3 semaines dessus je me suis retrouvé avec le sous-menu bien aligné horizontalement,
mais si je passe sur le menu de droite à gauche, les sous-menus s'affichent verticalement et on horizontalement...

Je vous redonne les 2 codes sources :

Code menu principal pris sur Listamatic.
Code du sous menu pris sur Alsacréation.

Merci d'avance ;o)
Modifié par lordbdp (03 Sep 2005 - 13:32)
Avant-dernière modif'... Reste plus qu'à trouver où modifier le code pour que les sous-menus soient centrés lors de leur affichage (mais là je trouve pas d'aide sur le net pour le CSS sur cette partie...).

Partie CSS :
#navcontainer
{
font-family: Arial,Sans-Serif;
margin: 0 auto;
width: 100%;
border-bottom: 1px solid #ddd;
}

#navlist
{
width: 100%;
text-align: center;
margin: 0 auto;
padding: 0;
text-indent: 0;
list-style-type: none;
}

#navlist li
{
padding: 0;
margin: 0;
text-indent: 0;
display: inline;
}

#navlist li a
{
letter-spacing: -1px;
text-decoration: none;
color: #ccc;
font-size: 1em;
padding: 0 2px;
border-top: .5em solid #eee;
}

#navlist li a:hover,#navlist a#current
{
color: #333;
border-top: none;
font-size: 1.5em;
}

#navlist a#current
{
color: #fc6;
}

body {padding: 0;
font: 1em Arial, sans-serif;}

#smenu1, #smenu2, #smenu3, #smenu4, #smenu5 {
    position: absolute;
    left: 0;
    text-align: center;
    font-size: 0.7em;
    width: 100%;
    top: 44px;
}


Code HTML :
<head>
<title>Menu horizontal déroulant sur une ligne en CSS</title>
<meta http-equiv="Content-Type" content="text/html; 
charset=iso-8859-1" />
<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>
<link rel="stylesheet" type="text/css" href="menu.css">
</head>

<body>

<div id="navcontainer">
<ol id="navlist">
<li id="active"><a href="#" id="current">Menu 1</a></li>
   <li onmouseover="montre('smenu2');"><a href="#">Menu 2</a></li>
       <dl id="smenu2">
        <ol>
          <li><a href="#">Sous-menu 2.1</a></li>
          <li><a href="#">Sous-menu 2.2</a></li>
        </ol>
      </dl>
   <li onmouseover="montre('smenu3');"><a href="#">Menu 3</a></li>
       <dl id="smenu3">
        <ol>
          <li><a href="#">Sous-menu 3.1</a></li>
          <li><a href="#">Sous-menu 3.2</a></li>
          <li><a href="#">Sous-menu 3.3</a></li>
        </ol>
      </dl>
   <li onmouseover="montre('smenu4');"><a href="#">Menu 4</a></li>
       <dl id="smenu4">
        <ol>
          <li><a href="#">Sous-menu 4.1</a></li>
          <li><a href="#">Sous-menu 4.2</a></li>
          <li><a href="#">Sous-menu 4.3</a></li>
          <li><a href="#">Sous-menu 4.4</a></li>
        </ol>
      </dl>
   <li onmouseover="montre('smenu5');"><a href="#">Menu 5</a></li>
       <dl id="smenu5">
        <ol>
          <li><a href="#">Sous-menu 5.1</a></li>
          <li><a href="#">Sous-menu 5.2</a></li>
          <li><a href="#">Sous-menu 5.3</a></li>
          <li><a href="#">Sous-menu 5.4</a></li>
          <li><a href="#">Sous-menu 5.5</a></li>
          <li><a href="#">Sous-menu 5.6</a></li>
        </ol>
    </dl>
</ol>
</div>

</body>

</html>


Pas mal pour un débutant ! Non ? Smiley biggrin
En revanche j'ai vraiment besoin d'un coup de pousse pour les sous-menus centrés... Smiley decu
Ben au final je laisse les lignes telles quelles car après assemblage au reste du code l'aspect me plait... Donc c'est bon pour moi !
Sujet clos
Aller à