設計一個可摺疊的響應導航欄

我已經有一些困難，定製響應導航的jQuery插件稱爲slimMenu。我已經成立了一個jsFiddle here。最終，我想創建一個響應頭，其中h1「徽標」浮動到容器的左側（即標頭），並且導航鏈接浮動到右側。在觸發崩潰menu--這裏我給自己定的600px的斷點在插件初始化：設計一個可摺疊的響應導航欄

$('ul.slimmenu').slimmenu({ 
    resizeWidth: '600' 
});

您可以通過改變jsFiddle--的「結果」窗格的寬度，我想看看下拉列表項，填補100％的寬度視口，因爲我在這個圖中所示過：

responsive nav menu diagram

這個插件被設置爲毗鄰漢堡菜單圖標顯示的文本在這種情況下triggered--時它是「菜單」 - 但我不想顯示任何文本，只需在左側懸浮「標識」標題即可。我懷疑問題在於浮動標題&導航元素，也許他們需要被放置在一個容器內，並對列表項目（？）進行媒體查詢定位調整，但我在這方面的嘗試沒有奏效。

感謝您的任何幫助。我會很樂意買任何咖啡的人誰找到一個解決方案:)

來源

2013-09-28 nickpish

看起來你可以指定標籤文本是在slimMenu選擇什麼。設置它：

$('ul.slimmenu').slimmenu(
{ 
    resizeWidth: '600', 
    collapserTitle: '', 
    easingEffect:'easeInOutQuint', 
    animSpeed:'medium', 
    indentChildren: true, 
    childrenIndenter: '&raquo;' 
});

它應該會給你你要找的。

編輯：並解決了100％的寬度，我在原來的答覆忽視你可以這樣做：

@media screen and (max-width: 600px) { 
    nav { 
     width:100%; 
    } 
    h1 { 
     position: absolute; 
     z-index: 100; 
    } 
}

其中最大寬度設置爲相同的寬度爲「resizeWidth」選項在slimMenu。

而且，它可能有利於你對類或ID同時適用於導航和H1元素，以確保沒有用完所有的H1S與該媒體查詢。

來源

2013-09-28 12:45:57 rwaymouth

感謝您的答覆rwaymouth但並不至於下拉項填充視口的寬度，我在圖中已經顯示出應對的總體佈局問題。 – nickpish

謝謝rwaymouth--我們越來越近:)我更新了jsFiddle [這裏]（http://jsfiddle.net/nickpish/Nmh9Z/18/）。雖然摺疊菜單正常工作，但現在問題出現在未摺疊狀態，因爲導航是向左浮動並與標題重疊。我猜真正的挑戰是讓nav在正常狀態下保持浮動狀態，並在「摺疊」狀態下將標題下方的100％寬度填充。還有什麼想法？ – nickpish

從查看jsFiddle看起來問題是您的媒體查詢設置爲768px，菜單斷點設置爲600px，當屏幕在600像素和768像素之間時，您可以重疊。如果將'resizeWidth'選項更改爲768px，則看起來所有內容都可以正常工作。 – rwaymouth

設計一個可摺疊的響應導航欄

回答

相關問題