Animated Navbar

TITLE :

Source Code

HTML :

<html>

<head>

<title>

Animated Navbar

</title>

</head>

<body>

<ul>

<li><a href="#">About</a></li>

<li><a href="#">Services</a></li>

</ul>

</div>

</div>

</nav>

</body>

</html>

CSS :

*{

margin: 0;

padding: 0;

box-sizing: border-box;

}

body{

width:100%;

}

.navbar{

width:100%;

padding: 12px 0;

background-color: #1b1b2f;

display: flex;

justify-content: space-between;

align-items: center;

}

.navbar h3{

color:#e43f5a;

font-size: 1.35em;

font-family: Swis721 BT;

text-transform: uppercase;

margin-left: 25px;

}

.navbar ul {

display: flex;

justify-content: space-between;

margin:0 25px;

}

.navbar li {

list-style-type: none;

padding: 0 20px;

}

.navbar li a{

font-size: 1.1em;

font-family: Futura Md BT;

letter-spacing: 2px;

color:#f9f9f9;

text-decoration: none;

outline:none;

position: relative;

padding-bottom: 7px;

}

.navbar li a::after{

content: '';

position: absolute;

bottom:0;

width:100%;

height: 3px;

left:0;

background-color: #e43f5a;

transform: scaleX(0);

transition: 0.3s;

transform-origin: left;

}

.navbar li a:hover::after {

transform: scaleX(1);

transform-origin: right;

}

.menubar {

width:40px;

height: 20px;

flex-direction: column;

justify-content: space-between;

align-items: flex-end;

display: none;

}

.bar{

width:100%;

height: 3px;

background-color: #e43f5a;

border-radius: 5px;

}

.bar1{

width: 90%;

}

.bar2{

width: 75%;

}

.bar3{

width: 100%;

}

Responsive CSS :

@media screen and (max-width:800px) {

.links{

width: 100%;

transform: translate(-100%,0);

transition: 0.3s;

position: absolute;

padding: 10px 0;

background-color: #333;

top:48px;

}

.navbar {

flex-direction: column;

align-items: flex-start;

}

.navbar ul {

display: flex;

justify-content: space-between;

flex-direction: column;

margin:0 25px;

text-align: center;

}

.navbar li {

list-style-type: none;

padding: 10px 20px;

}

.navbar li a{

font-size: 1.1em;

font-family: Futura Md BT;

letter-spacing: 2px;

color:#f9f9f9;

text-decoration: none;

outline:none;

position: relative;

padding:7px 25px;

z-index: 1;

}

.navbar li a::after{

content: '';

position: absolute;

bottom:0;

width:100%;

height: 100%;

left:0;

background-color: #e43f5a;

transform: scaleX(0);

transition: 0.3s;

transform-origin: left;

z-index: -1;

}

.navbar li a:hover::after {

transform: scaleX(1);

transform-origin: right;

}

.menubar {

width:25px;

height: 12px;

flex-direction: column;

justify-content: space-between;

align-items: flex-end;

display: flex;

position: absolute;

right: 0;

top:0;

margin:18px 20px;

}

.bar{

width:100%;

height: 3px;

background-color: #e43f5a;

border-radius: 5px;

}

.bar1{

width: 90%;

}

.bar2{

width: 75%;

transform: scaleX(1);

transform-origin: left;

}

.bar3{

width: 100%;

}

.bar1,.bar2,.bar3{

transition: 0.3s;

}

.barclose1{

width: 100%;

position: absolute;

transform: rotate(45deg);

}

.barclose2{

width: 100%;

position: absolute;

transform: scaleX(0);

transform-origin: right;

}

.barclose3{

width: 100%;

position: absolute;

transform: rotate(-45deg);

}

.newlinks{

transform: translate(0,0);

}

JavaScript :

let bar1 = document.querySelector('.bar1');

let bar2 = document.querySelector('.bar2');

let bar3 = document.querySelector('.bar3');

let menubar = document.querySelector('.menubar');

let links = document.querySelector('.links');

menubar.addEventListener("click" , function() {

bar1.classList.toggle('barclose1');

bar2.classList.toggle('barclose2');

bar3.classList.toggle('barclose3');

links.classList.toggle('newlinks');

});