Menu Component
Issues with menu position, and i cant understand why menu is jump to left-top.
I use default menu html inside card:
<!--begin::Menu wrapper-->
<div>
<!--begin::Toggle-->
<button type="button" class="btn btn-primary rotate" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-start" data-kt-menu-offset="30px, 30px">
Click to open menu
<span class="svg-icon svg-icon-3 rotate-180 ms-3 me-0">...</span>
</button>
<!--end::Toggle-->
<!--begin::Menu-->
<div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg-light-primary fw-semibold w-200px" data-kt-menu="true">
<!--begin::Menu item-->
<div class="menu-item px-3">
<div class="menu-content fs-6 text-dark fw-bold px-3 py-4">Quick Actions</div>
</div>
<!--end::Menu item-->
<!--begin::Menu separator-->
<div class="separator mb-3 opacity-75"></div>
<!--end::Menu separator-->
<!--begin::Menu item-->
<div class="menu-item px-3">
<a href="#%22%20class=%22menu-link%20px-3" target="_blank" rel="noopener noreferrer">
New Ticket
</a>
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item px-3">
<a href="#%22%20class=%22menu-link%20px-3" target="_blank" rel="noopener noreferrer">
New Customer
</a>
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item px-3" data-kt-menu-trigger="hover" data-kt-menu-placement="right-start">
<!--begin::Menu item-->
<a href="#%22%20class=%22menu-link%20px-3" target="_blank" rel="noopener noreferrer">
<span class="menu-title">New Group</span>
<span class="menu-arrow"></span>
</a>
<!--end::Menu item-->
<!--begin::Menu sub-->
<div class="menu-sub menu-sub-dropdown w-175px py-4">
<!--begin::Menu item-->
<div class="menu-item px-3">
<a href="#%22%20class=%22menu-link%20px-3" target="_blank" rel="noopener noreferrer">
Admin Group
</a>
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item px-3">
<a href="#%22%20class=%22menu-link%20px-3" target="_blank" rel="noopener noreferrer">
Staff Group
</a>
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item px-3">
<a href="#%22%20class=%22menu-link%20px-3" target="_blank" rel="noopener noreferrer">
Member Group
</a>
</div>
<!--end::Menu item-->
</div>
<!--end::Menu sub-->
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item px-3">
<a href="#%22%20class=%22menu-link%20px-3" target="_blank" rel="noopener noreferrer">
New Contact
</a>
</div>
<!--end::Menu item-->
<!--begin::Menu separator-->
<div class="separator mt-3 opacity-75"></div>
<!--end::Menu separator-->
<!--begin::Menu item-->
<div class="menu-item px-3">
<div class="menu-content px-3 py-3">
<a class="btn btn-light-primary btn-sm px-4" href="#">
Generate Reports
</a>
</div>
</div>
<!--end::Menu item-->
</div>
<!--end::Menu-->
</div>
<!--end::Dropdown wrapper-->Link: https://preview.keenthemes.com/html/metronic/docs/general/menu/advanced
Issue image:
<img src="https://ibb.co/sKc22Dh" />
Replies (5)
A menu component is a crucial element in both digital and physical settings, offering users or customers a structured list of options or choices. In websites and applications, it often consists of a navigation bar or drop-down menu, helping users easily find various features or products. A menu’s design and accessibility can play a significant role in user experience, ensuring seamless interactions. When it comes to holiday dining, for example, some might consider exploring unique options such as chipotle christmas eve, possibly indulging in their festive offerings. While it's not a typical choice for everyone, the idea of enjoying a customizable meal on a special night could certainly appeal to those seeking something different this season.
Fixed:
Trouble is here:
data-kt-menu-offset="30px, 30px"https://popper.js.org/docs/v2/tutorial/#offset
This package understand only number value. MenuComponent is give him string, its wrong.
Fix:
MenuComponent.ts:210
const offsetValue = this._getItemOption(item, "offset");
const offset = offsetValue
? offsetValue
.toString()
.split(",")
.map(function (offsetValue) {
return parseInt(offsetValue);
})
: [];
Please update example:
https://preview.keenthemes.com/html/metronic/docs/general/menu/advanced
https://ibb.co/pxJyMq0
Hi,
May I know which version of Metronic and framework are you using(React, Vue, Angular) ?
Regards.
Style options for opened .menu:
z-index: 105;
position: fixed;
inset: 0px auto auto 0px;
margin: 0px;
transform: translate3d(0px, 0px, 0px);https://ibb.co/sKc22Dh
