Accordion Menu Classes

Below is a Demonstration of How Accordion Menu Classes Works

How the Accordion Menu Works


  1. The top line contains a button that triggers the dropdown.

  2. The div with the class "accord-content" remains hidden until the menu button is clicked.

  3. You can customize the content inside the "accord-content" div based on your navigation needs.

  4. The last section is the "content" div, where you place your website content—whatever that may be.


Please Click on the Menu button above to trigger the dropdown effect!


All you need to use this Animation is this html document.


<button class="accord border-0 bg039 white p-10 wp-100 rounded text-sm">Menu</button>
<div class="accord-content bg039">
<ul class="menu-items">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

<div class="content">
<h1>Welcome to Our Website</h1>
<p>This is where your contents will be.</p>
</div>