Create a Curtain Menu using HTML and CSS

Last Updated : 04 Dec, 2023

This article will show you how to create a Curtain menu navbar effect with the help of HTML and CSS. The curtain menu means revealing or pulling down the menu items like a curtain.

HTML is used to create the structure of the curtain menu and applies styles on that element to make like curtain menu effect. Also, we will add a close button to the corner.

Example 1: Here, we create a pull-down curtain menu.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <title>
        Create a Curtain Menu with HTML and CSS
    </title>

    <style>
        .curtain-menu {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 0;
            background-color: #4b8b01;
            overflow: hidden;
            transition: 0.5s;
        }

        .curtain-menu a {
            display: block;
            color: white;
            text-align: center;
            padding: 15px;
            text-decoration: none;
            font-size: 18px;
        }

        .curtain-menu a:hover {
            background-color: #2a93d5;
        }

        .menu-button {
            font-size: 24px;
            cursor: pointer;
            position: fixed;
            top: 20px;
            left: 20px;
            z-index: 1;
            color: white;
            background-color: #4b8b01;
            border: none;
            padding: 10px;
            border-radius: 5px;
        }

        .menu-button:hover {
            background-color: #2a93d5;
        }

        .close-button {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 18px;
            color: white;
            background-color: #4b8b01;
            border: none;
            padding: 5px 10px;
            border-radius: 5px;
            cursor: pointer;
        }

        .close-button:hover {
            background-color: #2a93d5;
        }

        .menu-open {
            height: 100vh;
        }

        h1 {
            text-align: center;
        }
    </style>
</head>

<body>
    <button class="menu-button" 
        onclick="toggleCurtain()">
        &#9776; Menu
    </button>

    <div class="curtain-menu" id="curtainMenu">
        <button class="close-button" 
            onclick="toggleCurtain()">
            &#10006; Close
        </button>
        
        <a href="#" onclick="toggleCurtain()">Home</a>
        <a href="#" onclick="toggleCurtain()">About</a>
        <a href="#" onclick="toggleCurtain()">Users</a>
        <a href="#" onclick="toggleCurtain()">Contact</a>
    </div>

    <h1>Welcome to GeeksforGeeks</h1>
    
    <script>
        function toggleCurtain() {
            var curtainMenu = document.getElementById("curtainMenu");
            curtainMenu.classList.toggle("menu-open");
        }
    </script>

</body>

</html>

Output:

Example 2: Here, we create a Horizontal Curtain Menu.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <title>Horizontal Curtain Menu</title>

    <style>
        .curtain-menu {
            position: fixed;
             top: 0;
              left: 0;
            width: 0;
            height: 100%;
            background-color: #4b8b01;
            overflow: hidden;
            transition: 0.5s;
        }

        .curtain-menu a {
            display: block;
            color: white;
            text-align: center;
            padding: 15px;
            text-decoration: none;
            font-size: 18px;
        }

        .curtain-menu a:hover {
            background-color: #2a93d5;
        }

        .menu-button {
            font-size: 24px;
            cursor: pointer;
            position: fixed;
            top: 20px;
            left: 20px;
            z-index: 1;
            color: white;
            background-color: #4b8b01;
            border: none;
            padding: 10px;
            border-radius: 5px;
        }

        .menu-button:hover {
            background-color: #2a93d5;
        }

        .close-button {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 18px;
            color: white;
            background-color: #4b8b01;
            border: none;
            padding: 5px 10px;
            border-radius: 5px;
            cursor: pointer;
        }

        .close-button:hover {
            background-color: #2a93d5;
        }

        .menu-open {
            width: 100%;
        }

        h1 {
            text-align: center;
        }
    </style>
</head>

<body>
    <button class="menu-button" 
        onclick="toggleCurtain()">
        &#9776; Menu
    </button>

    <div class="curtain-menu" 
        id="curtainMenu">
        <button class="close-button" 
            onclick="toggleCurtain()">
            &#10006; Close
        </button>
        <a href="#" onclick="toggleCurtain()">
            Home
        </a>
        <a href="#" onclick="toggleCurtain()">
            About
        </a>
        <a href="#" onclick="toggleCurtain()">
            Users
        </a>
        <a href="#" onclick="toggleCurtain()">
            Contact
        </a>
    </div>

    <h1>Welcome to GeeksforGeeks</h1>

    <script>
        function toggleCurtain() {
            var curtainMenu = 
                document.getElementById("curtainMenu");
            curtainMenu.classList.toggle("menu-open");
        }
    </script>
</body>

</html>

Output:

How to Create a Search Bar using HTML and CSS

vkash8574

Improve

Article Tags :

Create a Curtain Menu using HTML and CSS

Similar Reads

Thank You!

What kind of Experience do you want to share?