Mega Menu Implementation for Horizontal Layout Dashboard #910
mmm21121993
started this conversation in
Ideas
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Hi,
First of all, thank you for making this wonderful product and keeping it as an open-source project so that others will also take advantage of the product.
I have used the tabler for three different study projects. The main hurdle was displaying a large number of menu items from the navbar dropdown list.
However, after a bit of studying and googling the same, I have found a solution and implemented it in one of my projects. Please, go through the following changes which I have made to implement the mega menu functionality.
Added following two classes in the tabler.css file
.navbar .has-megamenu {
position: static !important;
}
.navbar .megamenu {
left: 0;
right: 0;
width: 100%;
margin-top: 0;
border-radius:0px;
}
Use .has-megamenu CSS class along with nav-item dropdown CSS class where mega menu is required as follows :
Old :
<li class="nav-item dropdown"></li>
New :
<li class="nav-item dropdown has-megamenu"></li>
Use .megamenu CSS class along with dropdown-menu CSS class where mega menu will be visible on click as follows :
Old :
<div class="dropdown-menu"></div>
New :
<div class="dropdown-menu megamenu"></div>
I Hope, these changes will be integrated into the product so that the same utility is made available for existing and upcoming users.
Thank You, hope to receive a positive reply from your end
Beta Was this translation helpful? Give feedback.
All reactions