Creating a clickable dropdown menu with HTML & CSS [duplicate]

Question

I am currently working on a project using only HTML & CSS. I am wanting to make the menu button only display the dropdown items when it is clicked, and have an "x" button that will close them when it is clicked. I am able to make the menu dropdown on hover but am having no luck with it on click without JavaScript.

Does anyone know how I might be able to do this with just HTML & CSS? Here is the HTML & CSS that I have as of right now:

.header-menu {
  background-color: #fff;
  font-family: "Noto Sans", sans-serif;
  font-size: 18px;
}

.header-menu-items {
  display: none;
  z-index: 1;
  max-width: 100%;
  overflow-wrap: break-word;
  font-weight: 900;
}

.a {
  color: #000;
  padding: 10px;
  text-decoration: none;
}

.search {
  display: none;
}

.search-icon {
  display: none;
}

.header-menu-items hr {
  color: #d0d0d0;
  background-color: #d0d0d0;
  height: 1px;
  border: none;
}

.header-menu-btn {
  text-align: left;
  background-color: #ff3b3b;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  padding: 10px 0;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-bottom: 10px;
  padding-left: 10px;
}

.header-menu:hover .header-menu-items {
  display: block;
}

<div className="header-menu">
  <button className="header-menu-btn">Menu</button>
  <div className="header-menu-items">
    <div>
      <a className="a" href="">
         Shirts
         </a>
      <hr />
      <a className="a" href="">
         Pants
         </a>
      <hr />
      <a className="a" href="">
         Shoes
         </a>
      <hr />
      <a className="a" href="">
         T-shirts
         </a>
      <hr />
      <a className="a" href="">
         Accessories
         </a>
      <hr />
    </div>
  </div>
</div>

t.niese · Accepted Answer · 2022-01-07 22:33:07Z

First of all it has to be class and not className.

What you want to do can be achieved with a checkbox and the sibling selector ~.

.header-menu {
  background-color: #fff;
  font-family: "Noto Sans", sans-serif;
  font-size: 18px;
}

.header-menu-items {
  display: none;
  z-index: 1;
  max-width: 100%;
  overflow-wrap: break-word;
  font-weight: 900;
}

.a {
  color: #000;
  padding: 10px;
  text-decoration: none;
}

.search {
  display: none;
}

.search-icon {
  display: none;
}

.header-menu-items hr {
  color: #d0d0d0;
  background-color: #d0d0d0;
  height: 1px;
  border: none;
}

.header-menu-btn {
  text-align: left;
  background-color: #ff3b3b;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  padding: 10px 0;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-bottom: 10px;
  padding-left: 10px;
  display: block;
}

#toggle-menu {
  display: none;
}

#toggle-menu:checked ~ .header-menu-items {
  display: block;
}

#toggle-menu ~ label .hide {
  display: none;
}

#toggle-menu:checked ~ label .show {
  display: none;
}

#toggle-menu:checked ~ label .hide {
  display: inline;
}

<div class="header-menu">
  <input type="checkbox" id="toggle-menu"><label for="toggle-menu" class="header-menu-btn">Menu <span class="show">show</span><span  class="hide">hide<span></label>
  <div class="header-menu-items">
    <div>
      <a class="a" href="">
         Shirts
         </a>
      <hr />
      <a class="a" href="">
         Pants
         </a>
      <hr />
      <a class="a" href="">
         Shoes
         </a>
      <hr />
      <a class="a" href="">
         T-shirts
         </a>
      <hr />
      <a class="a" href="">
         Accessories
         </a>
      <hr />
    </div>
  </div>
</div>

ShunnedJeans · Accepted Answer · 2022-01-07 19:08:07Z

0

Javascript onclick simulation using only css and html (without javascript)

I know your answer is in the answer to this post but I can't really figure out how to do it myself.

It would require changing your button to an input tag of checkbox type and going from there.

answered Jan 7, 2022 at 19:08

ShunnedJeans

971 silver badge9 bronze badges

1 Comment

t.niese Over a year ago

That should be a comment or a vote to close as duplicate. It in its current form is not an answer.

Collectives™ on Stack Overflow

Creating a clickable dropdown menu with HTML & CSS [duplicate]

2 Answers 2

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Linked

Related