卡卡網(wǎng)

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

什么是漢堡菜單？

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

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

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

1、CSS 漢堡菜單 - 僅 CSS

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

本示例中，漢堡菜單將在從頂部開(kāi)始的垂直列中逐個(gè)打開(kāi)項(xiàng)目列表。這對(duì)于移動(dòng)設(shè)備來(lái)說(shuō)是相當(dāng)標(biāo)準(zhǔn)的行為。

demodownload

2、簡(jiǎn)單的居中漢堡菜單

這個(gè)非常簡(jiǎn)單但有效，它只使用 HTML 和 CSS 來(lái)制作帶有一些很酷的動(dòng)畫的漢堡菜單。

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

demodownload

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

菜單圖標(biāo)是動(dòng)畫的，當(dāng)菜單打開(kāi)時(shí)會(huì)變成十字。

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

demodownload

4、全屏漢堡菜單

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

當(dāng)我們的菜單有很多項(xiàng)目、子菜單或額外信息時(shí)，這種全屏菜單會(huì)派上用場(chǎng)。

demodownload

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

一個(gè)非?；顫姾凸饣?CSS 漢堡菜單，僅使用 HTML 和 CSS 來(lái)實(shí)現(xiàn)這一點(diǎn)。

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

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

demodownload

6、左上角動(dòng)畫漢堡菜單

大多數(shù) CSS 漢堡菜單要么從左右滑出，要么占據(jù)整個(gè)屏幕。但這個(gè)有點(diǎn)不同，因?yàn)樗皇褂脷馀菪尾藛蝺?nèi)的左上角。

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

這個(gè)確實(shí)使用了 JavaScript，但它只是非常少的：基本上只是切換 CSS 類來(lái)更改菜單狀態(tài)（打開(kāi)或關(guān)閉）。沒(méi)什么復(fù)雜的。沒(méi)有可依賴的庫(kù)或依賴項(xiàng)，只有非常基本的純 JavaScript。 

demodownload

7、動(dòng)畫全屏漢堡菜單

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

動(dòng)畫非常流暢，從菜單圖標(biāo)本身開(kāi)始打開(kāi)。

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

demodownload

8、全屏變形漢堡菜單

一個(gè)有趣的動(dòng)畫 CSS 漢堡菜單，從屏幕右上角向外變形為全屏菜單。

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

demodownload

9、多級(jí)漢堡菜單

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

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

demodownload

總結(jié)

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

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

相關(guān)文章

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

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