Mega Menu click on hover

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Mega Menu click on hover

carlosalviz asked 5 years ago

Hi ! Is there a way to make the MEGA MENU works with ON HOVER instead by clicking the menu? (I meant... if the mouse goes over the menu it opens the options)

Tks,

Arkadiusz Idzikowski staff commented 5 years ago

Unfortunately it's not possible in the current version of mega menu. We will definitely add this feature to the component, but we can't provide an ETA for that yet.

carlosalviz commented 5 years ago

I understand.. tks for the information

Bartosz Termena staff answered 5 years ago

Dear @carlosalviz

Adding triggers="hover" and (mouseleave)="(bs-dropdown).hide()"should work.

Like in example below:

<mdb-navbar #nav SideClass="navbar navbar-expand-lg navbar-dark special-color-dark">

  <mdb-navbar-brand>
  <a class="navbar-brand" href="#">Navbar</a>
  </mdb-navbar-brand>

  <links>

  <ul class="navbar-nav mr-auto">

    <li class="nav-item dropdown mega-dropdown active" mdbDropdown  triggers="hover"  #features="bs-dropdown">
      <a mdbDropdownToggle class="nav-link dropdown-toggle text-uppercase no-caret" aria-haspopup="true" 
        aria-expanded="false">Features</a>
      <div class="dropdown-menu mega-menu v-2 row z-depth-1 special-color" (mouseleave)="features.hide()" >
        <div class="row mx-md-4 mx-1">
          <div class="col-md-6 col-xl-3 sub-menu my-xl-5 mt-5 mb-4">
            <h6 class="sub-title text-uppercase font-weight-bold white-text">Featured</h6>
            <ul class="list-unstyled">
              <li class="">
                <a class="menu-item pl-0" href="">
                  <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Lorem ipsum dolor sit amet
                </a>
              </li>
              <li class="">
                <a class="menu-item pl-0" href="">
                  <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Consectetur adipiscing elit
                </a>
              </li>
              <li class="">
                <a class="menu-item pl-0" href="">
                  <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Sed do eiusmod tempor incididunt
                </a>
              </li>
              <li class="">
                <a class="menu-item pl-0" href="">
                  <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Ut labore et dolore magna
                </a>
              </li>
              <li class="">
                <a class="menu-item pl-0" href="">
                  <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Ut enim ad minim veniam
                </a>
              </li>
            </ul>
          </div>
          <div class="col-md-6 col-xl-3 sub-menu my-xl-5 mt-md-5 mt-4 mb-4">
            <h6 class="sub-title text-uppercase font-weight-bold white-text">Related</h6>
            <ul class="list-unstyled">
              <li class="">
                <a class="menu-item pl-0" href="">
                  <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Quis nostrud exercitation
                </a>
              </li>
              <li class="">
                <a class="menu-item pl-0" href="">
                  <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Duis aute irure dolor in
                </a>
              </li>
              <li class="">
                <a class="menu-item pl-0" href="">
                  <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Laboris nisi ut aliquip ex ea commodo
                  consequat
                </a>
              </li>
              <li class="">
                <a class="menu-item pl-0" href="">
                  <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Reprehenderit in voluptate
                </a>
              </li>
              <li class="">
                <a class="menu-item pl-0" href="">
                  <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Esse cillum dolore eu fugiat nulla
                  pariatur
                </a>
              </li>
            </ul>
          </div>
          <div class="col-md-6 col-xl-3 sub-menu my-xl-5 mt-4 mb-4">
            <h6 class="sub-title text-uppercase font-weight-bold white-text">Design</h6>
            <ul class="list-unstyled">
              <li class="">
                <a class="menu-item pl-0" href="">
                  <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Excepteur sint occaecat
                </a>
              </li>
              <li class="">
                <a class="menu-item pl-0" href="">
                  <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Sunt in culpa qui officia
                </a>
              </li>
              <li class="">
                <a class="menu-item pl-0" href="">
                  <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Sed ut perspiciatis unde omnis iste
                  natus error
                </a>
              </li>
              <li class="">
                <a class="menu-item pl-0" href="">
                  <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Mollit anim id est laborum
                </a>
              </li>
              <li class="">
                <a class="menu-item pl-0" href="">
                  <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Accusantium doloremque laudantium
                </a>
              </li>
            </ul>
          </div>
          <div class="col-md-6 col-xl-3 sub-menu my-xl-5 mt-4 mb-5">
            <h6 class="sub-title text-uppercase font-weight-bold white-text">Programming</h6>
            <ul class="list-unstyled">
              <li class="">
                <a class="menu-item pl-0" href="">
                  <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Totam rem aperiam eaque
                </a>
              </li>
              <li class="">
                <a class="menu-item pl-0" href="">
                  <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Beatae vitae dicta sun
                </a>
              </li>
              <li class="">
                <a class="menu-item pl-0" href="">
                  <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Quae ab illo inventore veritatis et
                  quasi architecto
                </a>
              </li>
              <li class="">
                <a class="menu-item pl-0" href="">
                  <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Nemo enim ipsam voluptatem
                </a>
              </li>
              <li class="">
                <a class="menu-item pl-0" href="">
                  <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Neque porro quisquam est
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </li>
    <li class="nav-item dropdown mega-dropdown" mdbDropdown triggers="hover"  #technology="bs-dropdown"> 
      <a mdbDropdownToggle class="nav-link dropdown-toggle text-uppercase no-caret" aria-haspopup="true"
        aria-expanded="false">Technology</a>
      <div class="dropdown-menu mega-menu v-2 row z-depth-1 special-color" (mouseleave)="technology.hide()">
        <div class="row mx-md-4 mx-1">
          <div class="col-md-12 col-lg-4 sub-menu my-lg-5 mt-5 mb-4">
            <h6 class="sub-title text-uppercase font-weight-bold white-text">Featured</h6>

            <div class="view overlay mb-3 z-depth-1">
              <img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/6-col/img%20(37).jpg" class="img-fluid"
                alt="First sample image">
              <div class="mask rgba-white-slight flex-center">
                <p></p>
              </div>
            </div>
            <h4 class="mb-2">
              <a class="news-title pl-0" href="">Lorem ipsum dolor sit</a>
            </h4>
            <p class="font-small text-uppercase white-text">
              <mdb-icon far icon="clock" class="pr-2" aria-hidden="true"></mdb-icon>July 17, 2017 /
              <mdb-icon far icon="comments" class="px-1" aria-hidden="true"></mdb-icon> 20</p>
          </div>
          <div class="col-md-6 col-lg-4 sub-menu my-lg-5 my-4">
            <h6 class="sub-title text-uppercase font-weight-bold white-text">Related</h6>
            <ul class="list-unstyled">
              <li class="">
                <a class="menu-item pl-0" href="">
                  <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Quis nostrud exercitation
                </a>
              </li>
              <li class="">
                <a class="menu-item pl-0" href="">
                  <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Duis aute irure dolor in
                </a>
              </li>
              <li class="">
                <a class="menu-item pl-0" href="">
                  <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Laboris nisi ut aliquip ex ea commodo
                  consequat
                </a>
              </li>
              <li class="">
                <a class="menu-item pl-0" href="">
                  <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Reprehenderit in voluptate
                </a>
              </li>
              <li class="">
                <a class="menu-item pl-0" href="">
                  <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Esse cillum dolore eu fugiat nulla
                  pariatur
                </a>
              </li>
            </ul>
          </div>
          <div class="col-md-6 col-lg-4 sub-menu my-lg-5 my-4">
            <h6 class="sub-title text-uppercase font-weight-bold white-text">Design</h6>
            <ul class="list-unstyled">
              <li class="">
                <a class="menu-item pl-0" href="">
                  <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Excepteur sint occaecat
                </a>
              </li>
              <li class="">
                <a class="menu-item pl-0" href="">
                  <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Sunt in culpa qui officia
                </a>
              </li>
              <li class="">
                <a class="menu-item pl-0" href="">
                  <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Sed ut perspiciatis unde omnis iste
                  natus error
                </a>
              </li>
              <li class="">
                <a class="menu-item pl-0" href="">
                  <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Mollit anim id est laborum
                </a>
              </li>
              <li class="">
                <a class="menu-item pl-0" href="">
                  <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Accusantium doloremque laudantium
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </li>
    <li class="nav-item dropdown mega-dropdown" mdbDropdown triggers="hover"  #lifestyle="bs-dropdown">
      <a mdbDropdownToggle class="nav-link dropdown-toggle text-uppercase no-caret" aria-haspopup="true"
        aria-expanded="false">Lifestyle</a>
      <div class="dropdown-menu mega-menu v-2 row z-depth-1 special-color" *dropdownMenu  (mouseleave)="lifestyle.hide()" >
        <div class="row mx-md-4 mx-1">
          <div class="col-md-6 col-xl-3 sub-menu my-xl-5 mt-5 mb-4">
            <h6 class="sub-title text-uppercase font-weight-bold white-text">Featured</h6>
            <ul class="list-unstyled">
              <li class="">
                <a class="menu-item pl-0" href="">
                  <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Lorem ipsum dolor sit amet
                </a>
              </li>
              <li class="">
                <a class="menu-item pl-0" href="">
                  <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Consectetur adipiscing elit
                </a>
              </li>
              <li class="">
                <a class="menu-item pl-0" href="">
                  <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Sed do eiusmod tempor incididunt
                </a>
              </li>
              <li class="">
                <a class="menu-item pl-0" href="">
                  <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Ut labore et dolore magna
                </a>
              </li>
              <li class="">
                <a class="menu-item pl-0" href="">
                  <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Ut enim ad minim veniam
                </a>
              </li>
            </ul>
          </div>
          <div class="col-md-6 col-xl-3 sub-menu my-xl-5 mt-md-5 mt-4 mb-4">
            <h6 class="sub-title text-uppercase font-weight-bold white-text">Related</h6>

            <div class="view overlay mb-3 z-depth-1">
              <img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/6-col/img%20(43).jpg" class="img-fluid"
                alt="First sample image">
              <div class="mask rgba-white-slight flex-center">
                <p></p>
              </div>
            </div>
            <h4 class="mb-2">
              <a class="news-title pl-0" href="">Lorem ipsum dolor sit</a>
            </h4>
            <p class="font-small text-uppercase white-text">
              <mdb-icon far icon="clock" class="pr-2" aria-hidden="true"></mdb-icon>July 17, 2017 /
              <mdb-icon far icon="comments" class="px-1" aria-hidden="true"></mdb-icon> 20</p>
          </div>
          <div class="col-md-6 col-xl-3 sub-menu my-xl-5 mt-4 mb-4">
            <h6 class="sub-title text-uppercase font-weight-bold white-text">Design</h6>

            <div class="view overlay mb-3 z-depth-1">
              <img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/6-col/img%20(44).jpg" class="img-fluid"
                alt="First sample image">
              <div class="mask rgba-white-slight flex-center">
                <p></p>
              </div>
            </div>
            <h4 class="mb-2">
              <a class="news-title pl-0" href="">Ut labore et dolore magna</a>
            </h4>
            <p class="font-small text-uppercase white-text">
              <mdb-icon far icon="clock" class="pr-2" aria-hidden="true"></mdb-icon>July 16, 2017 /
              <mdb-icon far icon="comments" class="px-1" aria-hidden="true"></mdb-icon> 25</p>
          </div>
          <div class="col-md-6 col-xl-3 sub-menu my-xl-5 mt-4 mb-5">
            <h6 class="sub-title text-uppercase font-weight-bold white-text">Programming</h6>
            <ul class="list-unstyled">
              <li class="">
                <a class="menu-item pl-0" href="">
                  <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Totam rem aperiam eaque
                </a>
              </li>
              <li class="">
                <a class="menu-item pl-0" href="">
                  <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Beatae vitae dicta sun
                </a>
              </li>
              <li class="">
                <a class="menu-item pl-0" href="">
                  <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Quae ab illo inventore veritatis et
                  quasi architecto
                </a>
              </li>
              <li class="">
                <a class="menu-item pl-0" href="">
                  <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Nemo enim ipsam voluptatem
                </a>
              </li>
              <li class="">
                <a class="menu-item pl-0" href="">
                  <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Neque porro quisquam est
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </li>

  </ul>

  <form class="form-inline waves-light" mdbWavesEffect>
    <div class="md-form mt-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search">
    </div>
  </form>
  </links>


  </mdb-navbar>

TS

 @ViewChild('nav', { static: true }) nav: NavbarComponent;

  constructor(private renderer: Renderer2, private el: ElementRef) {}

  transformDropdowns() {
    const dropdownMenu = Array.from(this.el.nativeElement.querySelectorAll('.dropdown-menu'));
    const navHeight = this.nav.navbar.nativeElement.clientHeight + 'px';

    dropdownMenu.forEach(dropdown => {
      this.renderer.setStyle(dropdown, 'transform', `translateY(${navHeight})`);
    });
  }

  @HostListener('click', ['$event'])
  onClick(event) {
    const toggler = this.el.nativeElement.querySelector('.navbar-toggler');
    const togglerIcon = this.el.nativeElement.querySelector('.navbar-toggler-icon');
    if (event.target === toggler || event.target === togglerIcon) {
      console.log('test');
      setTimeout(() => {
        this.transformDropdowns();
      }, 351);
    }
  }

  @HostListener('document:scroll', ['$event'])
  onScroll() {
    this.transformDropdowns();
  }

  @HostListener('window:resize', ['$event'])
  onResize() {
    this.transformDropdowns();
  }

  ngAfterViewInit() {
    this.transformDropdowns();
  }

Hope it helps!

Best Regards, Bartosz.

Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

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

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.5.3
  • Device: -
  • Browser: Chrome
  • OS: Win10
  • Provided sample code: No
  • Provided link: No
Tags
#menu-#mega-menu
About author
carlosalviz
165Support score
7Questions 13Answers
0Snippets likes 0Snippets