Come posso chiudere il menu della barra superiore di Foundation quando si fa clic su un collegamento?

Question

Sto utilizzando la barra superiore fissa di Zurb Foundation sul mio sito a pagina singola e contiene collegamenti di ancoraggio a luoghi all'interno della pagina. Mi piacerebbe che ogni volta che si fa clic su un collegamento all'interno del menu mobile espanso, il menu si chiude.

Attualmente, quando si fa clic su un collegamento, la pagina scorre, ma il menu rimane aperto nella parte superiore della pagina.

In una versione precedente di Foundation, ero in grado di decodificare il codice e trovare una soluzione semplice. Dall'aggiornamento alla 4.3.1 per risolvere un altro problema con la barra superiore, non riesco a trovare una soluzione a causa della mia conoscenza limitata di javascript.

topbar

Mi sembra che se potessi generato l'evento o la funzione per la chiusura del menu quando un collegamento nel menu viene cliccato, che sarebbe stato risolto. Precedentemente, ho inserito il mio codice che si è verificato su un collegamento, fare clic sulla riga 261.

Quando il menu mobile si chiude, .fixed viene aggiunto al div che circonda la barra superiore, mentre .expanded e .fixed vengono rimossi dal .topbar div .

Answer 1

Si può provare ad aggiungere un po 'di jQuery per comprimere il menu quando si fa clic su un link.

È possibile aggiungere il codice racchiuso all'interno di un elemento di script. Mettilo dopo tutti i tuoi elementi html (all'interno dell'elemento body). Puoi anche metterlo in un file javascript separato che puoi utilizzare come qualsiasi altro file javascript. Assicurati di mettere quel link dopo il collegamento jQuery.

Il codice stesso può essere piuttosto semplice poiché sembra che la fondazione aggiunga una classe chiamata "espansa" alla barra di navigazione quando si attiva e disattiva l'icona del menu. Quindi puoi semplicemente rimuovere la classe "espansa" quando qualcuno fa clic sui tuoi pulsanti.

Questo è quello che dovrebbe essere simile:

jQuery(document).ready(function($) { 
    $('.top-bar ul.right(or .left depending how you arranged your buttons) li').click(function() { 
     $('.top-bar').removeClass('expanded'); 
    }); 
}(jQuery)); 

Il selettore '.top-bar ul.right (o .left a seconda di come avete organizzato i pulsanti) li' può essere chiamato con un ID anche se dai al tuo menu (l'elemento UL) un ID unico. In questo caso sarebbe:

jQuery(document).ready(function($) { 
    $('#myMenuId li').click(function() { 
     $('.top-bar').removeClass('expanded'); 
    }); 
}(jQuery)); 

Sperare che aiuti.

Answer 2

Prova:

$('#main-menu li').click(function() { 
    $('.toggle-topbar').trigger('click'); 
}); 

Answer 3

un modo più pulito (al posto del grilletto click o rimuovere classe):

$(document).on("click", ".top-bar li", function() { 
    Foundation.libs.topbar.toggle($('.top-bar')); 
}); 

Answer 4

Questo è ciò che funziona per me:

setTimeout(function() {$(document).foundation('topbar', 'reflow')}, 500); 

farmi sapere se questo funziona anche per te. (Forse ridurre "500" a una durata inferiore a mezzo secondo).

Ecco una versione ampliata:

<script type="text/javascript"> 
function hideDropDown() { 
    setTimeout(function() {$(document).foundation('topbar', 'reflow')}, 500); 
} 
</script> 
<nav class="top-bar" data-topbar role="navigation"> 
    <section class="top-bar-section"> 
    <!-- Right Nav Section --> 
    <ul class="right"> 
     <li class="has-dropdown"> 
     <a href="#">My menu</a> 
     <ul class="dropdown"> 
      <li><a onclick="hideDropDown()" target="another_page" href="/some/where">Menu item</a></li> 
     </ul> 
     </li> 
    </ul> 
    </section> 
</nav> 

Answer 5

sto lavorando con Fondazione 6 per la prima volta, e mi sono imbattuto in questo post durante il tentativo di trovare un modo per chiudere il nuovo menu top-bar mobile quando è stato fatto clic su un collegamento.Volevo commentare la mia soluzione nel caso in cui qualcun altro che lavorava su Foundation 6 attraversasse questo post, poiché era un buon punto di partenza per me.

Ecco quello che ho fatto:

configurazione di navigazione - navigazione orizzontale su medie e grandi punti di interruzione, reattivo a levetta nav verticale sul piccolo punto di interruzione

   <!-- Mobile responsive toggle (hamburger menu) --> 
       <div class="title-bar" data-responsive-toggle="siteNav" data-hide-for="medium"> 
        <button class="menu-icon" type="button" data-toggle></button> 
        <div class="title-bar-title">Menu</div> 
       </div> 

       <!-- Nav items --> 
       <div id="siteNav" class="top-bar"> 
        <p><ul class="vertical medium-horizontal menu text-center"> 
         <li ><a href="#home" onClick="">HOME</a></li> 
         <li ><a href="#services">SERVICES</a></li> 
         <li ><a href="#contact">CONTACT</a></li> 
        </ul></p> 
       </div> 

Poi ho aggiunto una versione modificata del jquery sulla base del soluzioni precedenti in questo post (grazie a amazingBastard e Cerbrus):

$(document).ready(function($) { 
     $('#siteNav li').click(function() { 
      if(Foundation.MediaQuery.current == 'small'){ 
       $('#siteNav').css('display', 'none'); 
      } 
     }); 
    }); 

Nel Fondazione 6 "display" selettore css è aggiunto un menu esteso e impostato su "display: none" per hidden o "display: block" per espanso. Questo frammento jquery controlla il breakpoint corrente contro il piccolo (dispositivo mobile) facendo clic su un elemento di navigazione nella classe di menu predefinita che sto usando, e se true cambia il selettore css su "display: none", chiudendo effettivamente il menu.

Answer 6

Ho copiato parte del codice nel codice della funzione di chiusura del dropdown di Foundation 6.

Per farlo funzionare ho avuto anche per impostare l'opzione dati-disable-hover = "true sull'elemento di menu altrimenti il ​​menu non avrebbe chiuso la prima volta che l'utente fa clic su un elemento in esso.

ho scritto il mio codice in AngularJS e ne ha fatto il lavoro. sto indovinando che sarebbe simile a questa per jQuery. in altre parole, il codice non è testato.

$('#main-menu li').click(function closeDropdown() { 
    var $toClose = $('#main-menu'); 

    if(!$toClose){ 
     return; 
    } 

    var somethingToClose = $toClose.hasClass('is-active') || $toClose.find('.is-active').length > 0; 

    if (somethingToClose) { 
     $toClose.find('li.is-active').add($toClose).attr({ 
      'aria-expanded': false, 
      'data-is-click': false 
     }).removeClass('is-active'); 

     $toClose.find('ul.js-dropdown-active').attr({ 
      'aria-hidden': true 
     }).removeClass('js-dropdown-active'); 
    } 
    });