Foundation 6 Menü-Symbol wurde auf Klick-Link

Question

Ich habe dieses Top-Bar-Menü mit Foundation 6 und Scss auf Schienen 4. Das Problem ist, dass jedes Mal, wenn Sie auf einen Link im Menü klicken das Menü-Symbol (Hamburger) erscheint und es sollte nicht, weil Vollbild ist, es reagiert auch nicht mehr auf das Onclick-Ereignis im Hamburger-Symbol. Ist das ein Fehler oder mache ich etwas falsch?

   <div class="top-bar"> 
      <div class="top-bar-title"> 
       <div> 
        <%= link_to image_tag("logo.png", alt: "PeopleWare SRL"), page_path('index') %> 
       </div>    
       <span data-responsive-toggle="responsive-menu" data-hide-for="medium"> 
       <button class="menu-icon dark" type="button" data-toggle></button> 
       </span> 
      </div> 
      <div id="responsive-menu"> 
       <div class="top-bar-right"> 
       <ul class="vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown"> 
        <li><%= link_to 'Blog', page_path('blog') %></li> 
        <li><%= link_to "Support", "http://soporte.peopleware.do" %></li> 
       </ul> 
       </div> 
       </div> 
     </div> 

Sie können hier das Menü gehen und testen: http://carey.peopleware.do

Answer 1

Foundation ansprechendes Menü ab Version 6 trennt die Titelleiste von oben-Bar und Markup spiegelt nicht das Update. Damit das Responsive-Menü funktioniert, muss der Schalter im Markup-Baum höher sein. Responsive Toggle

Linien 28-56 der kompilierten Markup sind:

<section id="menu" class="menu"> 
    <div class="row"> 
    <div class="medium-12 columns"> 
      <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> 
       <div> 
        <a href="/index"><img alt="PeopleWare SRL" src="/assets/logo-345d236755fdd29efe4113717b59043034744758f71f11618e58672f2e0dbc6b.png" /></a> 
       </div>    
      </div> 
      <div id="responsive-menu"> 
       <div class="top-bar-right"> 
       <ul class="vertical medium-horizontal menu"> 
        <!--<li><a href="/blog">Blog</a></li> --> 
       <li><a href="/index#services">Services</a></li> 
       <li><a href="/jason">Software</a></li> 
        <li><a href="/about">About us</a></li> 
       <li><a href="/index#careers">Careers</a></li> 
        <li><a href="/index#contact">Contact us</a></li> 
       <!--<li><a href="http://soporte.peopleware.do">Support</a></li>--> 
       </ul> 
       </div> 
       </div> 
     </div> 
    </div> 
    </div> 
    </section> 

Der Top-Bar-Titel div von der oberen Leiste entfernt werden muss und Titel-Bar-Titel umbenannt (danke ZURB um Dinge zu benennen). Dieses div muss in einer div classed title-bar sein. Außerdem sollte Ihr Titelleistentitel nicht die Schaltfläche oder das PNG-Bild enthalten.

So folgt aus:

<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> 
    <div> 
     <a href="/index"><img alt="PeopleWare SRL" src="/assets/logo-345d236755fdd29efe4113717b59043034744758f71f11618e58672f2e0dbc6b.png" /></a> 
    </div>    
    </div> 
    <div id="responsive-menu"> 

würde:

<div class="title-bar" data-responsive-toggle="responsive-menu" data-hide-for="medium"> 
    <button class="menu-icon dark" type="button" data-toggle></button> 
    <div class="title-bar-title">PeopleWare</div> 
</div> 

<div class="top-bar" id="responsive-menu"> 
    <div> 
    <a href="/index"><img alt="PeopleWare SRL" src="/assets/logo-345d236755fdd29efe4113717b59043034744758f71f11618e58672f2e0dbc6b.png" /></a> 
    </div> 

Es sei denn, Sie tatsächlich versuchen, das Bild auf dem ansprechenden Menü zu gelangen.

Wie dem auch sei, ich habe den Rest der Probleme mit der Konsole zu gehen weg:

$(document).foundation() 

Mit ZURB Sie müssen JavaScript sagen, auszuführen. Sobald das ausgeführt wurde, konnte ich das Menü umschalten. Sie brauchen möglicherweise in Ihrem CoffeeScript irgendwo

$ -> 
    $(document).foundation() 

Dies wird warten, bis dom bereit und Foundation laufen.