Menu: animated opening/closingIs this convenient, or

Question

Menu: animated opening/closingIs this convenient, or

How can I add animation to opening and closing menu items in my project? I am not sure if it can be done in Angular or CSS. I have provided a reproduction of the project for reference => Stackblitz.

HTML file

<div class="wrapper">
   <!-- Top Menu -->
   <div class="sidebar">
      <!-- Menu Item -->
      <ul>
         <li
         *ngFor="let menu of menus; let i = index"
         [class.active]="menu.active"
         >
         <ng-container>
            <a class="item" (click)="selectMenu(menu)">
            <i [class]="menu.iconClass"></i> {{ menu.name }}
            <i class="fa fa-chevron-down"></i>
            </a>
            <ul *ngIf="menu.active">
               <li *ngFor="let submenu of menu.submenu" class="submenu">{{submenu.name}}</li>
            </ul>
         </ng-container>
         </li>
      </ul>
   </div>
</div>

css angular

Answer 1

Answer №1

Utilize Angular animations for a smoother user experience. Implement the following animation into your component:

animations:[
    trigger('accordion', [
      transition(':enter', [
        style({ height: 0 }),
        animate('1000ms', style({ "height": '*' })),
      ]),
      transition(':leave', [
        animate('100ms', style({ "height": 0 }))
      ])
    ]),
  ]

When initiating the "enter" event, the style starts at height=0 and animates to reach the normal height represented by *. Conversely, the "leave" event animates the style to set height=0.

To use this animation, include the following code:

      <ul @accordion *ngIf="menu.active">
        <li *ngFor="let submenu of menu.submenu" class="submenu">
           {{submenu.name}}
        </li>
      </ul>

IMPORTANT: Remember to import the BrowserAnimationsModule in your module.

Additionally, ensure to add the following CSS to your stylesheet:

.wrapper ul li ul{
  overflow:hidden;
}

View your modified stackblitz

Answer 2

Utilize Angular animations for a smoother user experience. Implement the following animation into your component:

animations:[
    trigger('accordion', [
      transition(':enter', [
        style({ height: 0 }),
        animate('1000ms', style({ "height": '*' })),
      ]),
      transition(':leave', [
        animate('100ms', style({ "height": 0 }))
      ])
    ]),
  ]

When initiating the "enter" event, the style starts at height=0 and animates to reach the normal height represented by *. Conversely, the "leave" event animates the style to set height=0.

To use this animation, include the following code:

      <ul @accordion *ngIf="menu.active">
        <li *ngFor="let submenu of menu.submenu" class="submenu">
           {{submenu.name}}
        </li>
      </ul>

IMPORTANT: Remember to import the BrowserAnimationsModule in your module.

Additionally, ensure to add the following CSS to your stylesheet:

.wrapper ul li ul{
  overflow:hidden;
}

View your modified stackblitz

Answer 3

Answer №2

To improve functionality, consider modifying the app.component.ts file as follows:

  updateMenuSelection(parentMenu: { name: string, active:boolean }): void {
    this.menus.forEach((menu) => {
      if (menu.name === parentMenu.name) {
        menu.active = !menu.active;
      }
    });
  }
}

This change ensures that each time the active state is toggled, the boolean value will update accordingly. Have a wonderful day!

Answer 4

To improve functionality, consider modifying the app.component.ts file as follows:

  updateMenuSelection(parentMenu: { name: string, active:boolean }): void {
    this.menus.forEach((menu) => {
      if (menu.name === parentMenu.name) {
        menu.active = !menu.active;
      }
    });
  }
}

This change ensures that each time the active state is toggled, the boolean value will update accordingly. Have a wonderful day!

Menu: animated opening/closingIs this convenient, or

Answer №1

Answer №2

Similar questions

Deleting a division with the help of media queries

Overlap of columns within a nested flexbox arrangement

Why won't the display: block CSS style apply to my div element?

enhancing the style of my Express project with CSS and EJS

Problem with fetching Grails

Issue occurred when trying to load controllers during the migration process from AngularJS1 to Angular6

Transferring information between a pair of input fields using ngModel

How to Align the Button Vertically with the TextField in React Material-UI

Clicking on the mat-icon-button with the matSuffix in the password field will always trigger a

Adjusting Text Color on Buttons

How to create nested nav menus that are optimized for touch-screen devices?

Angular2 fills up the table with data for a particular row

The CORS policy has restricted access to the XMLHttpRequest from the specified origin at "http://...." to 'http://localhost:4200'

Round corners, images in the background, gradients in the background, and compatibility with Internet Explorer versions 8 and

Validating Components that Adhere to an Interface

The Dropdownlist menu from Metro UI CSS does not function properly when placed in an ASP page within a subfolder

My CSS is giving me a bit of trouble with alignment

What is the impact on positioning when including a class in Angular?

Divide Footer Information into Two Sections: Left and Right

What steps should I take to customize the design of my Stripe subscription payment page?