Skip to content

Instantly share code, notes, and snippets.

@moladukes

moladukes/lean-burger.html

Last active April 27, 2022 18:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save moladukes/457348b4def656b9ed37c659af1095cf to your computer and use it in GitHub Desktop.
Save moladukes/457348b4def656b9ed37c659af1095cf to your computer and use it in GitHub Desktop.
Download ZIP
Lean Burger Menu using Tailwind
Raw
lean-burger.html
<!-- Uses group-hover for demo but could be toggled with an .active class, :group-active, or inline using your favorite js flavor -->
<button class="group text-white w-10 h-10 relative focus:outline-none bg-blue-500 rounded-md">
<div class="block w-7 absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
<hr aria-hidden="true" class="block absolute h-0.5 w-7 bg-current transform transition duration-500 ease-in-out -translate-y-2 group-hover:rotate-45 group-hover:-translate-y-0">
<hr aria-hidden="true" class="block absolute h-0.5 w-7 bg-current transform transition duration-500 ease-in-out group-hover:opacity-0">
<hr aria-hidden="true" class="block absolute h-0.5 w-7 bg-current transform transition duration-500 ease-in-out translate-y-2 group-hover:-rotate-45 group-hover:-translate-y-0">
</div>
</button>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment