Responsive Navigation Bar JavaScript
In this article, you will be exploring how to create a responsive navigation menu bar using HTML CSS and JS. By using a responsive navbar, we'll be able to increase the usability of our menu regardless of screen size.
The responsive navigation bar plays a key to a website and for visitors to concentrate or navigate the whole website easily also saves the screen area on small devices and enhances the website UI.
It has added a little touch of animation, and the elegant mobile menu button with a hover effect created with CSS border property and no external icon or image is used.
This responsive navigation menu is a great way to add a bit of extra pizzazz to your website or blog, and it can be easily customized using HTML and CSS. If you're looking to increase the usability of your website or blog, then be sure to check out this video!
Watch the Tutorial on Youtube
https://youtu.be/aTL1lXqSUvY
Live Preview.!
HTML Code
<div class="container">
<nav class="navbar">
<div class="logo">
<a href="#">Web<span>Tuttorials</span></a>
</div>
<div class="menu">
<div class="toggle-btn">
<span class="toggle-bar"></span>
<span class="toggle-bar"></span>
<span class="toggle-bar"></span>
</div>
<ul class="menu-list mobile-menu close">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
</div>
CSS Code
:root{
--primaryColor: #003566;
--secondaryColor: #FFFCF2;
--helperColor: #EB5E28;
}
*{
margin: 0;
box-sizing: border-box;
font-family: sans-serif;
}
div.container{
padding-inline: 15px;
background: linear-gradient(to right, var(--primaryColor) 30%, var(--helperColor));
}
nav.navbar{
width: 100%;
max-width: 1200px;
height: 60px;
margin-inline: auto;
display: flex;
justify-content: space-between;
align-items: center;
}
div.logo a{
color: var(--secondaryColor);
font-size: 28px;
font-weight: bold;
text-decoration: none;
}
div.logo a span{
color: var(--helperColor);
font-size: 24px;
}
div.menu{
position: relative;
}
ul.menu-list{
list-style: none;
display: flex;
}
ul.menu-list li{
padding-inline: 15px;
}
ul.menu-list li a{
color: var(--secondaryColor);
font-size: 18px;
text-decoration: none;
}
ul.menu-list li a span{ /*create and use this in javascript*/
display: inline-block;
transform: rotateX(0deg);
transform-style: preserve-3d;
perspective: 400px;
}
@keyframes chrAnimation {/*use in javascript*/
0%{
transform: rotateX(0deg);
}
100%{
transform: rotateX(360deg);
}
}
/*Toggle button*/
div.toggle-btn{
width: 25px;
height: 25px;
position: relative;
cursor: pointer;
display: none;
}
div.toggle-btn span.toggle-bar{
width: 0;
height: 0;
position: absolute;
}
div.toggle-btn span.toggle-bar:nth-child(1){
border-top: 25px solid var(--secondaryColor);
border-right: 15px solid transparent;
border-bottom: 0 solid transparent;
left: 0;
top: 0;
}
div.toggle-btn span.toggle-bar:nth-child(2){
width: 2px;
height: 100%;
display: block;
background-color: var(--secondaryColor);
left: 50%;
transform: translateX(-70%) rotate(32deg);
transition: 0.5s ease;
}
div.toggle-btn:hover span.toggle-bar:nth-child(2){
transform: translateX(-70%) rotate(90deg);
}
div.toggle-btn span.toggle-bar:nth-child(3){
border-top: 0 solid transparent;
border-left: 15px solid transparent;
border-bottom: 25px solid var(--secondaryColor);
right: 0;
bottom: 0;
}
@media screen and (max-width: 768px){
div.toggle-btn{
display: block;
}
ul.menu-list.mobile-menu{
width: max-content;
min-width: 180px;
position: absolute;
display: block;
right: 0;
top: 100%;
transform: translateY(-100%);
padding: 15px;
background: linear-gradient(to top, var(--primaryColor) 50%, var(--helperColor));
z-index: -1;
}
ul.menu-list.mobile-menu li{
padding: 15px;
}
ul.menu-list.mobile-menu.open{ /*use with javascript*/
visibility: visible;
opacity: 1;
transform: translateY(17px);
}
ul.menu-list.mobile-menu.close{ /*use with javascript*/
visibility: hidden;
opacity: 0;
transform: translateY(-100%);
}
}
@media screen and (max-width: 580px){
ul.menu-list.mobile-menu{
width: 100vw;
height: calc(100vh - 60px);
right: -15px;
}
ul.menu-list.mobile-menu li{
text-align: center;
padding: 30px 15px;
}
}
JavaScript Code
// HOVER EFFECT
const menuItems = document.querySelectorAll('ul.menu-list li a');
window.addEventListener('load', function(){
menuItems.forEach((item) => {
const itemText = item.textContent;
var chrArray = [];
for (var i = 0; i < itemText.length; i++) {
let newItem = `${itemText.charAt(i)}`;
chrArray.push(newItem);
}
item.innerHTML = chrArray.join('');
})
})
menuItems.forEach((item) => {
item.addEventListener('mouseenter', function(e){
let currentItem = e.target;
for (var i = 0; i < currentItem.children.length; i++) {
currentItem.children[i].style.animation = 'chrAnimation 0.5s ease-out 0.${i+1}s forwards';
}
})
item.addEventListener('mouseleave', function(e){
let currentItem = e.target;
for (var i = 0; i < currentItem.children.length; i++) {
currentItem.children[i].style.animation = `none`;
}
})
})
// Toggle Mobile Menu
const mobileMenu = document.querySelector('ul.menu-list.mobile-menu');
const toggleBtn = document.querySelector('div.toggle-btn');
window.addEventListener('resize', function(){
mobileMenu.style.transition = 'none';
})
toggleBtn.addEventListener('click', function(){
mobileMenu.style.transition = '0.5s ease';
if(mobileMenu.classList.contains('close')){
this.children[1].style.transform = 'translateX(-70%) rotate(90deg)';
mobileMenu.classList.remove('close');
mobileMenu.classList.add('open');
}
else{
this.children[1].style.transform = 'translateX(-70%) rotate(32deg)';
mobileMenu.classList.remove('open');
mobileMenu.classList.add('close');
}
})
0 Comments