How to Make a Menu Like Stack Overflow's

Question

I really like the way Stack Overflow has done their dropdown menus on the top. Notice how you must click in order for the dropdown to trigger, but you still must hover to get the dropdown. There is also what seems to be groups - once you click, hover will activate the menus shown in the picture. It is hard to explain, but if you play around for a minute you'll see what I mean. Also, it is important that the last hovered menu will show until a user clicks off again.

Here is what I have so far; note that I almost have the same functionality, except for the last menu hovered doesn't stay dropped (it closes on mouseout when it shouldn't until off-click) and the toggle functionality is sketchy:

$(document).ready(function() {
  var depressed = false;

  $('.menu').click(function() {
    depressed = true;
    $('.menu').toggleClass('active');
  });
  $('.menu').hover(function() {
    if (depressed) {
      $('.menu').toggleClass('active');
    }
  });
});

ul {
  margin: 0;
  padding: 0;
}
ul li {
  display: inline-block;
  padding: 10px 20px;
  background: #333;
  color: #eee;
}
ul li.active:hover ul {
  display: block;
}
ul li ul {
  display: none;
  position: absolute;
  border: 2px solid #555;
}
ul li ul li {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="menu">button 1
    <ul>
      <li>sub button 1</li>
      <li>sub button 2</li>
    </ul>
  </li>
  <li class="menu">button 2
    <ul>
      <li>sub button 1</li>
      <li>sub button 2</li>
    </ul>
  </li>
  <li class="menu">button 3
    <ul>
      <li>sub button 1</li>
      <li>sub button 2</li>
    </ul>
  </li>
</ul>

My JS is not cuttin git. So, what is the best way to go about this?

Answer 1

I haven't peeked into the SO menu, so I don't know how they did it. But this seems to work nicely.

A click on one of the buttons opens the dropdown.

The dropdown is not closed by a 'mouseout', like in your code, but only when another menu is hovered. If you hover outside of the menu area, the lastly hovered menu remains open.

Clicking anywhere closes the menu.

So showing the menu is not directly done by using a :hover pseudo element in CSS, but by adding a class, which remains there even when the menu is unhovered. I think the net result behaves pretty close to Stack Overflow's.

$(function(){

  // The event to handle clicks outside of the menu. This will close the menu.
  var offEvent = 
    function(event){
      $('.menu-bar').removeClass('active');
      $(document).off('click', offEvent);
    };

  // The click event on the menu buttons, to toggle 'menu mode' as it were.
  $(document).on('click', '.menu-bar .menu', 
    function(event){
      event.preventDefault();
      $('.menu-bar').addClass('active');
      $(this).addClass('active');
     
      // Leave menu mode by clicking anywhere of the menu.
      $(document).on('click',
        offEvent
        );
    });
  
  // Hover toggles between the dropdowns of the separate menus.
  $('.menu-bar .menu').hover( 
    function(event){
      var $current = $(this);
      $('.menu').each(
        function(index, element){
          var $element = $(this);
          if ($element.get(0) == $current.get(0)) {
            $element.addClass('active');
          } else {
            $element.removeClass('active');
          }
        });
    });
});

ul {
  margin: 0;
  padding: 0;
}

ul li {
  display: inline-block;
  padding: 10px 20px;
  background: #333;
  color: #eee;
}

ul li ul {
  display: none;
  position: absolute;
  border: 2px solid #555;
}

ul li ul li {
  display: block;
}

.menu .dropdown {
  display: none;
}
.menu-bar.active .menu.active .dropdown {
  display: block;
}

.menu {
  display: inline-block;
  position: relative;
  border: 1px solid grey;
}

.menu .dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  border: 2px solid #555;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu-bar">
  <li class="menu">button 1
    <ul class="dropdown">
      <li>sub button 1</li>
      <li>sub button 2</li>
    </ul>
  </li>
  <li class="menu">button 2
    <ul class="dropdown">
      <li>sub button 1</li>
      <li>sub button 2</li>
    </ul>
  </li>
  <li class="menu">button 3
    <ul class="dropdown">
      <li>sub button 1</li>
      <li>sub button 2</li>
    </ul>
  </li>
</ul>

Answer 2

$(document).ready(function() {

  $('#M1').click(function() {
    $('#M1').toggleClass('active');
    $('#M2').removeClass('active');
    $('#M3').removeClass('active');
  });
  $('#M2').click(function() {
    $('#M2').toggleClass('active');
    $('#M1').removeClass('active');
    $('#M3').removeClass('active');
  });
  $('#M3').click(function() {
    $('#M3').toggleClass('active');
    $('#M1').removeClass('active');
    $('#M2').removeClass('active');
  });
  
});

ul {
  margin: 0;
  padding: 0;
}
ul li {
  display: inline-block;
  padding: 10px 20px;
  background: #333;
  color: #eee;
}
ul li.active ul {
  display: block;
}
ul li ul {
  display: none;
  position: absolute;
  border: 2px solid #555;
}
ul li ul li {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="menu" id='M1'>button 1
    <ul>
      <li>sub button 1</li>
      <li>sub button 2</li>
    </ul>
  </li>
  <li class="menu" id='M2'>button 2
    <ul>
      <li>sub button 1</li>
      <li>sub button 2</li>
    </ul>
  </li>
  <li class="menu" id='M3'>button 3
    <ul>
      <li>sub button 1</li>
      <li>sub button 2</li>
    </ul>
  </li>
</ul>

This works for me.

I've just removed :hover from the end of the .active class and made an individual function for each button.