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 ?
- La première raison c'est le fait qu'elle fonctionnera même si le JavaScript est désactivé.
- La deuxième raison cette technique fonctionne très bien sous IE sous des Windows Server 2008 et Windows Server 2012 par exemple contrairement à la technique JavaScript.
- La troisième raison, il n'y a pas de risque de «lag» dans le navigateur Web.
Les côtés négatifs par contre :
- Il faudra intégrer dans chacune des pages les menus CSS et donc si vous n'utilisez pas un langage de programmation de serveur Web, ce sera difficile à entretenir.
- La taille de la page HTML sera nécessairement plus grosse, car il y aura forcément le code source dans la page HTML.
Voici donc un petit exemple de comment utiliser les menus CSS :
- <!DOCTYPE html>
- <html>
- <head>
- <title>Exemple de menu CSS</title>
- <!--[if lt IE 9]>
- <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
- <![endif]-->
- <style>
- .menu .mainMenu, .menu .subMenu {
- list-style-type: none;
- margin: 0;
- padding: 0;
- position: absolute;
- background-color: cyan;
- color: black;
- }
- .menu .subMenu {
- display: none;
- }
- .menu .mainMenu > .menuItem {
- display: table-cell;
- }
- .menu .menuItem:hover > .subMenu {
- display: inline-block;
- }
- .menu .mainMenu > .menuItem {
- width: 50px;
- }
- .menu .subMenu .subMenu {
- left: 0;
- margin-left: 150px;
- }
- .menu .subMenu .menuItem {
- width: 150px;
- }
- </style>
-
- </head>
-
- <body>
- test A<br>test B<br>test C<br>
- <nav class="menu">
- <ul class="mainMenu">
- <li class="menuItem">
- <div>Menu 1</div>
- <ul class="subMenu">
- <li class="menuItem">
- 2e Sous menu 1
- <ul class="subMenu">
- <li class="menuItem">
- 3e Sous sous menu 1
- <ul class="subMenu">
- <li class="menuItem">4e Sous sous menu 1</li>
- <li class="menuItem">Sous sous menu 2</li>
- <li class="menuItem">Sous sous menu 3</li>
- <li class="menuItem"><a href="a.htm">Sous sous menu 4 avec lien</a></li>
- <li class="menuItem"><a href="b.htm">Sous sous menu 5 avec lien</a></li>
- <li class="menuItem"><a href="i.htm">Sous sous menu 6 avec lien</a></li>
- </ul>
- </li>
- <li class="menuItem">
- Sous sous menu 2
- <ul class="subMenu">
- <li class="menuItem">4e Sous sous menu 7</li>
- <li class="menuItem">Sous sous menu 8</li>
- <li class="menuItem">Sous sous menu 9</li>
- <li class="menuItem">Sous sous menu 10</li>
- <li class="menuItem">Sous sous menu 11</li>
- <li class="menuItem">Sous sous menu 12</li>
- </ul>
- </li>
- <li class="menuItem">Sous sous menu 3</li>
- <li class="menuItem">Sous sous menu 4</li>
- <li class="menuItem">Sous sous menu 5</li>
- <li class="menuItem">Sous sous menu 6</li>
- </ul>
- </li>
- <li class="menuItem">Sous menu 2</li>
- <li class="menuItem">Sous menu 3</li>
- <li class="menuItem">Sous menu 4</li>
- <li class="menuItem">Sous menu 5</li>
- <li class="menuItem">Sous menu 6</li>
- </ul>
- </li>
- <li class="menuItem">
- <div>Menu 2</div>
- <ul class="subMenu">
- <li class="menuItem">Sous menu 7</li>
- <li class="menuItem">Sous menu 8</li>
- <li class="menuItem">Sous menu 9</li>
- <li class="menuItem">Sous menu 10</li>
- <li class="menuItem">Sous menu 11</li>
- <li class="menuItem">Sous menu 12</li>
- </ul>
- </li>
- <li class="menuItem">
- <div>Menu 3</div>
- <ul class="subMenu">
- <li class="menuItem">Sous menu 13</li>
- <li class="menuItem">Sous menu 14</li>
- <li class="menuItem">Sous menu 15</li>
- <li class="menuItem">Sous menu 16</li>
- <li class="menuItem">Sous menu 17</li>
- <li class="menuItem">Sous menu 18</li>
- </ul>
- </li>
- <li class="menuItem">
- <div>Menu 4</div>
- <ul class="subMenu">
- <li class="menuItem">Sous menu 19</li>
- <li class="menuItem">Sous menu 20</li>
- <li class="menuItem">Sous menu 21</li>
- <li class="menuItem">Sous menu 22</li>
- <li class="menuItem">Sous menu 23</li>
- <li class="menuItem">Sous menu 24</li>
- </ul>
- </li>
- </ul>
- </nav>
- <br>
- test 1<br>
- test 2<br>
- test 3<br>test 4<br>test 5<br>test 6<br>test 7<br>
- </body>
- </html>
on obtiendra le résultat suivant :
Dernière mise à jour : Jeudi, le 9 mai 2013