随着移动平台浏览量的增长越来越多，网站为了适应移动平台的浏览体验，大部分响应式网页都喜欢采用汉堡包菜单这种形式来展示网站的导航，然而如果都是一种汉堡包菜单风格，那实在太没新意了，今天设计达人网小编为大家整理21个汉堡包导航案例，或许会给你带来些设计灵感哦！
下面来自小编亲自录制的GIF，实际效果请点击“查看演示”链接，案例中，还有菜单的实现代码，前端开发工程师可以去学习他们实现方式，Enjoy!
扩展阅读《[网页汉堡包菜单之关闭按钮的六种玩法][0]》、《[为什么要避免使用汉堡包菜单][1]》
### Hamburger Menu (with cheese)
![hamburger-menu-01][2]
[查看演示][3]
### The ultimate hamburger menu
![hamburger-menu-02][4]
[查看演示][5]
### Atomic Hamburger Menu CSS
![hamburger-menu-03][6]
[查看演示][7]
### Menu toggle svg animation
![hamburger-menu-06][8]
[查看演示][9]
### Star Wars Toggle Icon Animation
![hamburger-menu-05][10]
[查看演示][11]
### Animated Burger/Menu Icon
![hamburger-menu-04][12]
[查看演示][13]
### Material Design Menu
录制时帧数少了，请点击链接看实际DEMO演示效果。
![hamburger-menu-07][14]
[查看演示][15]
### Drawn Hamburger Transition
![hamburger-menu-08][16]
[查看演示][17]
### Animating CSS-Only Hamburger Menu Icons
![hamburger-menu-09][18]
[查看演示][19]
### The minimal hamburger menu with fullscreen navigation
![hamburger-menu-10][20]
[查看演示][21]
### Frosty Nav Toggle Effect
点击展示菜单后，背景会变模糊，特效不错
![hamburger-menu-11][22]
[查看演示][23]
### Hamburger icon with Morphing Menu
![hamburger-menu-12][24]
[查看演示][25]
### Hamburger Menu to Book Menu
![hamburger-menu-15][26]
[查看演示][27]
### Gooey Menu
![hamburger-menu-14][28]
[查看演示][29]
### The Hamburger Menu
![hamburger-menu-13][30]
[查看演示][31]
### Pure CSS Fullscreen Navigation Menu
![hamburger-menu-16][32]
[查看演示][33]### Pure CSS off-canvas menu with flexbox
![hamburger-menu-17][34]
[查看演示][35]
### Jumping Hamburger Menu Icon
![hamburger-menu-18][36]
[查看演示][37]
### Open Close
![hamburger-menu-19][38]
[查看演示][39]
### Hamburger Icon CSS3 ONLY Animation
![hamburger-menu-20][40]
[查看演示][41]
### Menu Toggle button with flat menu
![hamburger-menu-21][42]
[查看演示][43]
[0]: http://www.shejidaren.com/close-icon-menu.html
[1]: http://www.shejidaren.com/why-and-how-to-avoid-hamburger-menus.html
[2]: http://images.shejidaren.com/wp-content/uploads/2015/07/hamburger-menu-01.gif
[3]: http://codepen.io/mikedevelops/pen/oXPGoN
[4]: http://images.shejidaren.com/wp-content/uploads/2015/07/hamburger-menu-02.gif
[5]: http://codepen.io/CharlesSmart/pen/gbdaOa
[6]: http://images.shejidaren.com/wp-content/uploads/2015/07/hamburger-menu-03.gif
[7]: http://codepen.io/alcoven/full/JdoWdx/
[8]: http://images.shejidaren.com/wp-content/uploads/2015/07/hamburger-menu-06.gif
[9]: http://codepen.io/Zaku/full/vcaFr/
[10]: http://images.shejidaren.com/wp-content/uploads/2015/07/hamburger-menu-05.gif
[11]: http://codepen.io/rss/full/vIDKH/
[12]: http://images.shejidaren.com/wp-content/uploads/2015/07/hamburger-menu-04.gif
[13]: http://codepen.io/icutpeople/full/Kcxdp/
[14]: http://images.shejidaren.com/wp-content/uploads/2015/07/hamburger-menu-07.gif
[15]: http://codepen.io/arjancodes/full/jErbyM/
[16]: http://images.shejidaren.com/wp-content/uploads/2015/07/hamburger-menu-08.gif
[17]: http://codepen.io/designcouch/full/hyFAD/
[18]: http://images.shejidaren.com/wp-content/uploads/2015/07/hamburger-menu-09.gif
[19]: http://callmenick.com/_development/css-hamburger-menu-icons/
[20]: http://images.shejidaren.com/wp-content/uploads/2015/07/hamburger-menu-10.gif
[21]: https://github.com/mblode/burger
[22]: http://images.shejidaren.com/wp-content/uploads/2015/07/hamburger-menu-11.gif
[23]: http://codepen.io/GrahamWilsdon/full/OVoaNQ/
[24]: http://images.shejidaren.com/wp-content/uploads/2015/07/hamburger-menu-12.gif
[25]: http://codepen.io/Sergioandrade/full/onkub/
[26]: http://images.shejidaren.com/wp-content/uploads/2015/07/hamburger-menu-15.gif
[27]: http://codepen.io/haibnu/full/gpmmJx/
[28]: http://images.shejidaren.com/wp-content/uploads/2015/07/hamburger-menu-14.gif
[29]: http://codepen.io/lbebber/full/rawQKR/
[30]: http://images.shejidaren.com/wp-content/uploads/2015/07/hamburger-menu-13.gif
[31]: http://codepen.io/mblode/full/evjfn/
[32]: http://images.shejidaren.com/wp-content/uploads/2015/07/hamburger-menu-16.jpg
[33]: http://codepen.io/brenden/full/VLjKMQ/
[34]: http://images.shejidaren.com/wp-content/uploads/2015/07/hamburger-menu-17.jpg
[35]: http://codepen.io/zomigi/full/dmaCi/
[36]: http://images.shejidaren.com/wp-content/uploads/2015/07/hamburger-menu-18.gif
[37]: http://codepen.io/Jackthomsonn/full/rVaodQ/
[38]: http://images.shejidaren.com/wp-content/uploads/2015/07/hamburger-menu-19.jpg
[39]: http://codepen.io/vineethtr/full/VYRzaV/
[40]: http://images.shejidaren.com/wp-content/uploads/2015/07/hamburger-menu-20.gif
[41]: http://codepen.io/DawidKrajewski/full/GgErVO/
[42]: http://images.shejidaren.com/wp-content/uploads/2015/07/hamburger-menu-21.gif
[43]: http://codepen.io/CreativeJuiz/full/oCBxz/
[44]: http://shang.qq.com/wpa/qunwpa?idkey=cad1ed8c8b13fa53503d7307ba21c8308f1d157c6dd00d5d92e8a1dc1b48e1c7
[45]: http://www.shejidaren.com/tag/%25e6%25b1%2589%25e5%25a0%25a1%25e5%258c%2585%25e8%258f%259c%25e5%258d%2595
