Jquery dropdown menu click always open

Question

I created a dropdown menu click, but it have a little weirdness. When I click the button dropdown, the dropdown menu has appear. But when I move my cursor to another (without click the button dropdown again), the dropdown menu dissapear and it has become hoverable dropdown menu not dropdown menu click (Sorry for my bad English)

How can I make the dropdown menu click always appear when I click the button dropdown and move the cursor?

(Here is my code)

HTML

<aside class="sidebar">
      <ul>
        <li><a href="#"><i class="material-icons">home</i>Homepage</a></li>
        <li class="button_dropdown"><a href="javascript:void(0)" class="dropdown-toggle"><i class="material-icons">widgets</i>Events Organizer <i class="material-icons multi_menu">keyboard_arrow_right</i></a>
          <ul class="dropdown_menu">
            <li><a href="#">Create Events</a></li>
            <li><a href="#">List Events</a></li>
          </ul>
        </li>
        <li><a href="#"><i class="material-icons">people</i>Peserta Events</a></li>
      </ul>
    </aside>

CSS

aside.sidebar ul li ul.dropdown_menu {
  opacity: 0;
  visibility: hidden;
  height: auto;
  width: 100%;
  margin-top: -1px;
  position: absolute;
  transition: all 0.5s;
  border-left: 1px solid #2c3e50;
  background-color: #34495e;
}
aside.sidebar ul li ul.dropdown_menu.active {
  opacity: 1;
  visibility: visible;
  height: auto;
  width: 100%;
  background-color: #34495e;
  left: 100%;
  top: 0;
  transition: all 0.5s;
}

Jquery

  $(document).ready(function () {
        $(".button_dropdown").click(function () {
          $(".dropdown_menu").toggleClass("active");
        });
      });

I think your menu is still displaying but is out of the right due to left:100%. — Darren
– Darren, Commented Dec 28, 2017 at 18:15
You could do the same thing with html and pure css if that is an option for you — Jonny
– Jonny, Commented Dec 28, 2017 at 18:16
It's because you have the aside.sidebar ul li ul.dropdown_menu set to left:100%. This is causing the ul to be off the screen due to being 100% across the page from the left. Set it to your width of sidebar as shown in my answer below. — Darren
– Darren, Commented Dec 30, 2017 at 18:20

Darren · Accepted Answer · 2017-12-28 18:12:58Z

I personally would use hover rather than click for a child menu. Let me know how you go with this. Stays active until clicked out.

aside.sidebar ul li ul.dropdown_menu {
  display: none;
  height: auto;
  width: 100%;
  margin-top: -1px;
  position: absolute;
  transition: all 0.5s;
  border-left: 1px solid #2c3e50;
  background-color: #34495e;
  left:200px;
  top:0;
}

aside.sidebar ul li ul.dropdown_menu.active {
  display: block !important;
}

Working in this snippet.

$(document).ready(function() {
  $('.button_dropdown').click(function() {
    $('.dropdown_menu').toggleClass('active');
  });
});

aside.sidebar ul li ul.dropdown_menu {
  display: none;
  height: auto;
  width: 100%;
  margin-top: -1px;
  position: absolute;
  transition: all 0.5s;
  border-left: 1px solid #2c3e50;
  background-color: #34495e;
  left:200px;
  top:0;
}

aside.sidebar ul li ul.dropdown_menu.active {
  display: block !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<aside class="sidebar">
  <ul>
    <li>Homepage</li>
    <li class="button_dropdown"><a href="javascript:void(0)" class="dropdown-toggle">Events Organizer</a>
      <ul class="dropdown_menu">
        <li>Create Events</li>
        <li>List Events</li>
      </ul>
    </li>
    <li>Peserta Events</li>
  </ul>
</aside>

ReyHaynes · Accepted Answer · 2017-12-28 17:55:52Z

1

Without changing your code too much, you can just remove the pointer-events (clicks, etc.) by adding:

pointer-events:none; to aside.sidebar ul li ul.dropdown_menu

and

pointer-events:auto; to aside.sidebar ul li ul.dropdown_menu.active

answered Dec 28, 2017 at 17:55

ReyHaynes

3,1721 gold badge17 silver badges25 bronze badges

1 Comment

Bariq Dharmawan Over a year ago

Thanks for your answer. But it doesn't work in my case :)

Deleted · Accepted Answer · 2017-12-28 18:09:34Z

1

The hoverable dropdown menu is because you have set the opacity property to 0 in your css aside (dropdown_menu). You must change opacity:0 to opacity:1. Here is your code with error:

  aside.sidebar ul li ul.dropdown_menu {
  opacity: 0;
  visibility: hidden;
  height: auto;
  width: 100%;
  margin-top: -1px;
  position: absolute;
  transition: all 0.5s;
  border-left: 1px solid #2c3e50;
  background-color: #34495e;
}

Replace by (fixed opacity):

 aside.sidebar ul li ul.dropdown_menu {
  opacity: 1;
  visibility: hidden;
  height: auto;
  width: 100%;
  margin-top: -1px;
  position: absolute;
  transition: all 0.5s;
  border-left: 1px solid #2c3e50;
  background-color: #34495e;
}

answered Dec 28, 2017 at 18:09

Deleted

5184 silver badges12 bronze badges

Collectives™ on Stack Overflow

Jquery dropdown menu click always open

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related