卡卡網(wǎng)

本文介紹9款移動網(wǎng)頁導(dǎo)航菜單/漢堡(三橫杠)菜單，它們都是純CSS實現(xiàn)的，在移動網(wǎng)頁中非常實用。

什么是漢堡菜單？

漢堡菜單是一種在網(wǎng)站上顯示導(dǎo)航鏈接的方式，通常適用于移動設(shè)備和較小的屏幕。單擊“漢堡”圖標后，將出現(xiàn)一個滑動菜單，顯示在主要內(nèi)容的頂部。

當標題導(dǎo)航欄上有太多按鈕和鏈接時，會使用它們。漢堡菜單允許你將所有菜單項目縮小到更具可擴展性的菜單設(shè)計中，從而創(chuàng)建緊湊的菜單。

如果你希望移動設(shè)備在導(dǎo)航元素中容納更多內(nèi)容，CSS 漢堡菜單是最好的解決方案之一。

1、CSS 漢堡菜單 - 僅 CSS

在小視口上用漢堡菜單代替標準水平菜單是很常見的。這樣，菜單變得完全響應(yīng)，并根據(jù)視口大小提供最佳體驗。

本示例中，漢堡菜單將在從頂部開始的垂直列中逐個打開項目列表。這對于移動設(shè)備來說是相當標準的行為。

demodownload

2、簡單的居中漢堡菜單

這個非常簡單但有效，它只使用 HTML 和 CSS 來制作帶有一些很酷的動畫的漢堡菜單。

單擊時，漢堡圖標本身會變成十字并用作關(guān)閉按鈕，菜單滑入視圖并顯示在中心。

demodownload

3、左側(cè)滑進滑出菜單

菜單圖標是動畫的，當菜單打開時會變成十字。

菜單本身從幻燈片中滑出并覆蓋主網(wǎng)站。

demodownload

4、全屏漢堡菜單

考慮全屏打開菜單元素？那么你一定會喜歡這個例子。一個僅 CSS 的解決方案，用于顯示漢堡菜單并在全屏層上打開它。

當我們的菜單有很多項目、子菜單或額外信息時，這種全屏菜單會派上用場。

demodownload

5、左側(cè)滑出漢堡菜單

一個非?；顫姾凸饣?CSS 漢堡菜單，僅使用 HTML 和 CSS 來實現(xiàn)這一點。

菜單本身從左側(cè)快速滑出，并且不占據(jù)整個屏幕，僅占據(jù)左側(cè)。菜單項也有很好的懸停效果。

如果你想將其添加到現(xiàn)有網(wǎng)站或者你只需要基本結(jié)構(gòu)，那么這是一個很好的選擇。

demodownload

6、左上角動畫漢堡菜單

大多數(shù) CSS 漢堡菜單要么從左右滑出，要么占據(jù)整個屏幕。但這個有點不同，因為它只使用氣泡形菜單內(nèi)的左上角。

與傳統(tǒng)的漢堡菜單設(shè)計相比，該示例非常獨特，可以輕松更改以編輯顏色或在背景上添加有效的陰影。

這個確實使用了 JavaScript，但它只是非常少的：基本上只是切換 CSS 類來更改菜單狀態(tài)（打開或關(guān)閉）。沒什么復(fù)雜的。沒有可依賴的庫或依賴項，只有非?；镜募?JavaScript。 

demodownload

7、動畫全屏漢堡菜單

在圓形背景內(nèi)有一個浮動的 CSS 漢堡菜單圖標，單擊后菜單將打開動畫。

動畫非常流暢，從菜單圖標本身開始打開。

占據(jù)全屏對于需要大量圖像、圖標和文本空間的繁忙導(dǎo)航菜單來說非常有用。

demodownload

8、全屏變形漢堡菜單

一個有趣的動畫 CSS 漢堡菜單，從屏幕右上角向外變形為全屏菜單。

僅使用 HTML 和 CSS，結(jié)構(gòu)易于遵循并進行編輯以添加你自己的內(nèi)容和導(dǎo)航鏈接/樣式。

demodownload

9、多級漢堡菜單

從屏幕左側(cè)滑出，這種菜單設(shè)計更適合復(fù)雜的導(dǎo)航。

它有一個滑動動畫，但菜單本身使用一個結(jié)構(gòu)良好的項目列表，可以進入多個深度，對于內(nèi)部類別很有用。

demodownload

總結(jié)

本文介紹了9款實用的純CSS移動網(wǎng)頁導(dǎo)航菜單/漢堡(三橫杠)菜單，關(guān)于漢堡菜單，你還可以看看以下文章。

• 3款純CSS3實現(xiàn)漢堡(三橫杠)菜單點擊變叉動畫
• 純CSS3實現(xiàn)漢堡(三橫杠)菜單點擊變?yōu)椴?X)關(guān)閉圖標
• 純CSS3實現(xiàn)的漢堡(三條橫杠)菜單，點擊變叉
• 純CSS+svg實現(xiàn)三條橫線點擊變叉菜單按鈕動畫

相關(guān)文章

• 一款簡易的CSS3側(cè)欄滑動導(dǎo)航菜單
• 一款漂亮的CSS3藍色垂直導(dǎo)航菜單
• CSS3 PC/移動響應(yīng)式網(wǎng)頁水平導(dǎo)航菜單
• #純CSS實現(xiàn)#網(wǎng)頁返回頂部按鈕設(shè)計【演示/源碼】
• 純CSS大氣通用移動網(wǎng)頁導(dǎo)航菜單【演示/源碼下載】
• CSS實現(xiàn)Menu Toggle移動菜單切換按鈕(打開/關(guān)閉)

標簽: 三橫杠菜單  移動導(dǎo)航菜單  移動菜單  漢堡菜單