Prevent mega menu from automatically closing on click


Topic: Prevent mega menu from automatically closing on click

SoftWebMike priority asked 2 years ago

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.


Magdalena Dembna staff answered 2 years ago

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>

SoftWebMike priority commented 2 years ago

That worked great, thank you :)


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: Priority
  • Premium support: Yes
  • Technology: MDB Vue
  • MDB Version: 6.7.0
  • Device: Desktop
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes