3D Navigation Bar with HTML, CSS, and JavaScript
In this tutorial I am going to create a 3D Navigation Bar with HTML, CSS, and JavaScript. In the realm of web development, the navigation bar is a pivotal element that guides users through the website’s journey. It’s not just a functional component but also an integral part of the website’s design and user experience. With the advent of modern web technologies, developers have been pushing the boundaries of creativity and interactivity, leading to the emergence of 3D navigation bars that add a new dimension to web interfaces.
A 3D navigation bar can provide a visually engaging experience for users, making the interaction with the website more intuitive and enjoyable. To create such a navigation bar, a combination of HTML, CSS, and JavaScript is employed. HTML lays the foundation with the structure, CSS adds the styling and animations, and JavaScript brings the bar to life with interactive features.
The process begins with defining the HTML structure, which includes the navigation container and the menu items. Each item is linked to a section of the webpage, allowing users to jump to the desired content with ease. The CSS then steps in to style these elements, using transformations and perspective to create the 3D effect. Properties such as transform: rotateY() and perspective can be used to give the illusion of depth and space.
JavaScript’s role is to handle the user interactions, such as clicks and hovers, to trigger the animations and transitions. With event listeners, the navigation bar can respond to user input, unfolding the 3D effects smoothly and cohesively. Libraries or frameworks are not necessary, as modern JavaScript is powerful enough to handle these tasks, keeping the website lightweight and fast.
The beauty of creating a 3D navigation bar lies in the details. Subtle shadows, gradients, and transitions can make the navigation bar not just a tool, but a feature that stands out. It’s an opportunity for developers to showcase their skills and for websites to differentiate themselves in a crowded digital space.
HTML and JavaScript
<!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</title>
</head>
<body>
<div class="container">
<div class="navbar">
<div class="menu">
<h3 class="logo">Techmidpoint</h3>
<div class="hamburger-menu">
<div class="bar"></div>
</div>
</div>
</div>
<div class="main-container">
<div class="main">
<header>
</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>
const hamburger_menu = document.querySelector(".hamburger-menu");
const container = document.querySelector(".container");
hamburger_menu.addEventListener("click", () => {
container.classList.toggle("active");
})
</script>
</body>
</html>
CSS
* {
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("bg.jpg") no-repeat top center / cover;
position: relative;
}
.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;
}
For More Tutorials Please Click Here
