Dropdown Menu with pure CSS and HTML

Question

I have below CSS for a dropdown menu:

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  top: 30px;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;

  button, a {
    border-bottom: 1px solid #e7e7e7;
    border-radius: unset;
    text-align: left;
    display: inline-block;
    width: 100%!important;

    .icon {
      margin-right: 15px;
      top: 0.13em;
    }

    &:hover {
      background-color: #e7e7e7 !important;
    }

    &:active {
      background-color: #c7c7c7 !important;
    }
  }
}

.dropdown:hover .dropdown-content {
  display: block;
}

And below markup:

                <div class="dropdown">
                  <button class="material-icon-button">
                    <i class="icon icon-more_vert"></i>
                  </button>
                  <div class="dropdown-content" style="width: 295px;">
                    <button class="material-button">
                      <i class="icon icon-undo"></i>
                      <span>Button 1</span>
                    </button>
                    <button class="material-button">
                      <i class="icon icon-add_alert"></i>
                      Button 2
                    </button>
                  </div>
                </div>

This works fine and shows menu on mouseover.

What I am trying to achieve is that, instead of mouseover, the dropdown is shown when the user actually clicks the button.

I have tried:

.dropdown:active .dropdown-content {
  display: block;
}

But It doesn't seem to work, it show the menu on click but hides immediately.

I was wondering if this could be done without JavaScript and with pure css? if so, can someone please guide on this.

Thanks

JaRoMaster · Accepted Answer · 2022-11-17 11:21:04Z

2

There is a way to handle clicks with pure CSS. It's not the best way (because that's not what CSS is made for) but it should work. Basically you'll have to use a checkbox with a label and style according to the state of the checkbox.
Here is an example: https://css-tricks.com/the-checkbox-hack/

answered Nov 17, 2022 at 11:21

JaRoMaster

1811 gold badge4 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

MAYUR SANCHETI · Accepted Answer · 2022-11-17 11:44:16Z

2

try like below, hope it helps, comment if query

.c {
  display: flex;
  align-items: center;
  justify-content: center;
  height:100%;
  width:100%;
}
.dd {
  z-index:1;
  position:relative;
  display: inline-block;
}
.dd-a {
  padding:10px;
  background:white;
  position:relative;
  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
  transition-duration: 0.2s;
  -webkit-transition-duration: 0.2s;
}
.dd input:after {
  content:"";
  width:100%;
  height:2px;
  position:absolute;
  display:block;
  background:#C63D0F;
  bottom:0;
  left:0;
  transform: scaleX(0);
  transform-origin: bottom left;
  transition-duration: 0.2s;
  -webkit-transform: scaleX(0);
  -webkit-transform-origin: bottom left;
  -webkit-transition-duration: 0.2s;
}
.dd input {
  top:0;
  opacity:0;
  display:block;
  padding:0;
  margin:0;
  border:0;
  position:absolute;
  height:100%;
  width:100%;
}
.dd input:hover {
  cursor:pointer;
}
.dd input:hover ~ .dd-a {
  box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75);
}
.dd input:checked:after {
  transform: scaleX(1);
  -webkit-transform: scaleX(1);
}
.dd input:checked ~ .dd-c {
  transform: scaleY(1);
  -webkit-transform: scaleY(1);
}
.dd-a span {
  color:#C63D0F;
}
.dd-c{
  display:block;
  position: absolute;
  background:white;
  height:auto;
  transform: scaleY(0);
  transform-origin: top left;
  width: 100%;
}
.dd-c ul {
  margin:0;
  padding:0;
  list-style-type: none;
}
.dd-c li {
  margin-botom:5px;
  word-break: keep-all;
  white-space:nowrap;
  display:block;
  position:relative;
}
a {
  display:block;
  position:relative;
  text-decoration: none;
  padding:5px;
  background:white;
  color:#C63D0F;
}
a:before {
  z-index:0;
  content:"";
  position:absolute;
  display:block;
  height:100%;
  width:100%;
  transform-origin:top left;
  background:#C63D0F;
  top:0;
  left:0;
  transform: scaleX(0);
  -webkit-transform: scaleX(0);
}
a span {
  display:block;
  position:relative;
 
}
a:hover:before {
  transform:scaleX(1);
  -webkit-transform:scaleX(1);
}
a:hover span {
  color:white;
}

<div class="c">
   
  <div class="dd">
    <div class="dd-a"><span>Dropdown menu</span></div>
    <input type="checkbox">
    <div class="dd-c">
      <ul>
        <li><a href="#"><span>Link</span></a></li>
         
        <li><a href="#"><span>Link</span></a></li>
        <li><a href="#"><span>Link</span></a></li>
      </ul>
    </div>
  </div>
   
</div>

edited Nov 17, 2022 at 11:44

answered Nov 17, 2022 at 11:23

MAYUR SANCHETI

1723 silver badges15 bronze badges

5 Comments

Diego D Over a year ago

the question asks how to toggle the dropdown once clicked instead of on hover

MAYUR SANCHETI Over a year ago

now i change code , try again

MAYUR SANCHETI Over a year ago

@DiegoD i made changes, now when click dropdown works instead of hover

Diego D Over a year ago

now it's correct and I gave the upvote but you had a subzero count so it won't go above.

Diego D Over a year ago

Anyway just to add something about this solution.. this was the strategy suggested by the other user who answered that didn't take the effort to extrapolate from the third party resource.. it's helpful to know that the for attribute in the label triggering the dropdown would have a better semantic in terms of accessibility and the trick worked because the label marked as that will give focus and toggle the state of the target element. This checkbox here achieves the same result by being full width and zero opacity.

Collectives™ on Stack Overflow

Dropdown Menu with pure CSS and HTML

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related