Looking to create an interactive dropdown menu with the Alloy UI Dropdown Component that appears when a user clicks on one of four buttons. The goal is for this dropdown to be positioned to the left of the clicked button.
var toolsDropdown = new Y.Dropdown({
boundingBox: '#my-div',
trigger: '.option',
hideOnClickOutSide: true,
hideOnEsc: true
}).render();
The intention is for the Dropdown menu to dynamically appear next to the button clicked, which are displayed in rows of a table-like structure.
<div id="my-div">
<div id="container-1">
<button id="options-btn-1" class="option" type="button">Option one</button>
</div>
<div id="container-2">
<button id="options-btn-2" class="option" type="button">Option two</button>
</div>
<div id="container-3">
<button id="options-btn-3" class="option" type="button">Option three</button>
</div>
<div id="container-4">
<button id="options-btn-4" class="option" type="button">Option four</button>
</div>
</div>
A listener has been set up to detect each button click event
Y.all('button.option-btn').on('click', displayDropdown);
Struggling to get the functionality to work as expected with the Alloy's Dropdown component - any suggestions or insights would be greatly appreciated.
Considering potentially using YUI's Overlay Widget instead
Overlay is a customizable and flexible widget that supports module format layout with header, body, and footer sections.