Curtain Menu Classes

Bellow is a Demonstration of How Curtain Menu Classes Works

How the Curtain Menu Works


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

  2. The div with the class "curtain" and the ID "curtainMenu" remains hidden until the menu button is clicked.

  3. You can customize the content inside the "curtain" 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 button at the top right of this page to trigger the curtain effect!


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


<button class="menu-toggle" id="menuToggle">Menu</button>

<div class="curtain" id="curtainMenu">
<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>