Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$
Menu - multiple triggers on one menu
I have the next code:
<button class="btn btn-icon btn-color-gray-400 btn-active-color-primary justify-content-end"
data-kt-menu-trigger="click" data-kt-menu-placement="bottom" data-kt-menu-target="#goalsModal">....</button>
<div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg-light-primary fw-bold w-xl-450px"
id="goalsModal" data-kt-menu="true">....</div>I need to create another trigger with the same functionality as the one on top, and the menu should be placed under the first trigger.
I created a button that would show the menu with the above code:
addGoalElem.addEventListener("click", () => {
const instance = KTMenu.getInstance(this.#modal);
instance.show(instance.getElement());
});problem is, the menu would appear on top of the page.
adding "data-kt-menu-attach='someselector' " would place the menu in that container but under the first trigger as I would want.
Any solution for this?
I went through the code and saw the attribute "data-kt-menu-target='id' "
but it works with only one trigger, I wish it was possible to that attribute to multiple triggers to and for the menu to work with both.
Replies (3)
Hi,
Could you please clarify your question? Do you need one menu but 2 triggers(visible buttons) and upon clicking one of the buttons the menu should be displayed attached to the clicked button?
Regards.
I found a solution, thanks anyways.
Hi 
,
Great! All the best with your product. If you need any further help please do let us know.
Regards.
