ファンデーション6のメニューアイコンがクリックリンクに表示されました

Question

ファンデーション6とRails 4のscssを使ってこのトップバーメニューを表示しました。 メニューの任意のリンクをクリックするたびにメニューアイコン（ハンバーガー）が表示され、それはフルスクリーンであるためではなく、ハンバーガーアイコンのonclickイベントへの応答も停止します。これはバグですか、何か間違っていますか？あなたが行くと、ここでメニューをテストすることができ

   <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> 

：http://carey.peopleware.do

Answer 1

財団応答メニューをバージョン6のように、トップバーからタイトルバーを分​​離して、あなたのマークアップは、その更新を反映していません。応答メニューが機能するためには、マークアップツリーのトグルを高くする必要があります。 Responsive Toggle

ラインコンパイル済みのマークアップの28から56は、次のとおりです。

<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> 

トップバータイトルのdivがトップバーから削除し、タイトルバーのタイトルに名前を変更する必要があります（あなたZurbに感謝物事を命名するため）。このdivは、divクラスのタイトルバーにある必要があります。また、title-bar-titleにはボタンやpng画像を含めないでください。

ので、この：

<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="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> 

あなたが実際に応答メニュー上の画像を取得しようとしている場合を除き。

とにかく、私はコンソールを使用して離れて行くために問題の残りの部分を得た：Zurbで

$(document).foundation() 

はあなたが実行するためにJavaScriptを指示する必要があります。それが実行されたら、メニューを切り替えることができました。あなたはたぶんどこかであなたのcoffeeScriptに必要です

$ -> 
    $(document).foundation() 

これは、準備が整って実行されるまで待ちます。