Indicoderz

How To Make Drop Down Menu Using HTML And CSS

Hello guys, today we will see you in this blog you'll learn How To Make Drop Down Menu Using HTML And CSS | HTML Website Tutorials indicoderz. Earlier I have shared a blog on how to create a Drop Down Menu Generally

Html:

     <html>
<head>
<title>Hello</title>
  </head>
<body>
  <div class="main">
    <button class="button">articles</button>
    <div class="dropdown">
      <ul>
        <li><a  href="" > articles1</a></a></li>
        <li><a  href="" > articles2</a></a></li>
        <li><a  href="" > articles3</a></a></li>
        <li><a  href="" > articles4</a></a></li>
      </ul>
    </div>
  </div>
    <script src="main.js"></script>
</body>
</html>

css:

*{
  margin: 0;
  padding: 0;
}
.main{
  width:100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color:turquoise;
  flex-direction:column; 
}
.dropdown{
  width: 100px;
  height: 20px;
  visibility: hidden;
}
.main button{
  background-color:#fff;
  border: none;
  font-size: 15px;
  cursor: pointer;
  outline: none;
  width: 100px;
  height: 30px;
}
.main button:hover{
  background-color:rgb (203, 238,243); 
  
}
.main ul{
  background-color: white;
  list-style: none;
  margin-top: 10px;
  transform: translateX(30%);
  overflow: hidden;
}
.main ul li{
  width: 100%;
  height: 100%;
  padding: 15px 0px;
  display: flex;
  justify-content: center;
  
}
main ul li:hover{
  background-color:rgb(203,238,234);
  
}
main ul li a{
  color: #000;
  text-decoration: none;
  
}
.active{
  visibility: visible;
}

JavaScript:

var button = document.querySelector(".button");

button.addEventListener("click",show);

function show(){

var list = document.querySelector(".dropdown");

list.classList.toggle("active");

}

TRY IT YOURSELF »

DOWNLOAD CODE FILE

Helping all of you to make us happy How To Make Drop Down Menu Using HTML And CSS .how did you feel about us

Ad

Html:

css:

JavaScript:

Post a Comment

Post a Comment

Contact Form

Ad

How to create a sidebar and drop down menu using Notepad and CSS?

Html:

css:

JavaScript:

You might like

Post a Comment

Post a Comment

Contact Form