You are currently viewing Mobile Toggle Menu using HTML and CSS

Mobile Toggle Menu using HTML and CSS

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.

Mobile Toggle using HTML and CSS
Mobile Toggle using HTML and CSS

 

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.

Toggle Navigation Menu using HTML and CSS
Toggle Navigation Menu using HTML and CSS

 

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)

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.

You can follow me on Instagram 

Written by @Ankit kumar 

Code by @FOXH7

 

Leave a Reply