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
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/
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.