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

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

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

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

進入 Hamburgers 庫的官網(wǎng)，可以看到各式各樣美味的 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 的默認樣式，只需要給相同的類名寫樣式覆蓋即可，比如控制內(nèi)邊距：

hamburger-padding-x:?30px;


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

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

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

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

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