Wednesday, May 30, 2018

how to make drop down menu in html and css jquery in Hindi

how to make drop down menu in html and css jquery in Hindi :

आज की इस post में हम एक drop down menu bar बनाएगे और यह Menu bar html css तथा Jquery का use के बनाया जाएगा निचे दी गई link से आप इस mini project के source code Download कर सकते है 
इस post के साथ साथ आपको इस drop down menu bar बनाना सिखाने के लिए में आपको video tutorial भी Provide करुगा उसके लिए आप मेरे youtube chanal My Project HD पर visit कर सकते है आपको वह बहुत से project php , java ,html , jquery आदि में मिलेगे

Go To My Project HD Click Here :

 

Source Code :

HTML Code   

<html>
<head>
<title>Drop Down Manu Bar Example</title>
<link type="text/css" rel="stylesheet" href="style.css">
<script src="jquery.js"></script>
<script src="myjs.js"></script>
</head>
<body>
    <div id="a">
    <button id="btn">---<br>---</button>
    <div id="n">   
    <ul>
        <li><b>Home</li>
        <li id="c"><b>Course</b>
        <div id="d1">
        <p>HTML</p>
        <p>CSS</p>
        <p>jquey</p>
        <p>PHP</p>
        </div>
        </li>
        <li id="b"><b>Branch</b>
        <div id="d2">
        <p>HTML</p>
        <p>CSS</p>
        <p>jquey</p>
        <p>PHP</p>
        </div>
        </li>
        <li><b>Help</li>
    </ul>
    </div>
    </div>
</body>
</html>





CSS File

@media (max-width:2000px) and (min-width:500px)
{
    ul li{
    list-style:none;
    float:left;
    width:25%;
    height:50px;
    line-height:50px;
    background:red;
    color:white;
    text-align:center
    }
    #btn{
    display:none;
    }
}

@media (max-width:500px) and (min-width:50px)
{
    ul li{
    list-style:none;
    width:100%;
    height:50px;
    line-height:50px;
    background:red;
    color:white;
    text-align:center;
   
    }
    #n{
    display:none;
    }
}
#d1{
width:100%;
height:auto;
background:red;
display:none;
}
#d2{
width:100%;
height:auto;
background:red;
display:none;
}


Jquery File 

 $('document').ready(function(){
    $('#btn').click(function(){
  
    $('#n').stop().slideToggle();
    });
  
    $('#c').click(function(){
    $('#d2').slideUp();
    $('#d1').stop().slideToggle();
    });
  
    $('#b').click(function(){
    $('#d1').slideUp();
    $('#d2').stop().slideToggle();
    });
});

Output : 

https://phpprojectworld.blogspot.com/2018/05/how-to-make-drop-down-menu-in-html-and.html


0 komentar: