Today we will be looking at some hamburger menu CSS design inspiration, here are a few that I really like.
Hamburger Menu To Sidebar - Codepen
Hamburger Button To Doughnut Menu Animation - Codepen
Hamburger Menu Icon To MENU Text - Codepen
Simple Hamburger Menu To X Mark Animation - Codepen
Slide In Nav Menu With Off-Trigger Area - Codepen
Pure CSS Hamburger Menu Slide Out Sidebar - Codepen
Star Wars Lightsaber Hamburger Menu Icon - Codepen
Top comments (7)
The Star Wars one looks amazing!!
I had a bug where the menu links were clickable even tho the menu was closed. you can just hover above the area where links are when menu is closed and cursor will turn to pointer and it will redirect you if you click on it sooooo
to avoid this just add visibility: hidden; to your ul in scss and in input:checked + menu + ul just put it back to visible. so only when hamburger menu is clicked ul will turn back to visible.
Love the Star Wars one!
Greatπ
The first one is nice and fancy, but it's a very bad idea to use on any site.
Like who wants to wait 2 seconds for the menu to open and close?
I like the second one the most, that's really cool.
I was hoping one of them would be made to look like an actual hamburger.
I think I am on the right place.
DEV.TO is the BEST community.
I was going to say that the Star wars is F*CKING awesome and saw the two previous comments saying the same :D