Learners, In this article we are going to design a small, interactive, and impressive project which is a Toggle menu Button.
Learner, You will have an idea that toggle itself is stated as switching from one form to another. So you have already explored lots of web pages in which you have observed that there is dark and light mode how do you switch between them by clicking on the button that moves from one end to another by doing this only the webpage gets changed.
Something similar, we are going to design by ourselves.
Mobile Toggle Menu using HTML and CSS
Hey learners!
Welcome to our today’s blog with code with random. In this blog, we gonna learn how we can design a Toggle menu Button Project Using HTML CSS JAVASCRIPT.
I hope you must have got an idea about the project.
Let’s have a look at our project.
As you are looking in the project preview how the thing is organized in the single container.
Following is the feature of our project:-
In the starting as you are able to observe that our toggle button is in the fade mode or there is the message of no visto.
But whenever you will click on the toggle button the while block inside the toggle display will move from one end to another and also there will be a message changing as visto.
HTML Code For Toggle Navigation Menu
Here I’m not going to add a structure of the HTML file from scratch, I will just paste the body part, it is so because the body is the main part of our designing a browser.
We have the following part in the HTML section.
We have a div with a class checkbox and within the checkbox, there is the input of checkbox type with label will class text.
Go through the below code and run it in your IDE or where you used to design just HTML without CSS styling.
<!DOCTYPE html>
<!-- Created By CodingLab - www.codinglabweb.com -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<!--- <title>Custom Toggle Button | CodingLab</title>------->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="checkbox">
<input type="checkbox" id="click">
<label for="click" class="text"></label>
</div>
</body>
</html>
CSS Code SECTION For Toggle Navigation Menu
By CSS we will design our container and will bring in the center and then we will set the width for all three parts of the container and will design the check box and label as well.
5+ HTML CSS project With Source Code
The Below code will analyze you more. So just add in your HTML half complete file and wait to watch some magic.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html,body{
display: grid;
height: 100%;
place-items: center;
background: #664AFF;
}
.checkbox{
height: 80px;
width: 270px;
padding: 20px;
display: flex;
background: #fff;
align-items: center;
border-radius: 5px;
box-shadow: 5px 5px 30px rgba(0,0,0,.2);
justify-content: space-between;
}
.checkbox input{
outline: none;
height: 40px;
width: 90px;
border-radius: 50px;
-webkit-appearance: none;
position: relative;
background: #e6e6e6;
box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
cursor: pointer;
transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.checkbox input:checked{
background: #664AFF;
}
.checkbox input:before{
position: absolute;
content: "";
left: 0;
height: 100%;
width: 40px;
background: linear-gradient(#fff,#f2f2f2,#e6e6e6,#d9d9d9);
box-shadow: 0 2px 5px rgba(0,0,0,.2);
border-radius: 50px;
transform: scale(0.85);
transition: left 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
input:checked:before{
left: 50px;
}
.checkbox .text:before{
content: "No Visto";
font-size: 25px;
font-weight: 500;
color: #bfbfbf;
}
input:checked ~ .text:before{
color: #664AFF;
font-size: 25px;
content: "Visto";
}
A live preview of our project is attached below refer to this codepen.
Final Output Of Toggle Navigation Menu Using Html And Css
By this blog… We have learned how we can design a Simple weather API Project HTML CSS JAVASCRIPT.
Now I’m looking for your reviews.
So, How was the blog , Learners!
If you want a more crisp blog like this then please check our Blogs sites CodewithRandom. keep tuned with us because every day you will learn something new here.
100+ Front-end Projects for Web developers (Source Code)
ADVERTISEMENT
I hope that I’m able to make you understand this topic and that you have learned something new from this blog. If you faced any difficulty feel free to drop a comment down your problems and if you liked it, please show your love in the comment section. This fills bloggers’ hearts with enthusiasm for writing more new blogs.
ADVERTISEMENT
You can follow me on Instagram
ADVERTISEMENT
Written by @Ankit kumar
ADVERTISEMENT
Code by @FOXH7
ADVERTISEMENT
