Topic: Prevent mega menu from automatically closing on click
I am trying to do this in order to effectively build a multi level menu within a mega menu, for example (using the first item within the light "News" example online at: https://mdbootstrap.com/docs/vue/navigation/mega-menu/)... if you click an item within the list of categories on the left (laptops; phones; etc), the featured item will change to the featured item for that category... any idea how to achieve this?
Within angular mdb, there is a reference to [autoClose=false] however this does not seem to be present on the dropdown menu (mega or otherwise) within vue.
Any idea to achieve this with the Vue.js component? - I have tried multiple things including a click event to stopPropagation, preventDefault() and also css to set pointer-events: none; for the megamenu container, however none have worked !
Many thanks.
In our package we don't have an option to alter this behaviour, but in Vue.js you can add simply @click.stop to the item and it should prevent Dropdown from closing:
<ul class="list-unstyled">
<li class="sub-title text-uppercase">
<a
class="menu-item pl-1 mt-2"
@click.stop
>
Laptops
</a>
</li>
<li class="sub-title text-uppercase">
<a class="menu-item pl-1 mt-2" @click.stop="changeView('phones')">
Phones
</a>
</li>
<li class="sub-title text-uppercase">
<a class="menu-item pl-1 mt-2" @click.stop="changeView('lifestyle')">>
Lifestyle
</a>
</li>
<li class="sub-title text-uppercase">
<a class="menu-item pl-1 mt-2" @click.stop="changeView('technology')">>
Technology
</a>
</li>
<li class="sub-title text-uppercase">
<a class="menu-item pl-1 mt-2" @click.stop="changeView('design')">>
Design
</a>
</li>
</ul>
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Pro
- Premium support: Yes
- Technology: MDB Vue
- MDB Version: 6.7.0
- Device: Desktop
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: Yes