美味的 CSS 動畫漢堡，要不要嘗嘗？

大家好，我是魚皮，今天教大家做漢堡包。

當然不是真的漢堡包，畢竟我們這兒不是美食頻道，而是指 HambergurMenu，漢堡包式菜單，由于菜單圖標的三條橫線酷似一個漢堡包，故得其名。

為了讓網頁更生動，當點擊漢堡包菜單圖標時，可以給它添加一個小動畫。這不，有個國外的大神，專門開發(fā)了一個漢堡包菜單 CSS 動畫庫，庫的名稱就叫 Hamburgers！

進入 Hamburgers 庫的官網，可以看到各式各樣美味的 CSS 動畫漢堡。點擊菜單圖標，即可查看效果，比如點擊 Arrow 菜單圖標，三條線會自然變化為箭頭圖標。

如何使用

該庫的使用方式非常簡單，由于是純 CSS 實現(xiàn)，只需引入一個樣式文件：

<link href="dist/hamburgers.css" rel="stylesheet">

引入樣式文件后，先創(chuàng)建一個漢堡包菜單元素，添加一些特定的類名：

<button class="hamburger" type="button"><span class="hamburger-box"><span class="hamburger-inner"></span></span> </button>

然后從所有漢堡包風格中，選擇一款自己喜歡的，再給上述漢堡包元素的最外層（含有 hamburger 類名）添加風格對應的類名，其他子元素保持不變即可。

比如我需要一個點擊后折疊的漢堡菜單，對應的類名是 hamburger--collapse，則代碼如下：

<button class="hamburger hamburger--collapse" type="button"><span class="hamburger-box"><span class="hamburger-inner"></span></span> </button>

不過此時，漢堡包還不能動，想要激活漢堡折疊動畫，還需要再給最外層元素添加 is-active 類名，代碼如下：

<button class="hamburger hamburger--collapse is-active" type="button"><span class="hamburger-box"><span class="hamburger-inner"></span></span> </button>

美中不足的是，需要我們自行通過 JavaScript 或 jQuery 等方式來動態(tài)地添加和刪除 is-active 類名，以控制菜單的動畫是否生效。不過這也是作者設計如此，希望讓讀者根據(jù)上下文做出最合適的選擇。

更多用法

除了這種引入 CSS 文件的使用方式外，Hamburgers 還支持 npm、Bower 等主流的包管理器引入，并且支持 Sass 這一 CSS 擴展語言，甚至還支持 Ruby on Rails！

如果你想要覆蓋 Hamburgers 的默認樣式，只需要給相同的類名寫樣式覆蓋即可，比如控制內邊距：

hamburger-padding-x: 30px;

此外，Hamburgers 完美支持無障礙編程，給元素添加 aria-label 屬性即可，具體可參見項目官網。

---

最后，看下這個庫的瀏覽器兼容性，由于它使用了 CSS3 3D transforms，因此支持除 IE9 和 Opera Mini 外的所有主流瀏覽器。

目前項目也收獲了超過 5000 個 star，可以放心食用！

🔍 項目地址：https://www.code-nav.cn/rd/?rid=17453ede60843d0e04015e05484ef4f5

在 編程導航 中還能發(fā)現(xiàn)更多優(yōu)質編程學習資源，歡迎分享給有需要的同學吧！

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結

以上是生活随笔為你收集整理的这个 CSS 库竟能帮你做汉堡？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。