Bootstrap Style Dropdown Menu Plugin - jQuery Dropdown.js
File Size: | 5.2 KB |
---|---|
Views Total: | 2734 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A dead simple jQuery dropdown plugin which lets you create Bootstrap-style dropdown menus from standard HTML unordered lists.
How to use it:
1. Load the stylesheet dropdown.css
in the document that provides the default styles for the dropdown menu.
<link rel="stylesheet" href="dropdown.css">
2. Create an HTML unordered list for the dropdown menu.
<div class="dropdown"> <div class="more-btn"> Default Dropdown Menu <span class="triangle"></span> </div> <ul class="dropdown-menu"> <li> <a href="javascript:;">jQuery</a> </li> <li> <a href="javascript:;">Script</a> </li> <li> <a href="javascript:;">.Net</a> </li> </ul> </div>
3. Load jQuery JavaScript library and the JavaScript file dropdown.js
at the end of the document. Done.
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"> </script> <script src="dropdown.js"></script>
4. To set the alignment to Right
, just add the dropdown-right
class to the top container.
<div class="dropdown dropdown-right"> ... </div>
5. Override the default CSS to create your own styles.
.dropdown-menu { display: none; position: absolute; top: 100%; left: 0; text-align: left; border: 1px solid #ccc; border-radius: 4px; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); list-style: none; padding: 5px 0; margin: 2px 0 0 0; } .dropdown-menu > li > a { display: block; color: #333; white-space: nowrap; text-decoration: none; padding: 3px 20px; } .dropdown-menu > li > a:hover { background-color: #f5f5f5; }
This awesome jQuery plugin is developed by xiaohp. For more Advanced Usages, please check the demo page or visit the official website.