尚未實現Zurb基金會頂級欄杆的手風琴行爲

Question

我的站點要求移動設備的導航行爲如同手風琴。我有一個可怕的時間試圖得到這個動作，因爲我似乎無法重寫明顯默認的幻燈片菜單行爲。

我的問題是：我應該（我可以）使用第三方js覆蓋僅用於移動設備和平板電腦的頂部欄，同時保持當前的桌面頂部欄導航？

我在桌面的邊欄中有手風琴菜單，但我似乎無法將此風格應用到頂部欄。

我希望我錯過了一些明顯的東西 - 如果我是，究竟是什麼？

我明顯是做錯了。

Answer 1

我的建議是保持菜單，意味着加載時間在服務器端腳本，你可以把條件，如果它的移動比使用第三方移動菜單，否則你已經有頂尖酒吧。

Answer 2

下面是一個演示，附有評論和說明。它重新使用了基金會的大多數.top-bar類和功能，但是使用自定義jQuery而不是TopBar JS來實現手風琴效果。

HTML修改

下面的代碼示例是從基金會的頂欄文件摘錄。進行html註釋中描述的更改，將.top-bar轉換爲手風琴動畫風格。

<!-- IMPORTANT: remove the "data-topbar" attribute from .top-bar, 
otherwise the topbar plugin will initialize. --> 
<nav class="top-bar" data-topbar role="navigation"> 

... 

<!-- IMPORTANT: remove the .dropdown class from the dropdown menu --> 
<ul class="dropdown"> 

CSS

基金會.dropdown類不會對我們工作的目的，但很多款式都是有用的，特別是對於臺式機的屏幕尺寸。在這個例子中，我們重新編寫了基於嵌套ul選擇器的類樣式，但是您可以爲此使用任意類名稱。

/* Opens the mobile menu */ 
.top-bar.opened { 
    overflow: visible; 
} 
/* The rest replaces the Foundation .dropdown class */ 
.top-bar-section ul ul { 
    z-index: 999; 
    display: none; 
} 
@media only screen and (min-width: 40.063em) { 
    .top-bar-section ul ul { 
     position: absolute; 
     left: 0; 
     top: auto; 
     min-width: 100%; 
    } 
} 
.top-bar-section li.active ul { 
    display: block; 
} 
.top-bar-section ul ul li { 
    white-space: nowrap; 
    width: 100%; 
} 
/* Positions the arrow relative to the menu item */ 
.top-bar-section .has-dropdown > a { 
    position: relative; 
} 
.top-bar-section .has-dropdown > a:after { 
    top: 1.25rem; 
} 
/* Hover state */ 
.top-bar-section .has-dropdown:hover > ul { 
    display: block; 
} 

JS初始化

不幸的是，動畫不會在桌面屏幕尺寸在基金會的CSS工作，因爲的重要標誌，在這裏：

@media only screen and (min-width: 40.063em) { 
    .top-bar-section ul { height: auto !important; } 
} 

要使在大屏幕上進行手風琴動畫工作時，您需要刪除該樣式聲明或重寫.top-bar-section類，這將會非常有用。在示例實現中，菜單在點擊和懸停時起作用，除非您在一個小屏幕上，否則它不會生成動畫。

// Init foundation as usual 
$(document).foundation(); 

/* Register event handlers for .top-bar accordion menu */ 
// This opens the menu 
$('.top-bar').on('click', '.toggle-topbar', function(e) { 
    e.preventDefault(); 
    $('.top-bar').toggleClass('opened'); 
}); 

// This does the accordion animation 
$('.top-bar-section').on('click', '.has-dropdown > a', function(e){ 
    e.preventDefault(); 
    $('.top-bar-section ul ul').slideUp(); 
    $(e.target).next().not(':visible').slideDown(); 
}); 

來源：http://www.sepiariver.ca/demos/foundation-topbar-accordion/