var Phenix = function () {
Troll du Web depuis 1996

Menu responsive avec foundation

Depuis la version 6 du framework SASS/CSS Foundation, le composant qui sert à créer le menu principal du site, à savoir la « top bar » n’est plus un menu responsif « out of the box ».

C’est a vous d’en construire un avec les composants, comme l’explique la documentation.

Voici une structure html qui devrait couvrir la majorité des besoins. N’ont pas que c’est bien compliqué à réaliser, mais j’en ai marre de la refaire encore et toujours.

  1. <div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
  2.         <button class="menu-icon" type="button" data-toggle></button>
  3.         <div class="title-bar-title">Menu</div>
  4. </div>
  5. <div class="top-bar" id="main-menu">
  6.         <div class="top-bar-left">
  7.                 <ul class="vertical medium-horizontal menu dropdown" data-responsive-menu="drilldown medium-dropdown" data-parent-link="true">
  8.                         <li>
  9.                                 <a href="#">Lien</a>
  10.                                 <ul class="menu vertical">
  11.                                         <li>
  12.                                                 <a href="">Lien</a>
  13.                                                 <ul class="menu vertical">
  14.                                                         <li>
  15.                                                                 <a href="">Lien</a>
  16.                                                         </li>
  17.                                                         <li>
  18.                                                                 <a href="">Lien</a>
  19.                                                         </li>
  20.                                                         <li>
  21.                                                                 <a href="">Lien</a>
  22.                                                         </li>
  23.                                                 </ul>
  24.                                         </li>
  25.                                         <li>
  26.                                                 <a href="">Lien</a>
  27.                                         </li>
  28.                                         <li>
  29.                                                 <a href="">Lien</a>
  30.                                         </li>
  31.                                 </ul>
  32.                         </li>
  33.                         <li><a href="#">Lien</a></li>
  34.                         <li><a href="#">Lien</a></li>
  35.                         <li><a href="#">Lien</a></li>
  36.                         <li><a href="#">Lien</a></li>
  37.                         <li><a href="#">Lien</a></li>
  38.                 </ul>
  39.         </div>
  40. </div>
Un message, un commentaire ?
modération a priori

Ce forum est modéré a priori : votre contribution n’apparaîtra qu’après avoir été validée par un administrateur du site.

Qui êtes-vous ?
Votre message
  • Pour créer des paragraphes, laissez simplement des lignes vides.