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 02-Aug-2022. Component is made with Tailwind CSS v3. It is responsive.

Button Menu

Author Krishna Gudpalle

13.6k

4

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>

Related Examples

Menu button

Author:
Freja Jensen

1 year ago

10.3k
Hamburger menu button with hover effect

Author:
_Amar_

1 year ago

12.8k
MobileMenu
Mobile Menu + AlpineJs

Author:
Maxim Alex

3 months ago

1.9k
Confirm and cancel buttons

Author:
Samuel Dawson

1 year ago

11.5k
Switch tabs button

Author:
gmer33

1 year ago

9.8k
Floating buttons examples
Bottom-Right Corner, Bottom-Left Corner, Top-Left Corner, Top-Right Corner, Center, Bottom-Center

Author:
Livia Flores

1 year ago

14.3k
3D button with hover effect!

Author:
Laurits

1 year ago

10k
Back to top button

Author:
Rafferty Kim

1 year ago

11.2k
Tab Menu
Tab menu

Author:
samuel abera

1 month ago

703
Border bottom button

Author:
Santos78

1 year ago

9.8k
Button group
Add active class to clicked button using JavaScript

Author:
TailwindFlex

1 year ago

8k
Background gradient changing button
Automatic and continuously gradient-changing button. Cyclic color changing button.

Author:
Ingrid Schulz

7 months ago

6.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 1200+ 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

FAQs Tailwind Playground

© 2024 TailwindFlex. All Rights Reserved.

v1.4