Responsive Top Navigation Menu in JavaScript

Hello Dev,

Today, i we will show you responsive top navigation menu in JavaScript. This article will give you simple example of responsive top navigation menu in JavaScript. you will learn responsive top navigation menu in JavaScript. So let’s follow few step to create example of responsive top navigation menu in JavaScript.

Example:-

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Responsive Top Navigation Menu - codeplaners</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> 
<style>
.menu-btn {
	position: absolute;
	z-index: 3;
	right: 35px;
	top: 35px;
	cursor: pointer;
	transition: all 0.5s ease-out;
}
.menu-btn .btn-line {
	width: 28px;
	height: 3px;
	margin: 0 0 5px 0;
	background: black;
	transition: all 0.5s ease-out;
}
.menu-btn.close {
	transform: rotate(180deg);
}
.menu-btn.close .btn-line:nth-child(1) {
	transform: rotate(45deg) translate(5px, 5px);
}

.menu-btn.close .btn-line:nth-child(2) {
	opacity: 0;
}

.menu-btn.close .btn-line:nth-child(3) {
	transform: rotate(-45deg) translate(7px, -6px);
}
.menu {
	position: fixed;
	top: 0;
	width: 100%;
	opacity: 0.9;
	visibility: hidden;
}
.menu.show {
	visibility: visible;
}
.nav-item:nth-child(1) {
	transition-delay: 0.1s;
}
.nav-item:nth-child(2) {
	transition-delay: 0.2s;
}
.nav-item:nth-child(3) {
	transition-delay: 0.3s;
}
.nav-item:nth-child(4) {
	transition-delay: 0.4s;
}
</style>
</head>
  
<body id="bg-img">
    <header>
        <div class="menu-btn">
            <div class="btn-line"></div>
            <div class="btn-line"></div>
            <div class="btn-line"></div>
        </div>
        <nav class="menu">
            <div class="">
                <div class="portrait">
                    <img src="https://codeplaners.com/wp-content/uploads/2020/09/cropped-favicon-social-192x192.png"alt="" />
                </div>
            </div>
            <ul class="menu-nav">
                <li class="nav-item current"><a href="#" class="nav-link">HOME</a></li>
                <li class="nav-item"><a href="#" class="nav-link">ABOUT US</a></li>
                <li class="nav-item"><a href="#" class="nav-link">MY WORK</a></li>
                <li class="nav-item"><a href="#" class="nav-link">CONTACT US</a></li>
            </ul>
        </nav>
    </header>
  
    <script>
        const menuBtn = document.querySelector(".menu-btn");
        const menu = document.querySelector(".menu");
        // Set the initial state of the menu
        let showMenu = false;
        menuBtn.addEventListener("click", toggleMenu);
  
        function toggleMenu() {
            if (!showMenu) {
                menuBtn.classList.add("close");
                menu.classList.add("show");

                // Reset the menu state
                showMenu = true;
            } else {
                menuBtn.classList.remove("close");
                menu.classList.remove("show");
                // Reset the menu state
                showMenu = false;
            }
        }
    </script>
</body>
  
</html>

Responsive Top Navigation Menu in JavaScript

Recommended Posts

Random Post