1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Mega menu not working

Mike Lupo premium asked 3 years ago

Expected behavior The drop down menus should work Actual behavior When clicking the drop down nothing happens Resources (screenshots, code snippets etc.) I bought the angular pro version does this mean I bought the wrong stuff? Or am I missing modules? I’m not exactally new to angular but new to all this stuff on this site

Arkadiusz Idzikowski staff commented 3 years ago

Plase add the code that you used to render the mega menu to the first post. Are there any errors in the console when you try to open the dropdown? Did you follow our quick start guide to configure your Angular project properly?

https://mdbootstrap.com/docs/angular/getting-started/quick-start/

Mike Lupo premium commented 3 years ago

I pasted code below. as i write this i realize i did install the angular bootstrap modules, but not the pro version using OAuth... I will test this later, you can close this ticket, if i have another issue ill re-open :) I used the standard HTML that it was showing to use

Navbar

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

  <!-- Features -->
  <li class="nav-item dropdown mega-dropdown active">
    <a class="nav-link dropdown-toggle text-uppercase" id="navbarDropdownMenuLink2" data-toggle="dropdown"
      aria-haspopup="true" aria-expanded="false">Features
      <span class="sr-only">(current)</span>
    </a>
    <div class="dropdown-menu mega-menu v-2 z-depth-1 pink darken-4 py-5 px-3"
      aria-labelledby="navbarDropdownMenuLink2">
      <div class="row">
        <div class="col-md-6 col-xl-3 sub-menu mb-xl-0 mb-4">
          <h6 class="sub-title text-uppercase font-weight-bold white-text">Featured</h6>
          <ul class="list-unstyled">
            <li>
              <a class="menu-item pl-0" href="#!">
                <i class="fas fa-caret-right pl-1 pr-3"></i>Lorem ipsum dolor sit amet
              </a>
            </li>
            <li>
              <a class="menu-item pl-0" href="#!">
                <i class="fas fa-caret-right pl-1 pr-3"></i>Consectetur adipiscing elit
              </a>
            </li>
            <li>
              <a class="menu-item pl-0" href="#!">
                <i class="fas fa-caret-right pl-1 pr-3"></i>Sed do eiusmod tempor incididunt
              </a>
            </li>
            <li>
              <a class="menu-item pl-0" href="#!">
                <i class="fas fa-caret-right pl-1 pr-3"></i>Ut labore et dolore magna
              </a>
            </li>
            <li>
              <a class="menu-item pl-0" href="#!">
                <i class="fas fa-caret-right pl-1 pr-3"></i>Ut enim ad minim veniam
              </a>
            </li>
          </ul>
        </div>
        <div class="col-md-6 col-xl-3 sub-menu mb-xl-0 mb-4">
          <h6 class="sub-title text-uppercase font-weight-bold white-text">Related</h6>
          <ul class="list-unstyled">
            <li>
              <a class="menu-item pl-0" href="#!">
                <i class="fas fa-caret-right pl-1 pr-3"></i>Quis nostrud exercitation
              </a>
            </li>
            <li>
              <a class="menu-item pl-0" href="#!">
                <i class="fas fa-caret-right pl-1 pr-3"></i>Duis aute irure dolor in
              </a>
            </li>
            <li>
              <a class="menu-item pl-0" href="#!">
                <i class="fas fa-caret-right pl-1 pr-3"></i>Laboris nisi ut aliquip ex ea commodo consequat
              </a>
            </li>
            <li>
              <a class="menu-item pl-0" href="#!">
                <i class="fas fa-caret-right pl-1 pr-3"></i>Reprehenderit in voluptate
              </a>
            </li>
            <li>
              <a class="menu-item pl-0" href="#!">
                <i class="fas fa-caret-right pl-1 pr-3"></i>Esse cillum dolore eu fugiat nulla pariatur
              </a>
            </li>
          </ul>
        </div>
        <div class="col-md-6 col-xl-3 sub-menu mb-md-0 mb-xl-0 mb-4">
          <h6 class="sub-title text-uppercase font-weight-bold white-text">Design</h6>
          <ul class="list-unstyled">
            <li>
              <a class="menu-item pl-0" href="#!">
                <i class="fas fa-caret-right pl-1 pr-3"></i>Excepteur sint occaecat
              </a>
            </li>
            <li>
              <a class="menu-item pl-0" href="#!">
                <i class="fas fa-caret-right pl-1 pr-3"></i>Sunt in culpa qui officia
              </a>
            </li>
            <li>
              <a class="menu-item pl-0" href="#!">
                <i class="fas fa-caret-right pl-1 pr-3"></i>Sed ut perspiciatis unde omnis iste natus error
              </a>
            </li>
            <li>
              <a class="menu-item pl-0" href="#!">
                <i class="fas fa-caret-right pl-1 pr-3"></i>Mollit anim id est laborum
              </a>
            </li>
            <li>
              <a class="menu-item pl-0" href="#!">
                <i class="fas fa-caret-right pl-1 pr-3"></i>Accusantium doloremque laudantium
              </a>
            </li>
          </ul>
        </div>
        <div class="col-md-6 col-xl-3 sub-menu mb-0">
          <h6 class="sub-title text-uppercase font-weight-bold white-text">Programming</h6>
          <ul class="list-unstyled">
            <li>
              <a class="menu-item pl-0" href="#!">
                <i class="fas fa-caret-right pl-1 pr-3"></i>Totam rem aperiam eaque
              </a>
            </li>
            <li>
              <a class="menu-item pl-0" href="#!">
                <i class="fas fa-caret-right pl-1 pr-3"></i>Beatae vitae dicta sun
              </a>
            </li>
            <li>
              <a class="menu-item pl-0" href="#!">
                <i class="fas fa-caret-right pl-1 pr-3"></i>Quae ab illo inventore veritatis et quasi
                architecto
              </a>
            </li>
            <li>
              <a class="menu-item pl-0" href="#!">
                <i class="fas fa-caret-right pl-1 pr-3"></i>Nemo enim ipsam voluptatem
              </a>
            </li>
            <li>
              <a class="menu-item pl-0" href="#!">
                <i class="fas fa-caret-right pl-1 pr-3"></i>Neque porro quisquam est
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </li>
  <!-- Technology -->
  <li class="nav-item dropdown mega-dropdown">
    <a class="nav-link dropdown-toggle text-uppercase" id="navbarDropdownMenuLink3" data-toggle="dropdown"
      aria-haspopup="true" aria-expanded="false">Technology</a>
    <div class="dropdown-menu mega-menu v-2 z-depth-1 pink darken-4 py-5 px-3"
      aria-labelledby="navbarDropdownMenuLink3">
      <div class="row">
        <div class="col-md-12 col-xl-4 sub-menu mb-xl-0 mb-4">
          <h6 class="sub-title text-uppercase font-weight-bold white-text">Featured</h6>
          <!--Featured image-->
          <a href="#!" class="view overlay z-depth-1 p-0 mb-2">
            <img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/8-col/img%20(37).jpg"
              class="img-fluid" alt="First sample image">
            <div class="mask rgba-white-slight"></div>
          </a>
          <a class="news-title font-weight-bold pl-0" href="#!">Lorem ipsum dolor sit</a>
          <p class="font-small text-uppercase white-text">
            <i class="fas fa-clock-o pr-2" aria-hidden="true"></i>July 17, 2017 / <i
              class="far fa-comments px-1" aria-hidden="true"></i> 20
          </p>
        </div>
        <div class="col-md-6 col-xl-4 sub-menu mb-md-0 mb-4">
          <h6 class="sub-title text-uppercase font-weight-bold white-text">Related</h6>
          <ul class="list-unstyled">
            <li>
              <a class="menu-item pl-0" href="#!">
                <i class="fas fa-caret-right pl-1 pr-3"></i>Quis nostrud exercitation
              </a>
            </li>
            <li>
              <a class="menu-item pl-0" href="#!">
                <i class="fas fa-caret-right pl-1 pr-3"></i>Duis aute irure dolor in
              </a>
            </li>
            <li>
              <a class="menu-item pl-0" href="#!">
                <i class="fas fa-caret-right pl-1 pr-3"></i>Laboris nisi ut aliquip ex ea commodo consequat
              </a>
            </li>
            <li>
              <a class="menu-item pl-0" href="#!">
                <i class="fas fa-caret-right pl-1 pr-3"></i>Reprehenderit in voluptate
              </a>
            </li>
            <li>
              <a class="menu-item pl-0" href="#!">
                <i class="fas fa-caret-right pl-1 pr-3"></i>Esse cillum dolore eu fugiat nulla pariatur
              </a>
            </li>
          </ul>
        </div>
        <div class="col-md-6 col-xl-4 sub-menu mb-0">
          <h6 class="sub-title text-uppercase font-weight-bold white-text">Design</h6>
          <ul class="list-unstyled">
            <li>
              <a class="menu-item pl-0" href="#!">
                <i class="fas fa-caret-right pl-1 pr-3"></i>Excepteur sint occaecat
              </a>
            </li>
            <li>
              <a class="menu-item pl-0" href="#!">
                <i class="fas fa-caret-right pl-1 pr-3"></i>Sunt in culpa qui officia
              </a>
            </li>
            <li>
              <a class="menu-item pl-0" href="#!">
                <i class="fas fa-caret-right pl-1 pr-3"></i>Sed ut perspiciatis unde omnis iste natus error
              </a>
            </li>
            <li>
              <a class="menu-item pl-0" href="#!">
                <i class="fas fa-caret-right pl-1 pr-3"></i>Mollit anim id est laborum
              </a>
            </li>
            <li>
              <a class="menu-item pl-0" href="#!">
                <i class="fas fa-caret-right pl-1 pr-3"></i>Accusantium doloremque laudantium
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </li>
  <!-- Lifestyle -->
  <li class="nav-item dropdown mega-dropdown">
    <a class="nav-link dropdown-toggle text-uppercase" id="navbarDropdownMenuLink4" data-toggle="dropdown"
      aria-haspopup="true" aria-expanded="false">Lifestyle</a>
    <div class="dropdown-menu mega-menu v-2 z-depth-1 pink darken-4 py-5 px-3"
      aria-labelledby="navbarDropdownMenuLink4">
      <div class="row">
        <div class="col-md-6 col-xl-3 sub-menu mb-4">
          <h6 class="sub-title text-uppercase font-weight-bold white-text">Featured</h6>
          <ul class="list-unstyled">
            <li>
              <a class="menu-item pl-0" href="#!">
                <i class="fas fa-caret-right pl-1 pr-3"></i>Lorem ipsum dolor sit amet
              </a>
            </li>
            <li>
              <a class="menu-item pl-0" href="#!">
                <i class="fas fa-caret-right pl-1 pr-3"></i>Consectetur adipiscing elit
              </a>
            </li>
            <li>
              <a class="menu-item pl-0" href="#!">
                <i class="fas fa-caret-right pl-1 pr-3"></i>Sed do eiusmod tempor incididunt
              </a>
            </li>
            <li>
              <a class="menu-item pl-0" href="#!">
                <i class="fas fa-caret-right pl-1 pr-3"></i>Ut labore et dolore magna
              </a>
            </li>
            <li>
              <a class="menu-item pl-0" href="#!">
                <i class="fas fa-caret-right pl-1 pr-3"></i>Ut enim ad minim veniam
              </a>
            </li>
          </ul>
        </div>
        <div class="col-md-6 col-xl-3 sub-menu mb-4 mb-xl-0">
          <h6 class="sub-title text-uppercase font-weight-bold white-text">Related</h6>
          <!--Featured image-->
          <a href="#!" class="view overlay z-depth-1 p-0 mb-2">
            <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"></div>
          </a>
          <a class="news-title font-weight-bold pl-0" href="#!">Lorem ipsum dolor sit</a>
          <p class="font-small text-uppercase white-text">
            <i class="fas fa-clock-o pr-2" aria-hidden="true"></i>July 17, 2017 / <i
              class="far fa-comments px-1" aria-hidden="true"></i> 20
          </p>
        </div>
        <div class="col-md-6 col-xl-3 sub-menu mb-md-0 mb-xl-0 mb-4">
          <h6 class="sub-title text-uppercase font-weight-bold white-text">Design</h6>
          <!--Featured image-->
          <a href="#!" class="view overlay z-depth-1 p-0 mb-2">
            <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"></div>
          </a>
          <a class="news-title font-weight-bold pl-0" href="#!">Ut labore et dolore magna</a>
          <p class="font-small text-uppercase white-text">
            <i class="fas fa-clock-o pr-2" aria-hidden="true"></i>July 16, 2017 / <i
              class="far fa-comments px-1" aria-hidden="true"></i> 25
          </p>
        </div>
        <div class="col-md-6 col-xl-3 sub-menu mb-0">
          <h6 class="sub-title text-uppercase font-weight-bold white-text">Programming</h6>
          <ul class="list-unstyled">
            <li>
              <a class="menu-item pl-0" href="#!">
                <i class="fas fa-caret-right pl-1 pr-3"></i>Totam rem aperiam eaque
              </a>
            </li>
            <li>
              <a class="menu-item pl-0" href="#!">
                <i class="fas fa-caret-right pl-1 pr-3"></i>Beatae vitae dicta sun
              </a>
            </li>
            <li>
              <a class="menu-item pl-0" href="#!">
                <i class="fas fa-caret-right pl-1 pr-3"></i>Quae ab illo inventore veritatis et quasi
                architecto
              </a>
            </li>
            <li>
              <a class="menu-item pl-0" href="#!">
                <i class="fas fa-caret-right pl-1 pr-3"></i>Nemo enim ipsam voluptatem
              </a>
            </li>
            <li>
              <a class="menu-item pl-0" href="#!">
                <i class="fas fa-caret-right pl-1 pr-3"></i>Neque porro quisquam est
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </li>
  <!-- Multi-level dropdown -->
  <li class="nav-item dropdown multi-level-dropdown">
    <a href="#" id="menu" data-toggle="dropdown"
      class="nav-link dropdown-toggle text-uppercase">Multi-level</a>
    <ul class="dropdown-menu mt-2 rounded-0 pink darken-4 border-0 z-depth-1">
      <li class="dropdown-item dropdown-submenu p-0">
        <a href="#" data-toggle="dropdown" class="dropdown-toggle text-white w-100">Click Me! </a>
        <ul class="dropdown-menu ml-2 rounded-0 pink darken-4 border-0 z-depth-1">
          <li class="dropdown-item p-0">
            <a href="#" class="text-white w-100">Hey</a>
          </li>
          <li class="dropdown-item p-0">
            <a href="#" class="text-white w-100">Hi</a>
          </li>
          <li class="dropdown-item p-0">
            <a href="#" class="text-white w-100">Hello</a>
          </li>
        </ul>
      </li>
      <li class="dropdown-item dropdown-submenu p-0">
        <a href="#" data-toggle="dropdown" class="dropdown-toggle text-white w-100">Click Me Too! </a>
        <ul class="dropdown-menu mr-2 rounded-0 pink darken-4 border-0 z-depth-1 r-100 l-auto">
          <li class="dropdown-item p-0">
            <a href="#" class="text-white w-100">How</a>
          </li>
          <li class="dropdown-item p-0">
            <a href="#" class="text-white w-100">are</a>
          </li>
          <li class="dropdown-item p-0">
            <a href="#" class="text-white w-100">you?</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>

</ul>
<!-- Links -->

<!-- Search form -->
<form class="form-inline">
  <div class="md-form my-0">
    <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
  </div>
</form>

also added the javascript $('.multi-level-dropdown .dropdown-submenu > a').on("click", function(e) { var submenu = $(this); $('.multi-level-dropdown .dropdown-submenu .dropdown-menu').removeClass('show'); submenu.next('.dropdown-menu').addClass('show'); e.stopPropagation(); });

$('.multi-level-dropdown .dropdown').on("hidden.bs.dropdown", function() { // hide any open menus when parent closes $('.multi-level-dropdown .dropdown-menu.show').removeClass('show'); });

Arkadiusz Idzikowski staff commented 3 years ago

Is this problem resolved?
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

Opened

Specification of the issue
  • ForumUser: Premium
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: 9.3.1
  • Device: Desktop
  • Browser: Chrome
  • OS: Win10
  • Provided sample code: No
  • Provided link: No
Tags
angular megamenu
About author
Mike Lupo
Premium support 10Support score
2Questions 0Answers 0Snippets