10 個用於創建響應式導航的 CSS 和 JavaScript 代碼片段

一個好的響應式網站最複雜的部分之一是導航。 這可能需要一段時間才能弄清楚，並且有很多教程可以幫助解決這個問題。 但我也喜歡使用我們為本文收集的代碼片段。

所有這些響應式導航片段都可以為您自己的項目免費編輯和克隆。 它們還具有多種樣式，因此這裡會有適用於所有類型網站的東西。

1. Johnny Mango 的響應式整頁佈局

這個響應式示例顯示了您可以在網站的原型設計階段走多遠。 當您懸停並自動關注鏈接時，您會注意到導航具有一個有趣的功能。 可以在具有相同導航的“實時”網站上更改此效果，但在此示例中展示頁面的 UI/UX 很有用。

請參閱 Johnny Mango 的帶有 Kube 的 Pen 響應式導航演示

2. Tania Rascia 的下拉導航欄

如果您在導航中需要更長的下拉項目，那麼此菜單可能會更好。 它是僅具有少數菜單項的更基本導航的強大替代方案。 在這種情況下，您會找到一個帶有非常小的下拉列表的簡單鏈接列表。 子菜單鏈接僅出現在由 jQuery 處理的單擊事件上。 您可以將其更改為僅 CSS，但您將丟失點擊觸發器。

儘管如此，對於如此簡潔的設計，我對這個片段為開發人員提供的多功能性感到驚訝。

請參閱 Tania Rascia 的 Pen 響應式下拉導航欄

3. Jan Czizikow 的單頁佈局

單頁導航菜單和其他菜單一樣需要愛。 這是一個完美的單頁導航示例。 鏈接以流暢的動畫向下滾動，但不要讓您等待太久。

更不用說，無論您的瀏覽器大小如何，它們都會自動調整大小以完美契合。 我主要推薦這種類型的導航用於銷售頁面或簡單的投資組合網站。 它很乾淨，並具有一些出色的動畫功能以及響應式技術。

查看 Pen 使用 CSS 動畫和 jQuery 的完全響應式導航，作者 Jan Czizikow

4. Stephanie Walter 的紅色下拉菜單

開發人員 Stephanie Walter 為 Web 構建了一些令人興奮的項目。 這個片段只是一個具有鮮紅色響應式導航的示例。

這些鏈接具有更多的魅力，具有自定義選擇功能和良好的懸停效果。 調整大小時，您會注意到導航使用的是滑動下拉菜單。 我幾乎會選擇移動鏈接的塊級列表，但考慮到子菜單，這會更好。

參見 Stephanie Walter 的 Pen Responsive navigation multilevel

5. Ahmad Hjazy 的純 CSS 設計

這是一個使用純 CSS 進行導航的獨特設計。 這是一個帶有模仿元素週期表的導航鏈接的垂直菜單。

懸停效果有點延遲，但無疑很有趣。 更不用說響應式風格令人驚訝地可用。 也許最令人印象深刻的部分是整個示例如何僅使用 CSS 。

請參閱 Ahmad Hjazy 的 Pen CSS 響應式導航菜單

6. Marc Libunao 的響應式 Sticky Header

我在前面的片段中提到了單頁設計，這個響應式標題遵循類似的軌跡。 唯一的區別是這個導航在頁面上有一個稍微大一點的塊，它處理響應式頁面設計有點不同。

當您調整瀏覽器大小時，您會注意到此示例使用帶有有趣動畫的漢堡圖標。 考慮到這種風格很好，但可能不是每個人。

請參閱 MarcLibunao 的 Pen Responsive Sticky header navigation

7. Dragoeco的響應式和触摸友好

所有好的網站都應該默認是觸摸友好的，這就是讓這個導航對設計師更具吸引力的原因。

每個鏈接都會指向一個新頁面，但您可以在任何基於觸摸的設備上輕鬆點擊以懸停下拉菜單。 導航菜單中經常缺少此功能，這也是下拉菜單難以設計的原因之一。

查看筆下拉導航：Dragoeco 的響應式和触摸友好

8. AnabolicHippo 的簡單導航鏈接

當我想到簡單的導航菜單時，我會想到這樣的設計。 每個鏈接都顯示為自己的塊元素，即使在較小的屏幕上也是如此。 沒有漢堡菜單，也沒有隱藏的動畫菜單功能。 相反，鏈接會調整大小並分成單獨的行。

最棘手的部分是處理移動設備上的下拉效果。 許多鏈接都有子菜單，它們在較小的屏幕上也能正常工作。

我認為這對於很少或沒有子菜單的網站最有效，但值得在移動設備上嘗試以了解您對體驗的看法。

請參閱 AnabolicHippo 的筆響應式導航菜單

9. Louis Chenais 的Playstation 窗簾菜單

開發人員 Louis Chenais 基於 PlayStation 網站創建了我最喜歡的響應式導航之一。 路易斯稱之為“窗簾菜單”，它滑入視野，佔據整個頁面。 這對於移動界面很常見，並且很快在網頁設計師中流行起來。

我真正喜歡的一件事是動畫風格。 它既時尚又快速，足以顯示鏈接而不會讓用戶感到無聊。 最重要的是，這感覺就像它可以在生產網站上運行。

請參閱筆響應式導航原則 #3 – Louis Chenais 的窗簾菜單

10. Samir Alley的響應式超級菜單

您可以搜索網絡並找到數百個大型導航菜單示例。 這些通常出現在較大的博客和新聞網站上，但它們在電子商務商店或大型代理網站上也很受歡迎。 大型菜單最困難的部分是使其完全響應。 由於這個小片段，您可以重新設計大型菜單設計以輕鬆適應任何屏幕。

在移動設備上，它使用滑動導航在一個菜單中顯示所有內部鏈接。 這可能看起來有點煩人，但如果有意義的話，您也可以使用 jQuery 隱藏子鏈接。 它仍然是我見過的最好的響應解決方案之一，可以在桌面上運行大型菜單而不會疏遠移動用戶。

請參閱 Pen Responsive Mega Menu – Navigation by samir alley