Creating a clickable dropdown menu with HTML & CSS-CodePudding

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>

CodePudding user response：

I don't know how you can do this without using JavaScript. In the example below, I designed a toggle button that shows and hides the menu using JavaScript.

var dropdownMenu = document.getElementById('menu');
var toggleButton = document.getElementById('toggleButton');

dropdownMenu.style.display = 'none';
toggleButton.innerHTML = 'Show';

function show(){
  if(dropdownMenu.style.display == 'none')
   {
    dropdownMenu.style.display = 'inline';
    toggleButton.innerHTML = 'Hide';
   }
  else
  {
    dropdownMenu.style.display = 'none';
    toggleButton.innerHTML = 'Show';
  }
}

.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 id="toggleButton" className="header-menu-btn" onclick="show()"></button>
   
   <div id="menu" 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>

CodePudding user response：

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.

CodePudding user response：

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 >
  <input type="checkbox" id="toggle-menu"><label for="toggle-menu" >Menu <span >show</span><span  >hide<span></label>
  <div >
    <div>
      <a  href="">
         Shirts
         </a>
      <hr />
      <a  href="">
         Pants
         </a>
      <hr />
      <a  href="">
         Shoes
         </a>
      <hr />
      <a  href="">
         T-shirts
         </a>
      <hr />
      <a  href="">
         Accessories
         </a>
      <hr />
    </div>
  </div>
</div>