Drop down button or Menu

on

 DROP DOWN BUTTON 

OR MENU

Drop Down Menu


Code:-

<!DOCTYPE html>
<html onclick="still(event)">
<head>
    <meta name="viewport" content="width=device-widh,
    initial-scale=1">

</head>
<body>
<div class="dropdown">
<button onclick="myFunciton()" class="dropbtn" id="dropbtn">
Dropbtn</button>

<div id="myDropdown" class="dropdown-content">
    <a href="#home">Home</a>
    <a href="#About">About</a>
    <a href="#contact">Contact</a>

</div>
</div>
<input type="text" id="trueFalse" value="0" style="display:none">
</body>
<style>
    .dropbtn{
        background-color:brown;
        color:white;
        padding:10px;
        font-size:15px;
        border:none;
        cursor:pointer;

    }
    .dropbtn:hover,.dropbtn:focus{
        opacity:0.8;    
        }
    .dropdown{
        position:relative;
        left:10px;
        display: inline-block;
    }
    .dropdown-content{
        display: none;
        position: absolute;
        background-color: #f1f1f1;
        min-width:fit-content;
        overflow:auto;
        box-shadow:2px 2px black;
        z-index:1;
    }
    .dropdown-content a{
        color:black;
        padding:12px 10px;
        text-decoration:none;
        display: block;
    }
    .dropdown-content a:hover{
        background-color:rgb(41, 6, 65);
        color:white;
        

    }

</style>
<script>
function myFunciton()
{

  
var a = document.getElementById("trueFalse").value;

if(a==0)
{
    document.getElementById("myDropdown").style.display="block";
    document.getElementById("trueFalse").value=1;
    
}
else if(a==1)
{
    document.getElementById("myDropdown").style.display="none";
    document.getElementById("trueFalse").value=0;
   
}
}





</script>
</html>

OUTPUT

Home About Contact

Comments

Post a Comment

If you any doubt of any topic then you can comment me.