Hello everyone, In this post I’ll create a Cool Menu Bar Design using CSS and JavaScript. If you are understand the code so will and good if you don’t that I also share a all souce code in zip file where you go and download file and use this code in you project.
I have you the file In the Cool Menu Bar
First I have create a html file and then create a css file which I have linked with HTML and create javaScript file which also linked in HTML in body tag.
so before any kind of delay let’s create a Design Cool Menu Bar using CSS and JavaScript.
Cool Menu Bar using CSS and JavaScript (It’s a easy)
First you create a HTML file with index.html extension name and put the below code in your file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"/>
</head>
<body>
<nav>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Service</li>
<li>Card</li>
<li>Blog</li>
<li>Contact</li>
</ul>
<div class="cross">
<i class="fa-solid fa-xmark" id="cut"></i>
</div>
</nav>
</body>
</html>
After put the html code in html file use css code in css file so first create a css file with style.css extension name.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
nav{
display: flex;
align-items: center;
overflow: hidden;
}
ul{
width: 550px;
list-style: none;
display: flex;
gap: 3px;
align-items: center;
padding: 10px 15px;
border-radius: 20px;
background-color: rgb(0, 0, 0);
transition: 0.8s cubic-bezier(0.65,-0.19, 0.33, 1.21);
}
ul li{
border-radius: 5px;
color: white;
padding: 7px 15px;
transition: 0.5s ease;
cursor: pointer;
}
ul li:hover{
background-color: rgb(255, 190, 12);
color: black;
}
.cross{
width: 60px;
height: 60px;
border-radius: 5px;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.cross i{
color: white;
font-size: 30px;
}
.menu-close{
width: 0;
padding: 0;
}
now you are vary close to created a menu bar so after put all the html and css code create a another file with index.js extension name and put the code this is a javascript. In this code I created a function when I click on cross button menu width zero and when I click again menu width in actual size.
var menu = document.getElementById("menu");
var btn = document.querySelector(".cross");
btn.onclick = function(){
menu.classList.toggle("menu-close");
}
Conclusion
I hope you like the post. this is a simple but cool menu bar you can use this on your further project. you can also check out my another post so go and learn new thinks.