Comment ajouter un bouton de menu de navigation bascule dans la Fondation

Question

J'utilise la Fondation et j'ai lu la documentation sur son site et je conçu la navigation de mon site comme celui-ci:

<div class="top-bar BHoma"> 
      <div class="top-bar-left title-bar-left"> 
       <ul class="menu"> 
        <li class="menu-text"><img src="img/text-logo.png" width="100" height="50" title="شرکت طراحی، برنامه نویسی و بازاریابی دانوپ"></li> 
        <li><a href="#">Link</a></li> 
        <li><a href="#">Link</a></li> 
       </ul> 
      </div> 
      <div class="top-bar-right title-bar-right"> 
       <ul class="menu"> 
        <li><a href="#">Link</a></li> 
        <li><a href="#">Link</a></li> 
        <li><a href="#">Link</a></li> 
        <li><a href="#">Link</a></li> 
        <li><a href="#">Link</a></li> 
       </ul> 
      </div> 
     </div> 

donc en gros je ajouté les attributs de classes corrects et il est également réactif, mais le problème est qu'il ne montre aucun type de bouton de menu à bascule pour les petits appareils. Je veux dire qu'il ne montre que des liens de menu tous ensemble plutôt que de les afficher dans quelque chose comme navbar-collapse option dans Bootstrap! Alors, y a-t-il un moyen d'ajouter un bouton bascule de menu avec Foundation ou ça se termine comme ça?

Vous pouvez également consulter l'ensemble de mon site Web que je suis en train de développer en cliquant sur ce link.

Answer 1

Vous devez ajouter les directives-bascule de données figurant sur la section "Mise en page avancée" de http://foundation.zurb.com/sites/docs/top-bar.html

<div class="top-bar"> 
 
    <div class="top-bar-title"> 
 
    <span data-responsive-toggle="responsive-menu" data-hide-for="medium"> 
 
     <button class="menu-icon dark" type="button" data-toggle></button> 
 
    </span> 
 
    <strong>Site Title</strong> 
 
    </div> 
 
    <div id="responsive-menu"> 
 
    <div class="top-bar-left"> 
 
     <ul class="dropdown menu" data-dropdown-menu> 
 
     <li> 
 
      <a href="#">One</a> 
 
      <ul class="menu vertical"> 
 
      <li><a href="#">One</a></li> 
 
      <li><a href="#">Two</a></li> 
 
      <li><a href="#">Three</a></li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#">Two</a></li> 
 
     <li><a href="#">Three</a></li> 
 
     </ul> 
 
    </div> 
 
    <div class="top-bar-right"> 
 
     <ul class="menu"> 
 
     <li><input type="search" placeholder="Search"></li> 
 
     <li><button type="button" class="button">Search</button></li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div>