Hello Readers, Today in this video we will learn how to create a Collapse navigation menu using HTML CSS & Javascript. You easily create this Navigation Menu using HTML by follow these tutorials and steps. You will build this awesome Collapse Navigation Menu by just following this video tutorial or these steps which i given bellow. In addition, common HTML CSS & Javascript programming codes have been used. It is designed in a completely modern way.
Some information about this Navigation Menu
This Menu, which uses beautiful Colors and effects with modern programming code, has gained the best of beauty. This is collapse menu. first showing FontAwesome Icon with menu name and bottom show arrow button. that is work collapse. when click the arrow button then menu width decrease like 75px. then show only FontAwesome Icon with a button.
Watch the video tutorial to create a Collapse navigation menu
If you want to learn how to make it completely, you can watch the video tutorial below. Here I have shown how I made this design step by step completely beautifully. So you can learn how to make this navigation menu. This is a youtube video. If you can learn something from the video or if the video seems helpful to you, you must like and subscribe to the video. As a result, I get motivated to create other new designs.
Hopefully, the above video tutorial has helped you to create this video Collapse navigation menu. If you like the video tutorial, be sure to like the video and comment on it so I can encourage you to create new designs.
You might like this:
- Responsive Login Form Create using HTML & CSS
- E-commerce Product Card UI Design Using HTML & CSS
- How To Make a Website With Background Video Using HTML and CSS
Collapse navigation menu | Source Codes
You have to create HTML CSS & Javascript File For this Site. After creating these files just paste the following codes into your file.
First Step, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension and the images that are used on this website won’t appear. You’ve to download files from the given download button to use images also.
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Smooth Menu</title>
<!----CSS link----->
<link rel="stylesheet" href="style.css">
<!---Fontawsome CDN Link---->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css">
</head>
<body>
<div class="nav">
<div class="nav-item"></div>
<div class="nav-item nav-itemC">
<i class="fas fa-home"></i>
<span class="nav-item-title">Home</span>
</div>
<div class="nav-item nav-itemC nav-active">
<i class="fas fa-address-book"></i>
<span class="nav-item-title">Contacts</span>
</div>
<div class="nav-item nav-itemC">
<i class="fas fa-comments"></i>
<span class="nav-item-title">Chat</span>
</div>
<div class="nav-item nav-itemC">
<i class="fas fa-user"></i>
<span class="nav-item-title">User</span>
</div>
<div class="nav-item nav-itemC">
<i class="fas fa-cog"></i>
<span class="nav-item-title">Settings</span>
</div>
<div class="nav-item nav-itemC">
<i class="fas fa-sign-out-alt"></i>
<span class="nav-item-title">Sign-out</span>
</div>
<div class="nav-item"></div>
<div class="nav-item nav-toggle">
<i class="fas fa-angle-double-left"></i>
</div>
</div>
<!----Jquery CDN Link---->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="js.js"></script>
</body>
</html>Second Step, you have to create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
CSS CODE:
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
html, body{
margin:0;
height: 100%;
background: #2d142c;
font-family: 'Montserrat', sans-serif;
}
.nav{
display: block;
border-radius: 20px 0px 0px 20px;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
color: #fff;
background: #510a32;
height: 495px;
padding: 0px 0px 0px 20px;
width: 300px;
border-right: 5px solid #c72c41;
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.4);
overflow: hidden;
transition: 200ms eae-in-out;
}
.nav.navcollapse{
width: 75px;
}
.nav.navcollapse .nav-item .nav-item-title{
transition: 200ms ease-in-out;
opacity: 0;
}
.nav-item{
display: flex;
padding: 20px 0px 20px 20px;
border-radius: 20px 0px 0px 20px;
font-size: 20px;
white-space: nowrap;
}
.nav-item.nav-itemC{
cursor: pointer;
}
.nav-item i{
padding-right: 40px;
}
.nav-item.nav-toggle{
cursor: pointer;
width: 50px;
height: 50px;
position: absolute;
bottom: 10px;
right: 20px;
padding: 0px;
text-align: center;
line-height: 50px;
border-radius: 500px;
background: #801336;
transition: 200ms ease-in-out;
}
.nav-item.nav-toggle i{
padding-right: 0px;
margin: auto;
}
.nav-item.nav-toggle.toggleIcon{
transform: rotateZ(-180deg);
}
.nav-item.nav-active{
background: #c72c41;
position: relative;
}
.nav-item.nav-active::after, .nav-item.nav-active::before{
content: "";
position: absolute;
height: 30px;
width: 30px;
right: 0px;
border-radius: 30px;
background: #510a32;
}
.nav-item.nav-active::after{
top:-30px;
box-shadow: 15px 15px 0 #c72c41;
}
.nav-item.nav-active::before{
bottom:-30px;
box-shadow: 15px -15px 0 #c72c41;
}third Step, you have to create a JS file with the name of js.js and paste the given codes in your JS file. Remember, you’ve to create a file with .js extension.
Javascript CODE:
$(".nav-itemC").on("click", function(e){
updateNav($(this));
});
$(".nav-toggle").on("click", function(e){
toggleNav();
});
function updateNav(el){
if($(el).hasClass("nav-toggle"))
return;
$(".nav-itemC").removeClass("nav-active");
$(".nav-itemC").removeClass("nav-activeBefore");
$(".nav-itemC").removeClass("nav-activeAfter");
$(el).addClass("nav-active");
$(el).prev().addClass("nav-activeBefore");
$(el).next().addClass("nav-activeAfter");
}
function toggleNav(){
$(".nav").toggleClass("navcollapse");
$(".nav-toggle").toggleClass("toggleIcon");
}now you’ve successfully created this Login Form design using HTML, CSS and JS. If your code does not work or faced any error/problem to comment down or contact us through the contact page.
