如何使用Foundaton 6在小屏幕上更改頂級鏈接的功能？

Question

我在項目中使用Foundation v6.2.0。 在使頂部欄在小屏幕上按需工作時，我遇到了一些困難。 在小屏幕上，我希望導航的頂層充當直接鏈接（而不是顯示子菜單的觸發器），而是將該功能移至頂層項目右側的插入符號（向下箭頭） ，因此它現在觸發子導航的顯示。

 $(document).foundation(); 

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

Answer 1

如果您希望（說） Item 2在單擊時充當<a href="go_here">鏈接（而不是顯示Item 2A和Item 2B的觸發器）； 我認為在Foundation中沒有標准的方法可以做到這一點。 但是，您可以通過隱藏在大屏幕或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（無論如何，Foundation都需要jQuery）來強制單擊某些導航項（通過將class="forced"添加到要強制轉到上述HTML中的新位置的每個<a>上）。

僅適用於小屏幕的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');
    });
}

（ 有關Media Query JS實用程序的更多信息 ）

盡管仍然可能使插入符留在菜單項上，但這可能會使用戶感到困惑，因此您可以使用以下方法將其刪除（從所有子導航項中刪除）：

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

盡管您在更新Foundation時可能需要額外的維護，但這應該可以達到預期的效果。

Codepen中的示例（僅適用於小屏幕的代碼）： http ://codepen.io/tymothytym/pen/eZGEER

編輯：確定，因此基於此注釋：

我希望能夠通過單擊父元素右側的圖標來展開移動視圖中的菜單，以及能夠單擊父元素本身。

我創建了一個新的解決方案。 這很大程度上是一個hack，而不是一個完美的解決方案。 我建議您找到替代的導航設置，或者在Foundation提供的框架內工作。

新的HTML （已將forced類移至<li>和<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>鏈接，通過data屬性將文本插入其中並更改原始文本將文本鏈接到插入符號（以保留盡可能多的原始功能）。

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

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

我認為這可能存在可用性問題和維護問題，因此請謹慎使用。