How to Make Responsive Menu in html css and jquery in Hindi

Hello Friends आज में आपके लिए एक नया php module ले कर आया हु | आज के इस post में हम responsive Menu Bar बनाना सीखेगे |

आज के इस Tutorial में हम जो menu bar बनाएगे उसमे हम HTML CSS तथा JQUERY का use करेगे और इस responsive Manu bar के लिए में video tutorial भी बना चूका हु यदि आप इसका video tutorial देखना चाहते है तो आप मेरे YouTube चैनल My Project HD पर visit कर सकते है मेरे Youtube चैनल की link निचे दी गई है

Click Here To Go My Project HD

Video Tutorial Part 1 :

Video Tutorial Part 2:

Video Tutorial Part 3:

How To Make Responsive Menu Bar Using HTML CSS Code

<!DOCTYPE html>
<html>
<head>
   <title>Manu</title>
   <script type="text/javascript" src="jquery.js"></script>
   <script type="text/javascript">
       $('document').ready(function(){
           $('#btn').click(function(){
               $('#on').stop().slideToggle();
           });
       });
   </script>
   <style type="text/css">

       @media (max-width: 2000px) and (min-width: 600px)
       {
           #on{
            background-color: blue;
           width: 100%;
           height: 50px;

       }
       ul li{
           list-style: none;
           float: left;
           width: 25%;
           height: 50px;
           line-height: 50px;
       }
       ul li a{
           text-decoration: none;
           color: white;
       }
       #btn{
           display: none;
       }
       }

       @media (max-width: 600px) and (min-width: 50px)
       {
           #on{
           width: 100%;
           height: auto;
           background-color: blue;
           display: none;
       }
       ul li{
           list-style: none;
           width: 100%;
           height: 50px;
           line-height: 50px;
           text-align: center;
       }
       ul li a{
           text-decoration: none;
           color: white;
       }
       }

   </style>
</head>
<body>
   <button id="btn">Click</button>
   <div id="on">
           <ul>
               <li><a href="#">Home</a></li>
               <li><a href="#">About As</a></li>
               <li><a href="#">Contect Us</a></li>
               <li><a href="#">Help</a></li>
           </ul>
   </div>

</body>
</html>