0

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

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

编辑：将此链接 添加到主页的简单工作版本。

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

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

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

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

4

2 回答 2

0

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;
        }
      });
于 2013-05-14T15:41:07.727 回答
0

如果你调整：

.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%;
}
于 2013-05-11T06:35:16.953 回答