Author: | agence-webup |
---|---|
Views Total: | 989 views |
Official Page: | Go to website |
Last Update: | January 18, 2020 |
License: | MIT |
Preview:

Description:
dropmic is a tiny, zero-dependency JS library that appends a minimal clean dropdown/popup menu to any element when triggered.
How to use it:
Load the dropmic’s style sheet in the header that will provide the default CSS styles for the dropdown menu.
<link rel="stylesheet" href="/dropmic.css">
Create a default dropdown menu that will appear at the ‘bottom right’ of the trigger button.
<span class="dropmic" data-dropmic="1" role="navigation"> <button data-dropmic-btn>Bottom right (default)</button> <div class="dropmic-menu" aria-hidden="true"> <div class="dropmic-menu__custom">Custom content</div> <ul class="dropmic-menu__list" role="menu"> <li class="dropmic-menu__listItem" role="menuitem"> <a class="dropmic-menu__listContent" tabindex="-1" href="http://example.com">label link</a> </li> <li class="dropmic-menu__listItem" role="menuitem"> <button class="dropmic-menu__listContent" tabindex="-1">button</button> </li> </ul> </div> </span>
Initialize the dropdown menu and done.
var dropmic = new Dropmic(document.querySelector('[data-dropmic="1"]'));
Add custom links to the dropdown menu.
dropmic.addLink('link 1', 'https://cssscript.com')
Set custom content dynamically:
dropmic.setCustomContent("Custom content");
Close the dropdown menu manually:
dropmic.close();
Set the direction of the dropdown menu using HTML attributes as shown below:
<span class="dropmic" data-dropmic="2" data-dropmic-direction="bottom-left"> <button data-dropmic-btn>Bottom left</button> </span> <span class="dropmic" data-dropmic="3" data-dropmic-direction="bottom-middle"> <button data-dropmic-btn>Bottom middle</button> </span> <span class="dropmic" data-dropmic="4" data-dropmic-direction="top-middle"> <button data-dropmic-btn>Top middle</button> </span> <span class="dropmic" data-dropmic="5" data-dropmic-direction="top-left"> <button data-dropmic-btn>Top left</button> </span> <span class="dropmic" data-dropmic="6" data-dropmic-direction="top-right"> <button data-dropmic-btn>Top right</button> </span>
Callback functions:
var dropmic = new Dropmic(document.querySelector('[data-dropmic="1"]'),{ onOpen: function(){}, onClose: function(){}, beforeOpen: function(){}, beforeClose: function(){}, });
More API methods.
// adds a new button dropmic.addBtn(label, callback) // adds a new label dropmic.addLabel(label) // sets custom content dropmic.setCustomContent(content) // updates target button dropmic.updateTargetBtn(content) // opens the dropdown dropmic.open()
Changelog:
v0.3.3 (01/18/2020)
- Use template strings in html constructors
09/22/2018
- Permit to update target button content