Minimal Popover-like Dropdown Menu with jQuery and CSS
File Size: | 3.59 KB |
---|---|
Views Total: | 6924 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.