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.