单击时会显示 Foundation 6 菜单图标 link

Question

我在 Rails 4 上使用 foundation 6 和 scss 制作了这个顶部栏菜单。问题是，只要您单击菜单中的任何 link，菜单图标（汉堡包）就会出现，但它不应该出现，因为它是全屏的，它也会停止响应汉堡包图标中的 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 开始，Foundation 响应式菜单将 title-bar 与 top-bar 分开，您的标记不会反映该更新。为了使响应式菜单起作用，切换需要在标记树中更高。 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>

top-bar-title div 需要从 top-bar 中删除并重命名为 title-bar-title（感谢 Zurb 的命名）。此 div 需要属于 div 分类 title-bar。此外，您的 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>

除非您实际上是想在响应式菜单上获取图像。

无论如何，我使用控制台解决了其余问题：

$(document).foundation()

对于 Zurb，您需要告诉 javascript 执行。一旦那是运行我就可以切换菜单了。您可能需要在您的 coffeeScript 某处

$ ->
  $(document).foundation()

这将等到 dom 准备好并运行基础。

Answer 2

我遇到了同样的问题。我只是设置 css 规则：

@media only screen and (min-width: 641px) {
    .title-bar {
        display: none;
    }
}

单击时会显示 Foundation 6 菜单图标 link

Foundation 6 menu icon been show on click link

html

ruby-on-rails

sass

zurb-foundation

ruby-on-rails-4