Question

我在我的项目中使用了Foundation v6.2.0。我在顶部小屏幕上按照小屏幕的需要工作时遇到了一些困难。在小屏幕上，我希望导航的顶层充当直接链接（而不是显示子菜单的触发器），而是将该功能移动到顶层项目右侧的插入符号（小向下箭头），现在它会触发子导航的显示。

＆＃13;

$(document).foundation();

＆＃13;

<link href="https://cdn.jsdelivr.net/foundation/6.2.0/foundation.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/foundation/6.2.0/foundation.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<nav class="title-bar" data-responsive-toggle="top-bar-menu" data-hide-for="medium">
    <div class="title-bar-left">
		<a href="#" class="toggle-topbar menu-icon" data-toggle><span class="hamb-icon"></span></a>
    </div>
	<div class="title-bar-right hide-for-small">  
	</div>
</nav>

<nav class="top-bar main-nav" id="top-bar-menu">
    <div class="row main-nav">
        <div class="top-bar-left">
              <ul class="vertical medium-horizontal menu menu-items" data-closing-time="0" data-responsive-menu="accordion medium-dropdown">
                  <li><a href="http://foundation.zurb.com/">Item 1</a></li>
                  <li><a href="http://foundation.zurb.com/">Item 2</a>
                      <ul class="menu vertical">
                          <li><a href="http://foundation.zurb.com/">Item 2A</a></li>
                          <li><a href="http://foundation.zurb.com/">Item 2B</a></li>
                      </ul>
                  </li>
                  <li><a href="http://foundation.zurb.com/">Item 3</a></li>
                  <li><a href="http://foundation.zurb.com/">Item 4</a></li>
                  <li><a href="http://foundation.zurb.com/">Item 5</a></li>
                  <li><a href="http://foundation.zurb.com/">Item 6</a></li
               </ul>
       </div>  
       <div class="top-bar-right search-bar">
       </div>                      
    </div>
</nav>

＆＃13;

Answer 1

如果您希望（比方说）Item 2在点击时充当<a href="go_here">链接（而非触发显示Item 2A和Item 2B）;我不认为在基金会有一种标准的方法可以做到这一点。但是，您可以使用为大屏幕或JavaScript / jQuery + CSS + HTML更改隐藏的其他链接来绕过它：

其他链接

此选项不会让您需要添加黑客或其他CSS来隐藏不需要的菜单家具或覆盖基础菜单的工作方式。这样做是为了添加一个只在小屏幕上可见的新链接，同时保持原始链接不变，继续充当触发器。

<li><a href="http://foundation.zurb.com/">Item 2</a>
    <ul>
         <li class="show-for-small-only">
             <a href="http://foundation.zurb.com/">Item 2 "home"</a>
         </li>
         <li><a href="http://foundation.zurb.com/">Item 2A</a></li>
         <li><a href="http://foundation.zurb.com/">Item 2B</a></li>
    </ul>
</li>

JSfiddle：https://jsfiddle.net/sons9wzr/2/

这更有用，但需要额外点击才能显示子菜单。也可以动态地使用JavaScript / jQuery执行此操作。

JavaScript / jQuery + CSS + HTML

如果目标是只有移动设备的相关链接和桌面的扩展菜单，则可以使用与上面第一个示例中类似的添加类隐藏子导航，添加JavaScript然后隐藏多余的插入符号CSS。

所以你的HTML变成了：

<li><a class="forced" href="http://foundation.zurb.com/">Item 2</a>
    <ul class="show-for-large-only">
         <li><a href="http://foundation.zurb.com/">Item 2A</a></li>
         <li><a href="http://foundation.zurb.com/">Item 2B</a></li>
    </ul>
</li>

然后使用JavaScript（无论如何都需要基金会的jQuery）来强制点击某些导航项（通过向要强制转到新位置的每个class="forced"添加<a>上面的HTML）。

仅适用于小屏幕的JavaScript示例：

//check for screen size = small
if(Foundation.utils.is_small_only()) {
    $('nav').on('click','a.forced', function (e) {
        e.preventDefault;
        window.location.href = $(this).attr('href');
    });
}

（More information on the Media Query JS utility）

这仍然会将插入符号保留在菜单项上，虽然这可能会让用户感到困惑，因此您可以使用以下内容将其删除（来自所有子导航项目）：

.is-accordion-submenu-parent > a::after {
    display: none;
}

这可以为您提供所需的效果，但在更新Foundation时可能需要额外的维护。

Codepen中的示例（仅适用于小屏幕的代码）：http://codepen.io/tymothytym/pen/eZGEER

编辑：好的，基于这个评论：

我希望能够通过单击父元素右侧的图标来扩展移动视图中的菜单，以及能够单击父元素本身。

我创建了一个新的解决方案。这非常黑客，而不是一个很好的解决方案。我建议找到替代导航设置或在Foundation提供的框架内工作。

新HTML （forced课程已移至<li>＆amp; <span>添加）

<li class="forced">
    <span data-item="Item 2" class="show-for-small-only"></span>
    <a href="http://foundation.zurb.com/">Item 2</a>
    <ul class="menu vertical">
        <li><a href="http://foundation.zurb.com/">Item 2A</a></li>
        <li><a href="http://foundation.zurb.com/">Item 2B</a></li>
    </ul>
</li>

新CSS 这会分割<li>的内容并定位新的子元素

.is-accordion-submenu-parent > a::after {
    display: none;
}
@media only screen and (max-width: 40em) {
  li.forced span {
    content: 'Item 2';
    display: inline-block;
    padding: .7rem 1rem;
    line-height: 1;
    width: 70%;
    color: #2199e8;
    cursor: pointer;
  }
  .menu > li.forced > a {
      padding: .7rem 1rem;
      line-height: 1;
      float: right;
  }
}

新JavaScript

这会更改链接的文本（您只需要为小屏幕执行此操作，如上所示...上面）使新<span>成为链接，通过以下方式将文本插入其中数据属性＆amp;将原始链接文本更改为插入符号（以尽可能多地保留原始功能）。

$(document).foundation();
$('nav').on('click','.forced span', function () {
  window.location.href = $(this).siblings('a').attr('href');
});
$('.forced > a').html("&#9660;");
$('.forced > span').text($('.forced > span').data("item"));

此处示例：http://codepen.io/tymothytym/pen/GZOqvO

我认为这可能存在可用性问题和维护问题，因此请谨慎使用。

如何使用Foundaton 6更改小屏幕上的顶级链接功能？

1 个答案: