Question

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

但是，激活菜单的唯一方法是点击右侧的向下=箭头三角形。我希望标题也有效。

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

注意，点击栏或单词＆＃34; menu＆＃34;突出显示该栏，但只有箭头才会显示菜单。

我在桌面上隐藏了名称（＆＃34;菜单＆＃34;）并在手机上显示如下：

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

因为我希望很多人会点击标题＆＃34; menu＆＃34;访问菜单我想让它像点击右边的箭头一样。

Answer 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%;
}

Answer 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;
        }
      });

关于iPhone问题的Zurb Foundation顶级酒吧菜单

2 个答案: