Minimal Popover-like Dropdown Menu with jQuery and CSS

A jQuery / CSS approach to creating a simple popover-like dropdown menu appending to any DOM element that triggers on mouse click.

How to use it:

1. Create the dropdown menu following the html structure like this:

<div class="dropdownWrapper">
  <div class="dropdownLabel">Click Me</div>
  <div class="dropdownPanel">
    Content goes here
  </div>
</div>

2. The dropdown menu is completely customizable and can easily be styled using your own CSS rules

.dropdownWrapper {
  display: inline-block;
  border: 1px solid #DA4453;
  background-color: #FC6D58;
  padding: 0px;
  position: relative;
  border-radius: 3px;
  text-align: center;
}

.dropdownWrapper:hover { background-color: #E95546; }

.dropdownLabel {
  cursor: pointer;
  padding: 5px 20px;
}

.dropdownPanel {
  position: absolute;
  min-width: 120px;
  background-color: #ED5565;
  padding: 5px;
  left: 0;
  top: 0;
  margin-top: 35px;
  display: none;
  z-index: 2;
  border: 1px solid #C0392B;
}

.dropdownPanel:before {
  width: 0;
  content: "";
  height: 0;
  border-style: solid;
  border-width: 0 7px 8px 7px;
  border-color: transparent transparent #C0392B transparent;
  text-align: center;
  top: 0;
  left: 0;
  margin-top: -8px;
  margin-left: 10px;
  position: absolute;
}

3. Include the needed jQuery library at the bottom of the webpage.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

4. Active the dropdown menu on click.

$(document).on('ready', function(){

  var $dropdown = $('div.dropdownWrapper'),
      $drpBtn   = $dropdown.find('div.dropdownLabel');

  $drpBtn.on('click', function(e){
    e.stopPropagation();
    var $element = $(this).parent();
    $element.find('.dropdownPanel').fadeToggle(200);
  });

  $("body").click(function(){
    $('.dropdownPanel').hide(200);
  });

});

---

This awesome jQuery plugin is developed by rakibtg. For more Advanced Usages, please check the demo page or visit the official website.