Change on hover effect to click to showdropdown list

Question

Ok, I have a dropdown list which appears 'on hover', is there a way to change it to have it appear 'on click' instead. Ideally, CSS only, but open to JS options as well. If I could push the boat out further I would also like a cross in the top right-hand corner to close the dropdown list.

I have made a fiddle here so that you can see my current 'on hover' setup

current CSS

ul {
padding: 15px;
list-style: none;
text-align: center;
}

.navigationWrap ul li {
width: 100%;
float: left;
color: #000;
font-size: 16px;
position: relative;
}

.navigationWrap ul li a {
text-decoration: none;
color: #000;
display: block;
}

.navigationWrap ul li a:hover {
color: #000;
background-color: #e6ffe6;
}

.navigationWrap ul li ul.subNav {
position: absolute;
width: 95%;
padding: 10px;
background-color: #fff;
 border: #4399fc solid 1px;
display: none;
z-index: 999;
left: 0;
top: 100%;
text-align: left;
max-height: 350px;
overflow: auto;
overflow-x: hidden;
}

.navigationWrap ul li ul.subNav li {
 float: left;
 width: 100%;
 font-size: 20px;
 letter-spacing: 1px;
 padding-bottom: 10px;
 }

 .navigationWrap ul li ul.subNav a {
  float: left;
  width: 100%;
  transition: all 0.3s ease-in-out;
  display: block;
  }

 .navigationWrap ul li ul.subNav li a:hover {
  color: #000;
  padding-left: 10px;
  }

 .navigationWrap ul li ul.subNav li.active a {
 color: #04A000;
 }

 .navigationWrap ul li.dropdown:hover ul.subNav {
  display: block;
  }

The HTML code

<div class="navigationWrap">
<ul>
<li class="dropdown">&#9776; See Options<ul class="subNav">
    <li><a href="#">Option 1</a></li>
    <li><a href="#">Option 2</a></li>
    <li><a href="#">Option 3</a></li>
    <li><a href="#">Option 4</a></li>
    <li><a href="#">Option 5</a></li>
    <li>
      <p></p>
    </li>
    <li><a href="#">Option 6</a></li>
    <li><a href="#">Option 7</a></li>
  </ul>
</li>
</ul>
</div>

Many thanks, Jason.

to simulate onclick in CSS refer to the checkbox hack here:https://stackoverflow.com/a/32721572/4700922 — Ali Sheikhpour, Apr 06 '20 at 06:16

score 1 · Answer 1 · answered Apr 06 '20 at 06:55

It's very much possible to using JavaScript. I did by jQuery. I closed dropdown if user click outside of the dropdown container.

Here is JS code.

$(function(){
    $('.dropdown .dropdown-toggle').on('click', function(e){
        e.preventDefault;
        e.stopPropagation;
        $(this).parents('.dropdown').toggleClass('show');
    });

    // Remove dropdown if click outside of dropdown

    const $menu = $('.dropdown');

    $(document).mouseup(e => {
        if (!$menu.is(e.target) // if the target of the click isn't the container...
            && $menu.has(e.target).length === 0) // ... nor a descendant of the container
        {
            $menu.removeClass('show');
        }
    });
});

CSS change.

/* Before */

.navigationWrap ul li.dropdown:hover ul.subNav {
  display: block;
}

/* After */
.navigationWrap ul li.dropdown.show ul.subNav {
  display: block;
}

Here is HTML.

<div class="navigationWrap">
  <ul>
    <li class="dropdown">
      <a class="dropdown-toggle" href="javascript:void(0);">&#9776; See Options</a>
      <ul class="subNav">
        <li><a href="#">Option 1</a></li>
        <li><a href="#">Option 2</a></li>
        <li><a href="#">Option 3</a></li>
        <li><a href="#">Option 4</a></li>
        <li><a href="#">Option 5</a></li>
        <li>
          <p></p>
        </li>
        <li><a href="#">Option 6</a></li>
        <li><a href="#">Option 7</a></li>
      </ul>
    </li>
  </ul>
</div>

Here is the CodePen.

score 0 · Accepted Answer · answered Apr 06 '20 at 06:28

You can do this

We toggle class (add/remove) and change display value via css

document.querySelector('.dropdown').onclick = () => {
  document.querySelector('.dropdown').classList.toggle('show');
};

If class .show exists then display: block

.navigationWrap ul li.show ul.subNav{
  display: block;
}

Check this out

Change on hover effect to click to showdropdown list

2 Answers2