Home
Krishna Gudpalle
Hamburger menu button with open/close animation

Hamburger menu button with open/close animation

Open and close animation onclick
requires alpineJs

This tailwind example is contributed by Krishna Gudpalle, on 17-Sep-2022. Component is made with Tailwind CSS v3. It is responsive.

Tags: Button Menu

Author
Krishna Gudpalle

3.3k

Fork Fullscreen

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"></script>
<div class="min-h-screen bg-gray-100 flex flex-col justify-center">
    <div class="relative py-3 sm:max-w-xl mx-auto">
        <nav x-data="{ open: false }">
            <button class="w-14 h-14 relative focus:outline-none bg-teal-600 rounded" @click="open = !open">
                <div class="block w-5 absolute left-6 top-1/2   transform  -translate-x-1/2 -translate-y-1/2">
                    <span  class="block absolute h-0.5 w-7 text-white bg-current transform transition duration-500 ease-in-out" :class="{'rotate-45': open,' -translate-y-1.5': !open }"></span>
                    <span  class="block absolute  h-0.5 w-5 text-white bg-current   transform transition duration-500 ease-in-out" :class="{'opacity-0': open } "></span>
                    <span  class="block absolute  h-0.5 w-7 text-white bg-current transform  transition duration-500 ease-in-out" :class="{'-rotate-45': open, ' translate-y-1.5': !open}"></span>
                </div>
            </button>
        </nav>
    </div>
</div>

Be the first one

Related examples

Hamburger menu button with hover effect

Author:
Amar

7 months ago
Button group
Add active class to clicked button using JavaScript

Author:
TailwindFlex

1 year ago
Simple Pagination

Author:
Manuela Bianka

1 year ago
Call to action buttons

Author:
Manuela Bianka

1 year ago
Dismissible Buttons

Author:
Manon Daniel

1 year ago
Button with loading

Author:
Prem..

1 year ago
Button Group

Author:
Prem..

1 year ago
Call to Action (for app stores)
Download app section with Playstore and Appstore button

Author:
Ron Hicks

1 year ago
Buttons with border bottom

Author:
Prashant

1 year ago
Fancy leaf like button

Author:
Amar

11 months ago
Buttons with Icon

Author:
Amar

1 year ago
Sign in with boogle button

Author:
Conan Hilton

1 year ago

Explore components by Tags

Didn't find component you were looking for?

Search from 950+ componenent

TailwindFlex.com

Tailwindflex.com is a free tailwind examples library. It's a one-stop destination for ready-made tailwind examples.

Contact

Email:

admin@tailwindflex.com

Links

All tags All Components Tailwind Playground

© 2023 TailwindFlex. All Rights Reserved.

Hosted on Hostinger