Accessible Custom Dropdown Menu – dropmic

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