Fullscreen Animated Navigation Menu
In this article, I'll show you how to create a Fullscreen Overlay Navigation Menu using HTML CSS and JS. This menu can be used on any web page, and it's responsive so it'll resize to fit any screen size.
Also, I have used CSS keyframes animation for the toggle button.
This tutorial is perfect if you're looking to add a touch of class to your website or blog.
Watch Video Tutorial
https://youtu.be/CPYQetEpjXU
Live Preview.!
HTML Code
<nav class="hide">
<div class="navbar">
<div class="navbar-menu-items">
<div class="brand">
<div class="logo">Web<span>Tutorials</span></div>
<div class="social">
<a href="#">Facebook</a>
<a href="#">Twitter</a>
<a href="#">Instagram</a>
</div>
</div>
<div class="toggle-menu">
<span class="toggle-bar"></span>
<span class="toggle-bar"></span>
<span class="toggle-bar"></span>
</div>
</div>
<ul class="menu">
<li style="--i:'Home';">
<a href="#">Home</a>
</li>
<li style="--i:'About';">
<a href="#">About</a>
</li>
<li style="--i:'Services';">
<a href="#">Services</a>
</li>
<li style="--i:'Contact';">
<a href="#">Contact</a>
</li>
</ul>
</div>
</nav>
CSS Code
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:wght@400;700&display=swap');
/* Variables */
:root{
/* Image by starline on Freepik */
--bg-img: url('https://img.freepik.com/free-vector/abstract-organic-lines-background_1017-26669.jpg');
/* Colors */
--primary-color: #fff;
--secondry-color: #111;
--bg-color: #282923;
/* Fixed Width */
--navbar-width: 1040px;
}
*{
font-family: 'Noto Serif', serif;
font-size: 16px;
padding: 0;
margin: 0;
box-sizing: border-box;
}
nav{
width: 100%;
height: 10vh; /*later this will be 10vh*/
background: var(--bg-color) var(--bg-img) no-repeat;
background-size: cover;
background-position: center center;
background-blend-mode: multiply;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
z-index: 5;
}
nav:before,
nav:after{
content: '';
width: 1px;
height: 100%;
background-color: var(--secondry-color);
position: absolute;
top: 0;
transform: translate(-25%);
z-index: -1;
}
nav:before{
left: 25%;
}
nav:after{
right: 25%;
}
nav .navbar{
width: 100%;
max-width: var(--navbar-width);
height: 100%;
margin: 0 auto;
padding-block: 15px;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
nav .navbar-menu-items{
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
nav .brand{
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
nav .logo{
color: var(--primary-color);
font-size: 24px;
font-weight: bold;
}
nav .logo span{
color: #f44336;
font-size: 24px;
}
nav .social a{
color: var(--primary-color);
font-size: 14px;
padding-inline: 5px;
text-decoration: none;
transition: 0.5s ease 1s;
}
nav .toggle-menu{
width: 30px;
height: 18px;
margin-top: 8px;
cursor: pointer;
position: relative;
}
nav .toggle-bar{
width: 100%;
height: 1px;
background-color: var(--secondry-color);
box-shadow: 0 0 1px 0px var(--primary-color);
position: absolute;
}
nav .toggle-bar:nth-child(2){
top: 50%;
transition: 0.3s ease 0.1s;
}
nav .toggle-bar:nth-child(3){
width: 80%;
top: 100%;
transition: 0.3s ease 0.2s;
}
nav .toggle-menu:hover .toggle-bar,
nav.show .toggle-menu .toggle-bar{
box-shadow: 0 0 1px 1px var(--primary-color);
}
@keyframes barsAnimation { /*will use in javascript*/
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(-10deg);
}
}
nav .menu{
list-style: none;
display: flex;
flex-direction: column;
margin-top: 80px;
transition: 0.5s ease 0.5s;
}
nav .menu li{
margin-bottom: 20px;
position: relative;
}
nav .menu li:before{
content: '';
width: calc(var(--navbar-width) / 2 / 2);
height: 2px;
background-color: var(--primary-color);
position: absolute;
right: 100%;
top: 50%;
transform: scaleX(0);
transform-origin: right;
transition: 0.3s ease;
}
nav .menu li:after{
content: var(--i);
font-size: 80px;
position: absolute;
top: 0;
right: calc(100% + var(--navbar-width) / 2 /2);
opacity: 0.5;
transform: scaleX(0) translateX(-100%);
transition: 0.3s ease 0.3s;
}
nav .menu li:hover:before{
transform: scaleX(1);
}
nav .menu li:hover:after{
transform: scaleX(1) translateX(50%);
}
nav .menu li a{
color: var(--primary-color);
font-size: 20px;
text-decoration: none;
}
nav.hide .social,
nav.hide .menu{
opacity: 0;
visibility: hidden;
}
JavaScript Code
const nav = document.querySelector('nav');
const navbar = document.querySelector('.navbar');
const toggleMenu = document.querySelector('.toggle-menu');
toggleMenu.addEventListener('click', function(){
if(nav.classList.contains('hide')){
toggleMenu.children[0].style.cssText = `
animation: barsAnimation 0.5s linear 0.2s alternate;
transform: rotate(45deg) translateY(5px);
transition: 1s ease;
`;
toggleMenu.children[1].style.cssText = `
animation: barsAnimation 0.5s linear 0.3s alternate-reverse;
transform: rotate(-45deg) translateY(-5px);
transition: 1s ease;
`;
toggleMenu.children[2].style.cssText = `
transform: scale(0);
transition: 1s ease;
`;
nav.style.cssText = `
height: 100vh;
transition: height 0.5s linear 0.6s;
`;
nav.classList.remove('hide');
nav.classList.add('show');
}else{
toggleMenu.children[0].style.cssText = `
animation: barsAnimation 0.5s linear 0.2s alternate-reverse;
transform: rotate(0deg) translateY(0px);
transition: 1s ease;
`;
toggleMenu.children[1].style.cssText = `
animation: barsAnimation 0.5s linear 0.3s alternate;
transform: rotate(0deg) translateY(0px);
transition: 0.5s ease 0.1s;
`;
toggleMenu.children[2].style.cssText = `
transform: scale(1);
transition: 0.5s ease 0.2s;
`;
nav.style.cssText = `
height: 10vh;
transition: height 0.5s linear 0.6s;
`;
nav.classList.remove('show');
nav.classList.add('hide');
}
});
0 Comments