How to transform hover dropdown to clickable dropdown?

Question

Sorry for me newbie question, but I'm a rooky in web-dev.

I have a code which allows me to place a hooverable elements on my website. Problem is that I want to transfer it now to clickable element - best is right click.

I tried to do it with :active option in css but it didn't work.

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

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

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

Is there a simple way to achieve that in pure css?

You have tagged your question as javascript and you want a pure css solution? — Muhammad Bilal
– Muhammad Bilal, Commented Aug 2, 2019 at 6:33

Nisarg Shah · Accepted Answer · 2019-08-02 06:42:43Z

3

In pure CSS you may have to use what's called the checkbox hack. Basically you use a checkbox to record whether the dropdown is open or not, and use :checked pseudo class to decide whether the dropdown-content is shown or not.

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

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

#dropdown:checked ~ .dropdown-content {
  display: block;
}

input[type=checkbox] {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

<label for="dropdown">Dropdown</label>
<input type="checkbox" id="dropdown">
<div class="dropdown-content">
  And this is the content.
</div>

I would suggest using Javascript for this instead.

Typically, in JS, this is done by adding a class such as "active" or "open" to the dropdown component itself. Then you could modify the CSS selector to display the dropdown-content from .dropdown:hover .dropdown-content to .dropdown.open .dropdown-content.

To do that, you will need to have an event listener for click (and possibly even some keyboard events such as Enter keypress) and then add the "open" or "active" class to the dropdown. Here's a snippet to show how that can be done:

var dropdown = document.querySelector(".dropdown");
dropdown.addEventListener("click", function(e) {
  var dropdown = e.target;

  // If it has "open" class, remove it. Else add it.
  if (dropdown.classList.contains("open")) {
    dropdown.classList.remove("open");
  } else {
    dropdown.classList.add("open");
  }
});

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

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

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

<div class="dropdown">
  Let's say this is dropdown.
  <div class="dropdown-content">
    And this is the content.
  </div>
</div>

answered Aug 2, 2019 at 6:42

Nisarg Shah

14.6k6 gold badges38 silver badges58 bronze badges

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

8 Comments

Nisarg Shah Over a year ago

How does it not work? What is the problem? Did you try clicking on the dropdown?

iczyrski Over a year ago

Clicking on the element don't provide any action. I copied JS function into my JS file and changed the CSS content.

Nisarg Shah Over a year ago

Does it work when you click "Run code snippet" here? If yes, then you might be missing something. Also, check the console to see if there are any errors.

iczyrski Over a year ago

Yes I have an error, dropdown is null. But I have class dropdown in my html code.

Nisarg Shah Over a year ago

It is hard to diagnose the issue without looking at the code. Can you try debugging in the developer tools? Or you can create a reproducible example in JSFiddle or maybe post a separate question.

|

Collectives™ on Stack Overflow

How to transform hover dropdown to clickable dropdown?

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related