How To Create Curtain Navigation Menu Using JavaScript

admin_img Posted By Bajarangi soft , Posted On 05-10-2020

In Java Script we can create curtain navigation menu so today we discuss how to create curtain navigation menu using java script

How To Create Curtain Navigation Menu Using JavaScript

Create a Curtain Menu
Step 1
: Create index.html and implement below code

<!-- The overlay -->
<div id="Nav" class="overlay">

    <!-- Button to close the overlay navigation -->
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>

    <!-- Overlay content -->
    <div class="overlay-content">
        <a href="#">About</a>
        <a href="#">Services</a>
        <a href="#">Clients</a>
        <a href="#">Contact</a>
    </div>

</div>

<!-- Use any element to open/show the overlay navigation menu -->
<span onclick="openNav()">open</span>


Step 2: Now implement CSS code to display side bar.
/* The Overlay (background) */
.overlay {
/* Height & width depends on how you want to reveal the overlay (see JS below) */
height: 100%;
width: 0;
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
background-color: rgb(0,0,0); /* Black fallback color */
background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
overflow-x: hidden; /* Disable horizontal scroll */
transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content {
position: relative;
top: 25%; /* 25% from the top */
width: 100%; /* 100% width */
text-align: center; /* Centered text/links */
margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

/* The navigation links inside the overlay */
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block; /* Display block instead of inline */
transition: 0.3s; /* Transition effects on hover (color) */
}

/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}

/* Position the close button (top right corner) */
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}

Step 3: Now Implement java script to slide bar 
/* Open when someone clicks on the span element */
function openNav() {
document.getElementById("Nav").style.width = "100%";
}

/* Close when someone clicks on the "x" symbol inside the overlay */
function closeNav() {
document.getElementById("Nav").style.width = "0%";
}
 

Complete Code For Creating Curtain Navigation Menu Using JavaScript

<!DOCTYPE html>
<html>
<head>
    <title>How To Create Collapsible Sidepanel Menu Using JavaScript</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<style>
    h1 {
        color: red;
        text-align: center;
    }

    body {
        font-family: 'Lato', sans-serif;
    }

    .myNav1 {
        height: 100%;
        width: 0;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: rgb(0, 0, 0);
        background-color: rgba(0, 0, 0, 0.9);
        overflow-x: hidden;
        transition: 0.5s;
    }

    .myNav1_content {
        position: relative;
        top: 25%;
        width: 100%;
        text-align: center;
        margin-top: 30px;
    }

    .myNav1 a {
        padding: 8px;
        text-decoration: none;
        font-size: 36px;
        color: #818181;
        display: block;
        transition: 0.3s;
    }

    .myNav1 a:hover, .myNav1 a:focus {
        color: #f1f1f1;
    }

    .myNav1 .closebtn {
        position: absolute;
        top: 20px;
        right: 45px;
        font-size: 60px;
    }

    @media screen and (max-height: 450px) {
        .myNav1 a {
            font-size: 20px
        }

        .myNav1 .closebtn {
            font-size: 40px;
            top: 15px;
            right: 35px;
        }
    }


    .myNav2 {
        height: 0%;
        width: 100%;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: rgb(0, 0, 0);
        background-color: rgba(0, 0, 0, 0.9);
        overflow-y: hidden;
        transition: 0.5s;
    }

    .myNav2_content {
        position: relative;
        top: 25%;
        width: 100%;
        text-align: center;
        margin-top: 30px;
    }

    .myNav2 a {
        padding: 8px;
        text-decoration: none;
        font-size: 36px;
        color: #818181;
        display: block;
        transition: 0.3s;
    }

    .myNav2 a:hover, .myNav2 a:focus {
        color: #f1f1f1;
    }

    .myNav2 .closebtn2 {
        position: absolute;
        top: 20px;
        right: 45px;
        font-size: 60px;
    }

    @media screen and (max-height: 450px) {
        .myNav2 {
            overflow-y: auto;
        }

        .myNav2 a {
            font-size: 20px
        }

        .myNav2 .closebtn2 {
            font-size: 40px;
            top: 15px;
            right: 35px;
        }
    }


    .myNav3 {
        height: 100%;
        width: 100%;
        display: none;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: rgb(0, 0, 0);
        background-color: rgba(0, 0, 0, 0.9);
    }

    .myNav3_content {
        position: relative;
        top: 25%;
        width: 100%;
        text-align: center;
        margin-top: 30px;
    }

    .myNav3 a {
        padding: 8px;
        text-decoration: none;
        font-size: 36px;
        color: #818181;
        display: block;
        transition: 0.3s;
    }

    .myNav3 a:hover, .myNav3 a:focus {
        color: #f1f1f1;
    }

    .myNav3 .closebtn {
        position: absolute;
        top: 20px;
        right: 45px;
        font-size: 60px;
    }

    @media screen and (max-height: 450px) {
        .myNav3 a {
            font-size: 20px
        }

        .myNav3 .closebtn {
            font-size: 40px;
            top: 15px;
            right: 35px;
        }
    }
</style>
<body>
<div class="container">
    <br>
    <br>
    <br>
    <div class="text-center">
        <h1>How To Create Curtain Navigation Menu Using JavaScript</h1>
    </div>

    <div class="well">
        <button style="font-size:30px;cursor:pointer" class="btn btn-info" onclick="openNav1()">&#9776; Right side bar
        </button>
        <button style="font-size:30px;cursor:pointer" class="btn btn-info" onclick="openNav2()">&#9776; slide Down
        </button>
        <button style="font-size:30px;cursor:pointer" class="btn btn-info" onclick="openNav3()">&#9776; Show(Without
            Animation)
        </button>
    </div>

    <!--    first menu-->

    <div id="myNav1" class="overlay myNav1">
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav1()">&times;</a>
        <div class="overlay-content myNav1_content">
            <a href="#">About</a>
            <a href="#">Services</a>
            <a href="#">Clients</a>
            <a href="#">Contact</a>
        </div>
    </div>
    <!--second menu-->
    <div id="myNav2" class="overlay myNav2">
        <a href="javascript:void(0)" class="closebtn2" onclick="closeNav2()">&times;</a>
        <div class="overlay-content myNav2_content">
            <a href="#">About</a>
            <a href="#">Services</a>
            <a href="#">Clients</a>
            <a href="#">Contact</a>
        </div>
    </div>
    <!--third menu-->
    <div id="myNav3" class="overlay myNav3">
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav3()">&times;</a>
        <div class="overlay-content myNav3_content">
            <a href="#">About</a>
            <a href="#">Services</a>
            <a href="#">Clients</a>
            <a href="#">Contact</a>
        </div>
    </div>

    <div>
</body>
</html>
<script>
    function openNav1() {
        document.getElementById("myNav1").style.width = "100%";
    }

    function closeNav1() {
        document.getElementById("myNav1").style.width = "0%";
    }

    function openNav2() {
        document.getElementById("myNav2").style.height = "100%";
    }

    function closeNav2() {
        document.getElementById("myNav2").style.height = "0%";
    }

    function openNav3() {
        document.getElementById("myNav3").style.display = "block";
    }

    function closeNav3() {
        document.getElementById("myNav3").style.display = "none";
    }
</script>

 

Related Post