iPhone问题上的Zurb Foundation顶部栏菜单答案

【问题标题】：Zurb Foundation top bar menu on iPhone issueiPhone问题上的Zurb Foundation顶部栏菜单
【发布时间】：2013-05-08 17:42:58
【问题描述】：

我有一个 Zurb Foundation 3 导航菜单。当页面在手机上时，它会正确显示我的菜单系统的手机版本。

但是，激活菜单的唯一方法是点击右侧的向下=箭头三角形。我想让标题也处于活动状态。

编辑：将this link 添加到主页的简单工作版本中。

注意，点击栏或“菜单”一词会突出显示栏，但只有箭头会显示菜单。

我在桌面上隐藏名称（“菜单”）并在手机上显示，如下所示：

<div class="row">
    <div class="contain-to-grid">
    <nav class="top-bar">
      <ul>
        <!-- Title Area -->
        <li class="name show-for-small">
          <h1><a href="#">Menu</a></h1>
        </li>
        <li class="toggle-topbar"><a href="#"></a></li>
      </ul>

      <section>
        <!-- Left Nav Section -->
        <ul class="left">
               etc.

因为我预计很多人会点击标题“菜单”来访问菜单，所以我想让它与点击右侧的箭头一样。

【问题讨论】：

我不知道该怎么做。但我认为你应该看看哪个 CSS 类/id 负责显示菜单。并将相同的类/ID应用于“菜单”。
我先试过了，但它把菜单这个词贴在右边，与箭头相同的大小和位置。
然后在 Javascript 文件的基础库中查找显示菜单的函数，并将该函数应用于菜单。 "onlick=functionToRevealMenu()"

标签： drop-down-menu menu responsive-design zurb-foundation

【解决方案1】：

如果你调整：

.top-bar ul > li.toggle-topbar {
    cursor: pointer;
    display: block;
    height: 45px;
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
}

并将宽度值更改为：

width 100%;

它会起作用 - 在你的 app.css 中添加：

.top-bar ul > li.toggle-topbar {
    width: 100%;
}

【讨论】：

【解决方案2】：

CSS 方法是一种方法，但我会修改 jquery.foundation.topbar.js，第 45 行（即下面的函数）我将 '.top-bar .toggle-topbar 更改为 '.top-bar .toggle-topbar, .top-bar .title'

$('.top-bar .toggle-topbar, .top-bar .title').off('click.fndtn').on('click.fndtn', function (e) {
        e.preventDefault();

        if (methods.breakpoint()) {
          settings.$topbar.toggleClass('expanded');
          settings.$topbar.css('min-height', '');
        }

        if (!settings.$topbar.hasClass('expanded')) {
          settings.$section.css({left: '0%'});
          settings.$section.find('>.name').css({left: '100%'});
          settings.$section.find('li.moved').removeClass('moved');
          settings.index = 0;
        }
      });

【讨论】：