Tutoriels ⇒ HTML5 CSS3 facebook twitter youtube

Menu en HTML5 ⇒ & Menu horizontal en HTML5



Pour créer un menu horizontal, le plus simple consiste à utiliser une liste ul et à affecter la  valeur inline-block à la propriété display des éléments li de cette liste. Ainsi, ces derniers ne seront pas affichés verticalement, en tant que blocs, mais horizontalement, sur une même ligne

Menu déroulant

Pour créer un menu déroulant, il suffit d’imbriquer deux listes <ul>, la première contenant les entrées principales du menu et la seconde, les entrées secondaires

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document sans nom</title>
<link rel="stylesheet" type="text/css" href="Styles/960grid/960_12_col.css" />
<link rel="stylesheet" type="text/css" href="Styles/960grid/reset.css" />
<link rel="stylesheet" type="text/css" href="Styles/960grid/text.css" />
<style type="text/css">
#premier {
    height: 30px;
}
#premier li {
    float: left;
    width: 200px;
    list-style-type: none;
    border: 1px solid #999;
}
#premier li a:link, #premier li a:visited {
    display: block;
    margin: 2px;
    background-color: #EE6C0D;
    color: #E9E9E9;
    padding-top: 5px;
    padding-right: 7px;
    padding-bottom: 5px;
    padding-left: 7px;
    text-decoration: none;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
}
#premier li a:hover {
    background-color: #DC640C;
    color: #FFF;
}
#premier .deuxieme {
    display: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
    border: 0;
}
#premier .deuxieme li {
    float: none;
    border: 0;
}
#premier .deuxieme li a:link, #premier .deuxieme li a:visited {
    display: block;
    text-decoration: none;
}
#premier li:hover > .deuxieme {
    display: block;
}
</style>
</head>

<body>
<div id="header" class="container_12 clearfix">Header
  <nav style="height:100px;">
    <ul id="premier">
      <li><a href="#">Lien 1</a>
        <ul class="deuxieme">
          <li><a href="lien1-1.htm">Lien 1 - Sous-lien 1</a></li>
          <li><a href="lien1-2.htm">Lien 1 - Sous-lien 2</a></li>
          <li><a href="lien1-3.htm">Lien 1 - Sous-lien 3</a></li>
        </ul>
      </li>
      <li><a href="#">Lien 2</a>
        <ul class="deuxieme">
          <li><a href="lien2-1.htm">Lien 2 - Sous-lien 1</a></li>
          <li><a href="lien2-2.htm">Lien 2 - Sous-lien 2</a></li>
          <li><a href= "lien2-3.htm">Lien 2 - Sous-lien 3</a></li>
        </ul>
      </li>
      <li><a href="#">Lien 3</a>
        <ul class="deuxieme">
          <li><a href="lien3-1.htm">Lien 3 - Sous-lien 1</a></li>
          <li><a href="lien3-2.htm">Lien 3 - Sous-lien 2</a></li>
          <li><a href="lien3-3.htm">Lien 3 - Sous-lien 3</a></li>
        </ul>
      </li>
      <li><a href="#">Lien 4</a>
        <ul class="deuxieme">
          <li><a href="lien3-1.htm">Lien 4 - Sous-lien 1</a></li>
          <li><a href="lien3-2.htm">Lien 4 - Sous-lien 2</a></li>
          <li><a href="lien3-3.htm">Lien 4 - Sous-lien 3</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</div>
<div id="content" class="container_12 clearfix">Content
  <p>Ut aliquip ex ea commodo consequat. Consectetur adipisicing elit, ut enim ad minim veniam, lorem ipsum dolor sit amet. Sed do eiusmod tempor incididunt mollit anim id est laborum. Qui officia deserunt ut labore et dolore magna aliqua. Excepteur sint occaecat ut enim ad minim veniam, ullamco laboris nisi.</p>
</div>
<div id="footer" class="container_12 clearfix">Footer </div>
</body>
</html>

 


Changer le fond
Oregionale Skin
7astuces
Sélectionnez un Fond (11)
7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces
Fond de contenu
7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces