Animated 3D Navigation Menu Bar using HTML, CSS & JavaScript

 

Animated 3D Navigation Menu Bar using HTML, CSS & JavaScript
Hello developers, today in this blog, you'll learn to create an Animated 3D Navigation Menu Bar using HTML, CSS & JavaScript.

The navigation bar is a user interface element within a webpage that contains links to other sections of the webpage. This means that no matter what page you are viewing, you can use the navigation bar to visit other sections of the website.

In this blog(Animated 3D Navigation Menu Bar), there is a webpage with a navigation bar. On the right top of the webpage, there are three bars by clicking on that bar, it will display you a 3D navigation menu bar. There is also a cross icon or a close symbol to close the navigation bar. The navigation bar is made to be fixed.

The source code of this Animated 3D Navigation Menu Bar is given below, if you want the source code of this program, you can copy it. You can use this Animated 3D Navigation Menu Bar on your project.

Animated 3D Navigation Menu Bar [Source Code]

To make this website, you would like to make three files: an HTML file, a CSS file & a JavaScript file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="style.css"> <title>Animated 3D Navigation Menu Bar|| Learningrobo</title> </head> <body> <div class="container"> <div class="navbar"> <div class="menu"> <h3 class="logo">Learningrobo</h3> <div class="hamburger-menu"> <div class="bar"></div> </div> </div> </div> <div class="main-container"> <div class="main"> <header> <div class="overlay"> <h2 class="title">LEARNING ROBO</h2> <p class="description">Programming Blog</p> <div class="credit">Made with <span style="color:tomato">❤</span> by <a href="https://www.learningrobo.com/">Learning Robo</a></div> </div> </header> </div> </div> <div class="links"> <ul> <li class="active"> <a href="#" style="--i: 0.05s">Home</a> </li> <li> <a href="#" style="--i: 0.1s">About</a> </li> <li> <a href="#" style="--i: 0.15s">Blog</a> </li> <li> <a href="#" style="--i: 0.2s">Service</a> </li> <li> <a href="#" style="--i: 0.25s">Contact</a> </li> </ul> </div> </div> <script type="text/javascript" src="script.js"></script> </body> </html>
CSS provides style to an HTML page. To make the page attractive, create a CSS file with the name style.css, and remember that you have to make a file with a .css extension.


* {
	 padding: 0;
	 margin: 0;
	 box-sizing: border-box;
}
 body {
	 font-family: 'Recursive', sans-serif;
	 overflow: hidden;
}
 .container {
	 max-height: 100vh;
	 width: 100%;
	 background: #000b10;
	 transform-style: preserve-3d;
	 overflow: hidden;
}
 .navbar {
	 position: fixed;
	 top: 0;
	 left: 0;
	 width: 100%;
	 z-index: 10;
	 height: 5rem;
}
 .menu {
	 max-width: 72rem;
	 width: 100%;
	 height: 100%;
	 margin: 0 auto;
	 padding: 0 2rem;
	 display: flex;
	 justify-content: space-between;
	 align-items: center;
}
 .logo {
	 font-size: 1.8rem;
	 font-weight: 600;
	 letter-spacing: 2px;
	 line-height: 4rem;
	 margin-top: 20px;
	 color: #fee715ff;
}
 .hamburger-menu {
	 height: 4rem;
	 width: 3rem;
	 cursor: pointer;
	 display: flex;
	 align-items: center;
	 justify-content: flex-end;
}
 .bar {
	 width: 1.9rem;
	 height: 1.5px;
	 border-radius: 2px;
	 background-color: #eee;
	 transition: 0.5s;
	 position: relative;
}
 .bar::before, .bar::after {
	 content: "";
	 position: absolute;
	 width: inherit;
	 height: inherit;
	 background-color: #eee;
	 transition: 0.5s;
}
 .bar::before {
	 transform: translateY(-9px);
}
 .bar::after {
	 transform: translateY(9px);
}
 
 .main {
	 position: relative;
	 width: 100%;
	 left: 0;
	 z-index: 5;
	 overflow: hidden;
	 transform-origin: left;
	 transform-style: preserve-3d;
	 transition: 0.5s;
}
 header {
	 min-height: 100vh;
	 width: 100%;
	 background: url("https://cdn.pixabay.com/photo/2018/08/14/07/06/landscape-3604825__340.jpg") no-repeat top center / cover;
	 position: relative;
}
 .overlay {
	 position: absolute;
	 width: 100%;
	 height: 100%;
	 top: 0;
	 left: 0;
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 flex-direction: column;
}
 .title {
	 font-size: 3rem;
}
 .description {
	 margin: 10px 0;
	 text-align: center;
	 width: 50%;
	 font-size: 1.5rem;
	 color: #fff;
}
 .container.active .bar {
	 transform: rotate(360deg);
	 background-color: transparent;
}
 .container.active .bar::before {
	 transform: translateY(0) rotate(45deg);
}
 .container.active .bar::after {
	 transform: translateY(0) rotate(-45deg);
}
 .container.active .main {
	 animation: main-animation 0.5s ease;
	 cursor: pointer;
	 transform: perspective(1300px) rotateY(20deg) translateY(10px) translateZ(310px) scale(0.5);
}
 
 .links {
	 position: absolute;
	 width: 30%;
	 right: 0;
	 top: 0;
	 height: 100vh;
	 z-index: 2;
	 overflow: hidden;
	 display: flex;
	 justify-content: flex-start;
	 align-items: center;
	 margin-left: 10px;
}
 ul {
	 list-style: none;
}
 ul li.active a {
	 color: #58cced;
}
 .links a {
	 text-decoration: none;
	 color: #eee;
	 padding: 0.7rem 0;
	 display: inline-block;
	 font-size: 1.8rem;
	 font-weight: 300;
	 text-transform: uppercase;
	 letter-spacing: 1px;
	 transition: 0.3s;
	 opacity: 0;
	 transform: translateY(10px);
	 animation: hide 0.5s forwards ease;
}
 .links a:hover {
	 color: #58cced;
}
 .container.active .links a {
	 animation: appear 0.5s forwards ease var(--i);
}
 @keyframes appear {
	 from {
		 opacity: 0;
		 transform: translateY(10px);
	}
	 to {
		 opacity: 1;
		 transform: translateY(0px);
	}
}
 @keyframes hide {
	 from {
		 opacity: 1;
		 transform: translateY(0px);
	}
	 to {
		 opacity: 0;
		 transform: translateY(10px);
	}
}
.credit{
    text-align: center;
    color: #fff;
    margin-top: 10px;
    font-size: 18px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.credit a{
    text-decoration: none;
    color:#fff;
    font-weight: bold;
} 
JavaScript makes the page work functionally. At last, create a JavaScript file with the name of script.js, and remember that you've got to make a file with a .js extension.


const hamburger_menu = document.querySelector(".hamburger-menu");
const container = document.querySelector(".container");
hamburger_menu.addEventListener("click", () => {
    container.classList.toggle("active");
})
We hope you will like this Animated 3D Navigation Menu Bar using HTML, CSS & JavaScript.

Thank you for reading our blog. If you face any problem creating this Animated 3D Navigation Menu Bar using HTML, CSS & JavaScript, then contact us or comment us. We'll try to provide a solution to your problem as soon as possible.

Thank you
Learning robo team

Post a Comment

Thank you
Learning robo team

Post a Comment (0)

Previous Post Next Post
Learning Robo says...
code copied
Welcome
OnlineEditor
HTMLTools