如何讓導航菜單從Bootstrap的小屏幕側面滑入？

我有一個非常正常的佈局，導航在左邊的側邊欄，以及右邊的主要內容。 Bootstrap的工作方式是，當屏幕太窄時，導航菜單出現在頂部，而下面的內容則出現在頂部。如何讓導航菜單從Bootstrap的小屏幕側面滑入？

但我覺得非常難看。當我有實際的內容展示時，我不想在導航上浪費太多空間。我想要的是在左側有一個非常窄的條形或按鈕，當你觸摸它時，模態導航菜單從左側滑出。

我找不到任何有關如何在bootstrap中完成該操作的任何信息。沒有示例或教程，但也沒有其他文檔。

我遇到的一些問題：當我將它作爲網格的一部分時，它會在小屏幕上流向頂端，而我顯然不希望這樣。當我把它作爲主要內容的一部分時，它離屏幕邊緣太遠;我希望它在屏幕的邊緣。另外，它會滾動顯示主要內容，並且我希望它保持在原來的位置。絕對定位，我猜。

然後存在的問題是，這應該只發生在小屏幕上。在大屏幕上，現在它是完美的。因此，通常在大屏幕上可見的邊欄應該隱藏起來，並以小屏幕上的模式滑動。我甚至沒有看到任何橫向滑動或摺疊組件。

那麼你如何做到這一點？ Bootstrap有可能嗎？

來源

2013-01-21 mcv

是的，這確實是可能的。有是一個jQuery插件叫做jPanelMenu：

http://jpanelmenu.com/

它是開源的，並在GitHub上！

希望這會有所幫助！

來源

2013-02-11 05:44:57

媒體查詢是不是這裏的問題，它的側身滑。我的確有一種解決方案，但它還不是很漂亮。我正計劃研究jQuery Mobile，看看它是否有很好的解決方案。 – mcv

我完全理解你正在努力完成什麼。例如，像這個網站：http://foodsense.is/ < - 媒體查詢您可以讓導航爲下拉菜單，或者任何您想要的東西。這比jQuery解決方案簡單得多（至少對我來說），並且肯定比jQuery Mobile更快。但是，如果你願意，你可以將jQuery和媒體查詢結合起來，以確定你想要的結果。順便說一句，bootstrap已經有一個媒體查詢，導致你的導航做它做的事情。只需看看我在說什麼，進入你的導航欄，並輸入一個「查詢測試」的ID –

然後去媒體查詢較小的視口，並使用＃query-test {display：none;}菜單將在較小的視口上消失。然後，您可以爲您喜愛的移動設備創建一個全新的菜單設計，然後執行相反的操作：＃nav-menu-for-mobile {display：block;}。如果這對你還沒有意義，讓我知道，我會更好地解釋。無論如何，我自己也在努力實現同一個目標，即響應式設計，對我而言，這是實現它的方法。 –

可以使用像本實施例所示的偏離帆布菜單：http://bootply.com/94838

當瀏覽器寬度窄，邊欄崩塌，並且可以通過點擊左側的箭頭進行擴展。

來源

2013-11-18 12:47:23 ZimSystem

沒有任何插件，你可以這樣做。

https://jsfiddle.net/syamacl45/mcekfnpt/

$('[data-toggle="slide-collapse"]').on('click', function() { 
    $navMenuCont = $($(this).data('target')); 
    $navMenuCont.animate({ 
     'width': 'toggle' 
    }, 350); 
});

來源

2017-08-06 17:57:50

如何讓導航菜單從Bootstrap的小屏幕側面滑入？

回答

相關問題