1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Megamenu Not Behaving as Provided Snippet

staffordjh priority asked 8 months ago

Expected behavior I was using the snippet below to begin my Megamenu.

https://mdbootstrap.com/snippets/Standard/mdbootstrap/3259221

When this snippet loads, the clickable nav link that displays the megamenu is seen, and the megamenu is properly hidden from view.

enter image description here

And after clicking on the "Click me" to toggle the megamenu into view, I get the megamenu as expected

enter image description here

Actual behavior

There was no CSS or Javascript included with the snippet, so I assumed it would work as HTML alone and data attributes. So, I have copied and pasted the actual HTML code with data attributes from snippet into the HTML of my navbar component expecting similar results.

<div class="container my-5 py-5">
  <section class="mb-5">
    <nav class="navbar navbar-expand-lg navbar-light rounded-4">
      <div class="container-fluid">
        <ul class="navbar-nav">
          <li class="nav-item dropdown position-static">
            <a
              class="nav-link dropdown-toggle"
              href="#"
              id="megaMenu2"
              role="button"
              data-mdb-dropdown-init
              data-mdb-ripple-init
              aria-expanded="false"
            >
              Click me
            </a>

        <div
             class="dropdown-menu w-100 mt-0"
             aria-labelledby="megaMenu2"
             style="border-top-left-radius: 0; border-top-right-radius: 0"
             >
          <div class="container">
            <div class="row my-4">
              <div class="col-md-6 col-lg-3 mb-3 mb-lg-0">
                <div class="list-group list-group-flush text-center">
                  <a
                     href=""
                     class="list-group-item list-group-item-action border-0 d-flex align-items-center mb-2"
                     ><img
                           src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/_assets/img/icons/mdb-new.png"
                           height="25px"
                           class="me-3"
                           alt="mdb logo"
                           />MDBootstrap</a
                    >
                  <a
                     href=""
                     class="list-group-item list-group-item-action border-0 d-flex align-items-center mb-2"
                     ><img
                           src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/_assets/img/icons/react.png"
                           height="25px"
                           class="me-3"
                           alt="mdb logo"
                           />React</a
                    >
                  <a
                     href=""
                     class="list-group-item list-group-item-action border-0 d-flex align-items-center mb-2"
                     ><img
                           src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/_assets/img/icons/angular.png"
                           height="25px"
                           class="me-3"
                           alt="mdb logo"
                           />Angular</a
                    >
                  <a
                     href=""
                     class="list-group-item list-group-item-action border-0 d-flex align-items-center mb-2"
                     ><img
                           src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/_assets/img/icons/vue.png"
                           height="25px"
                           class="me-3"
                           alt="mdb logo"
                           />Vue</a
                    >
                  <a
                     href=""
                     class="list-group-item list-group-item-action border-0 d-flex align-items-center mb-2"
                     ><img
                           src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/_assets/img/icons/wordpress.png"
                           height="25px"
                           class="me-3"
                           alt="mdb logo"
                           />WordPress</a
                    >
                </div>
              </div>
              <div class="col-md-6 col-lg-3 mb-3 mb-lg-0">
                <div class="list-group list-group-flush text-center">
                  <a
                     href=""
                     class="list-group-item list-group-item-action border-0 d-flex align-items-center mb-2"
                     ><img
                           src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/_assets/img/icons/laravel.png"
                           height="25px"
                           class="me-3"
                           alt="mdb logo"
                           />Laravel</a
                    >
                  <a
                     href=""
                     class="list-group-item list-group-item-action border-0 d-flex align-items-center mb-2"
                     ><img
                           src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/_assets/img/icons/nodejs.png"
                           height="25px"
                           class="me-3"
                           alt="mdb logo"
                           />Node.js</a
                    >
                  <a
                     href=""
                     class="list-group-item list-group-item-action border-0 d-flex align-items-center mb-2"
                     ><img
                           src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/_assets/img/icons/mongodb.png"
                           height="25px"
                           class="me-3"
                           alt="mdb logo"
                           />Mongo DB</a
                    >
                  <a
                     href=""
                     class="list-group-item list-group-item-action border-0 d-flex align-items-center mb-2"
                     ><img
                           src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/_assets/img/icons/python.png"
                           height="25px"
                           class="me-3"
                           alt="mdb logo"
                           />Python</a
                    >
                  <a
                     href=""
                     class="list-group-item list-group-item-action border-0 d-flex align-items-center mb-2"
                     ><img
                           src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/_assets/img/icons/mysql.png"
                           height="25px"
                           class="me-3"
                           alt="mdb logo"
                           />MySQL</a
                    >
                </div>
              </div>

              <div class="col-md-6 col-lg-3 mb-3 mb-lg-0">
                <div class="list-group list-group-flush text-center">
                  <a
                     href=""
                     class="list-group-item list-group-item-action border-0 d-flex align-items-center mb-2"
                     ><img
                           src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/_assets/img/icons/php.png"
                           height="25px"
                           class="me-3"
                           alt="mdb logo"
                           />PHP</a
                    >
                  <a
                     href=""
                     class="list-group-item list-group-item-action border-0 d-flex align-items-center mb-2"
                     ><img
                           src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/_assets/img/icons/javascript.png"
                           height="25px"
                           class="me-3"
                           alt="mdb logo"
                           />Pure JavaScript</a
                    >
                  <a
                     href=""
                     class="list-group-item list-group-item-action border-0 d-flex align-items-center mb-2"
                     ><img
                           src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/_assets/img/icons/html.png"
                           height="25px"
                           class="me-3"
                           alt="mdb logo"
                           />Any static website</a
                    >
                  <a
                     href=""
                     class="list-group-item list-group-item-action border-0 d-flex align-items-center mb-2"
                     ><img
                           src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/_assets/img/icons/expressjs.png"
                           height="25px"
                           class="me-3"
                           alt="mdb logo"
                           />Express</a
                    >
                  <a
                     href=""
                     class="list-group-item list-group-item-action border-0 d-flex align-items-center mb-2"
                     ><img
                           src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/_assets/img/icons/socketio.png"
                           height="25px"
                           class="me-3"
                           alt="mdb logo"
                           />SocketIO</a
                    >
                </div>
              </div>

              <div class="col-md-6 col-lg-3 mb-3 mb-lg-0">
                <div class="list-group list-group-flush text-center">
                  <a
                     href=""
                     class="list-group-item list-group-item-action border-0 d-flex align-items-center mb-2"
                     ><img
                           src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/_assets/img/icons/passport.png"
                           height="25px"
                           class="me-3"
                           alt="mdb logo"
                           />Passport</a
                    >
                  <a
                     href=""
                     class="list-group-item list-group-item-action border-0 d-flex align-items-center mb-2"
                     ><img
                           src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/_assets/img/icons/tailwindcss.png"
                           height="18px"
                           width="24px"
                           class="me-3"
                           alt="mdb logo"
                           />Tailwind CSS</a
                    >
                  <a
                     href=""
                     class="list-group-item list-group-item-action border-0 d-flex align-items-center mb-2"
                     ><img
                           src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/_assets/img/icons/jamstack.png"
                           height="25px"
                           class="me-3"
                           alt="mdb logo"
                           />Jamstack</a
                    >
                </div>
              </div>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</nav>
 </section>

   </div>

Unfortunately, when the component loads, the megamenu is already shown and toggling the "Click Me" does not exhibit any toggling show and hide functionality upon the megamenu (i.e. megamenu is always seen).

enter image description here

I am using the mdb 5 pro Angular 6.0 advanced codebase. I imported the @import 'mdb-angular-ui-kit/assets/scss/mdb.scss' into my styles.scss, so I think I have all the dropdown styling I need for this to work like it should.

I also have the MdbDropdown module imported into my app.module as well.

import { MdbDropdownModule } from 'mdb-angular-ui-kit/dropdown';

@NgModule({
 declarations: [...],
 imports: [
 ...
MdbDropdownModule,
 ...
],
 providers: [ ... ],
  bootstrap: [AppComponent],
})
export class AppModule {}

I have been trying many different things with the dropdown API with no luck. Here is the modified HTML with #dropdown for @ViewChild in Typescript. This seemed like my best shot after gaining a better understanding of how things should work with mdb in Angular.

   #dropdown
   class="nav-link dropdown-toggle"
   href="#"
   id="megaMenu2"
   role="button"
   data-mdb-dropdown-init
   data-mdb-ripple-init
   aria-expanded="false"

And the corresponding Typescript

import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { MdbDropdownDirective } from 'mdb-angular-ui-kit/dropdown';

 @Component({
    selector: 'app-header',
    templateUrl: './header.component.html',
    styleUrl: './header.component.scss'
  })
  export class HeaderComponent implements AfterViewInit {
    @ViewChild('dropdown') dropdown!: MdbDropdownDirective;

     constructor() {}

     ngAfterViewInit() {
       this.dropdown.hide();
     }
}

Have I not included something that is included in the snippet, but not documented? What am I missing? Any help is greatly appreciated !!!

Update and Question about Transition Duration and Timing Function

It seems that adding mdbDropdown, mdbDropdownToggle, and mdbDropdownMenu to the corresponding DOM elements was the problem. Simply adding these to the HTML made everything work and there was no need for Typescript. I am a little worried about the documentation and working snippets being provided, because these data attributes were not mentioned in mdb5 documentation or included in the code for the working snippet referenced above, but seem to be needed to get things to work. I found these while searching in mdb4 documentation.

Last question, I was trying to affect the speed with which the dropdown menu is transitioned to show and hide states with its timing function when toggled. I tried messing around with the following CSS and SCSS variables WITHOUT achieving changes in the transition. Are these the correct CSS and SCSS variables to control the transition between show and hide dropdown menu states?

 .dropdown-menu {
   --mdb-dropdown-menu-animated-animation-duration: 1s;
   --mdb-dropdown-menu-animated-animation-timing-function: ease-in-out;
}

$dropdown-menu-animated-animation-duration: 1s;
$dropdown-menu-animated-animation-timing-function: ease-in-out;
$dropdown-animation-duration: 1s;

Rafał Seifert free commented 8 months ago

By the code you have provided I assume you used sample code from Standard library. Please make sure you are using acutal Angular code samples. Could you confirm this and if you find any more problems with implementation please let me know.

staffordjh priority commented 8 months ago

I see now that I was using a standard code snippet example. Thanks for pointing that out.

Can anyone answer why the following CSS makes no difference on the fade in and out for the Angular dropdown menu? I was referencing the CSS variables under dropdown API for Angular here, https://mdbootstrap.com/docs/angular/components/dropdowns .

It seems the documentation is calling for this format.

--#{$prefix}dropdown-menu-animated-animation-duration: #{$dropdown-menu- 
animated-animation-duration};
--#{$prefix}dropdown-menu-animated-animation-timing-function: #{$dropdown-
menu-animated-animation-timing-function};

Did I implement this correctly?

.dropdown-menu {
   --mdb-dropdown--menu-animated-animation-duration: 2s;
   --mdb-dropdown-menu-animated-animation-timing-function: ease-in-out;
}

When using dev tools, I can't seem to find any --mdb-dropdown-menu-animated-animation-duration or --mdb-dropdown-menu-animated-animation-timing-function on any class associated with the dropdown menu elements. I found the ng-trigger and ng-trigger-fade, but don't know where this is coming from.

Rafał Seifert free commented 8 months ago

I reckon you wanted to change the animation of dropdown. Actually we use Angular animations for this component. Those scss variables have no effect and should not be visible in our docs. Currently there is no possibility for you to change dropdown's animation. We will take a closer look at this and meaby add some API for customizing animation in Angular.
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
  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 6.0.0
  • Device: Dell XPS Laptop
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes
Tags
megamenu
About author
staffordjh
0Support score
4Questions 2Answers 1Snippets