Section courante

A propos

Section administrative du site

L'expression «Menu CSS» permet d'indiquer des menus construits uniquement à partir du HTML et CSS3 sans aucune inclusion de code JavaScript. Pourquoi utiliser cette technique plutôt que les menus en JavaScript ?

Les côtés négatifs par contre :

Voici donc un petit exemple de comment utiliser les menus CSS :

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Exemple de menu CSS</title>
  5. <!--[if lt IE 9]>
  6. <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  7. <![endif]-->
  8. <style>
  9. .menu .mainMenu, .menu .subMenu {
  10.      list-style-type: none;
  11.      margin: 0;
  12.      padding: 0;
  13.      position: absolute;
  14.      background-color: cyan;
  15.      color: black;
  16. }
  17. .menu .subMenu {
  18.      display: none;
  19. }
  20. .menu .mainMenu > .menuItem {
  21.      display: table-cell;
  22. }
  23. .menu .menuItem:hover > .subMenu {
  24.      display: inline-block;
  25. }
  26. .menu .mainMenu > .menuItem {
  27.      width: 50px;
  28. }
  29. .menu .subMenu .subMenu {
  30.      left: 0;
  31.      margin-left: 150px;
  32. }
  33. .menu .subMenu .menuItem {
  34.      width: 150px;
  35. }
  36. </style>
  37.  
  38. </head>
  39.  
  40. <body>
  41. test A<br>test B<br>test C<br>
  42. <nav class="menu">
  43. <ul class="mainMenu">
  44.      <li class="menuItem">
  45.           <div>Menu 1</div>
  46.           <ul class="subMenu">
  47.                <li class="menuItem">
  48.                     2e Sous menu 1
  49.                     <ul class="subMenu">
  50.                          <li class="menuItem">
  51.                               3e Sous sous menu 1
  52.                               <ul class="subMenu">
  53.                                    <li class="menuItem">4e Sous sous menu 1</li>
  54.                                    <li class="menuItem">Sous sous menu 2</li>
  55.                                    <li class="menuItem">Sous sous menu 3</li>
  56.                                    <li class="menuItem"><a href="a.htm">Sous sous menu 4 avec lien</a></li>
  57.                                    <li class="menuItem"><a href="b.htm">Sous sous menu 5 avec lien</a></li>
  58.                                    <li class="menuItem"><a href="i.htm">Sous sous menu 6 avec lien</a></li>
  59.                               </ul>
  60.                          </li>
  61.                          <li class="menuItem">
  62.                               Sous sous menu 2
  63.                               <ul class="subMenu">
  64.                                    <li class="menuItem">4e Sous sous menu 7</li>
  65.                                    <li class="menuItem">Sous sous menu 8</li>
  66.                                    <li class="menuItem">Sous sous menu 9</li>
  67.                                    <li class="menuItem">Sous sous menu 10</li>
  68.                                    <li class="menuItem">Sous sous menu 11</li>
  69.                                    <li class="menuItem">Sous sous menu 12</li>
  70.                               </ul>
  71.                          </li>
  72.                          <li class="menuItem">Sous sous menu 3</li>
  73.                          <li class="menuItem">Sous sous menu 4</li>
  74.                          <li class="menuItem">Sous sous menu 5</li>
  75.                          <li class="menuItem">Sous sous menu 6</li>
  76.                     </ul>
  77.                </li>
  78.                <li class="menuItem">Sous menu 2</li>
  79.                <li class="menuItem">Sous menu 3</li>
  80.                <li class="menuItem">Sous menu 4</li>
  81.                <li class="menuItem">Sous menu 5</li>
  82.                <li class="menuItem">Sous menu 6</li>
  83.           </ul>
  84.      </li>
  85.      <li class="menuItem">
  86.           <div>Menu 2</div>
  87.           <ul class="subMenu">
  88.                <li class="menuItem">Sous menu 7</li>
  89.                <li class="menuItem">Sous menu 8</li>
  90.                <li class="menuItem">Sous menu 9</li>
  91.                <li class="menuItem">Sous menu 10</li>
  92.                <li class="menuItem">Sous menu 11</li>
  93.                <li class="menuItem">Sous menu 12</li>
  94.           </ul>
  95.      </li>
  96.      <li class="menuItem">
  97.           <div>Menu 3</div>
  98.           <ul class="subMenu">
  99.                <li class="menuItem">Sous menu 13</li>
  100.                <li class="menuItem">Sous menu 14</li>
  101.                <li class="menuItem">Sous menu 15</li>
  102.                <li class="menuItem">Sous menu 16</li>
  103.                <li class="menuItem">Sous menu 17</li>
  104.                <li class="menuItem">Sous menu 18</li>
  105.           </ul>
  106.      </li>
  107.      <li class="menuItem">
  108.           <div>Menu 4</div>
  109.           <ul class="subMenu">
  110.                <li class="menuItem">Sous menu 19</li>
  111.                <li class="menuItem">Sous menu 20</li>
  112.                <li class="menuItem">Sous menu 21</li>
  113.                <li class="menuItem">Sous menu 22</li>
  114.                <li class="menuItem">Sous menu 23</li>
  115.                <li class="menuItem">Sous menu 24</li>
  116.           </ul>
  117.      </li>
  118. </ul>
  119. </nav>
  120. <br>
  121. test 1<br>
  122. test 2<br>
  123. test 3<br>test 4<br>test 5<br>test 6<br>test 7<br>
  124. </body>
  125. </html> 

on obtiendra le résultat suivant :



Dernière mise à jour : Jeudi, le 9 mai 2013