Dear Friends, In this article we will tell you How to make toggle menu using HTML, CSS and Jquery? So i hope you like our artcle and if you want to get the source code related this artcle then you can get the given below code and paste your code editor for make changes.

How to Start?

First of all learn html, css and jquery for make this toggle menu because it is make for mobile website. If you want to lean html, css and jquery then visit w3school website. It is a best site for learning programing languages and them get the manual try run button. After this doownload visual studio code for coding and install it in your system then you are ready for make it.

Toggle Design

Now open your vs code editor and go to the right top section and click on file and select new file then save filename.html after this press ctrl+1 then html syntax generate automatically on your editor. This feature inbuild only visual code editor so i suggested you download this editor and make projects easily because it is a best code editor software. And this toggle menu project make a fast with visual studio code editor. After this you can make a notepad or sublime etc. But we are make on the visual studio code editior and here we will tell you how to create toggle menus easily and fast using jquery. i hope you like our design and minimum write the code for this design because we are used jquery in this project so dont worry it is not hard this is very simple.

First of all used some links for make it:-

1. Download Jquery in your system or get the cdn link from jquery official site and paste your bottom end body tag.

2. Get the Google Fonts link from fonts.google.com site and paste your head section.

3. Get the Icon cdn link from ionicons.com site and it is paste also in the head section.

HTML For Toggle

First give the div tag with class and class name mobile like this <div class=”mobile”> and close this tag </div> after this give the again div tag with class under first div and this class name flip like this <div class=”flip”></div>. Give the more div tag with class like </div class=”panel”></div> under this panel class give the ul and li in the li give the anchor tag in the anchor tag give the Home text after this copy this list and paste five time in the ul tag and change text. If you not understand read this the you can copy source code.

HTML Source Code..

<div class="mobile">
    <div class="flip"><ion-icon name="reorder-three-outline"></ion-icon></div>
    <div class="panel">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Blogs</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </div>

CSS For Progress Bar Design.

If you want to give the style then you have three ways for using css first you can give using inline css and third you can give the internal css and fourth you can guve the external css. But we are using internal css in this project so if you want to choose another way for give the css style then this is depend on of your requirement. Here we are using internal css so go to your starting head tag and give the style tag under head tag in this tag give *{} tag and give margin 0, padding 0, box-sizing border-box. and after this give the body tag in this tag use some properties like background color and font-family.

Here we will start css coding for this project and i hope you like this all codes. There are some best topic for learn and it will be new trick and tips for make a beasutiful project.

Read Also

How to make portfolio website using html, css and JavaScript?

How to create footer using html, css?

How to make Tea Cup with bapour effect using html, css only?

How to design neumorphism user profile using html, css?

How to make registration from with validation using html, css and javascript?

How to make neumorphism calculator using html, css and javascript?

How to create neumorphism clock using html, css and javascript?

Friends, now we will design this toggle menu of ours. So let’s design it, first of all you have to take mobile class and keep its width 280px, then take height and keep it 500px. Then we have to take background rgb, after that we have to take border radius. Then we have to take margin auto, after that we have to take padding.

.mobile{
width: 280px;
height: 500px;
background: rgb(211,185,129);
border-radius: 20px;
margin: auto;
padding: 40px 5px 40px 5px;
}

Here we will take panel class along with mobile class and keep its width at 100% and center its text align. Then the background color will be #555555, and the padding 20px then display none.

.mobile .panel{
width: 100%;
text-align: center;
background-color: #555555;
padding: 20px;
display: none;
}

.mobile .flip{
width: 100%;
height: 35px;
background: #2e2d2d;
}
.mobile .flip ion-icon{
font-size: 35px;
color: #fff;
}

Then we will take mobile class and then take panel class also after that take ul li and set list style to none and keep margin 10px from top.
again we will take mobile class and take panel class in it then which is ul li a inside panel class. We will make the text decoration none inside it, then we will make the color #fff, after that we have to give transition 05 in it. Then on hover of a we will make the color red and the border bottom 1px solid red.

.mobile .panel{
width: 100%;
text-align: center;
background-color: #555555;
padding: 20px;
display: none;
}

.mobile .panel ul li{
list-style: none;
margin-top: 10px;
}
.mobile .panel ul li a{
text-decoration: none;
color: #fff;
transition: 0.5s;
}
.mobile .panel ul li a:hover{
color: red;
border-bottom: 1px solid red;
}

For more information look the css code given below.

CSS Source Code..

 *{
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }
   body{
       background: rgb(54,54,54);
       font-family: 'Poppins', sans-serif;
   }
  .mobile{
      width: 280px;
      height: 500px;
      background: rgb(211,185,129);
      border-radius: 20px;
      margin: auto;
      padding: 40px 5px 40px 5px;
  }
  .mobile .flip{
      width: 100%;
      height: 35px;
      background: #2e2d2d;
  }
  .mobile .flip ion-icon{
      font-size: 35px;
      color: #fff;
  }
  .mobile .panel{
      width: 100%;
      text-align: center;
      background-color: #555555;
      padding: 20px;
      display: none;
  }
  .mobile .panel ul li{
      list-style: none;
      margin-top: 10px;
  }
  .mobile .panel ul li a{
      text-decoration: none;
      color: #fff;
      transition: 0.5s;
  }
  .mobile .panel ul li a:hover{
      color: red;
      border-bottom: 1px solid red;
  }

Jquery Source Code..

 $(document).ready(function(){
            $(".flip").click(function(){
                $(".panel").slideToggle("slow");
            })
        })