Sliding menu et sous menu
Bonjour,
Je souhaite créer un "sliding menu", il s'agit d'un type de menu de navigation qui s'anime en déplaçant les éléments du menu et sous menus. (En gros, c'est un menu coulissant...)
Il y a un bel exemple ici => https://plnkr.co/edit/Ksfo7fnSB0c4DH...review&preview
Alors, pour le moment, j'ai créé mes deux 2 rubriques (Accueil & Agences)
https://www.hebergeur-image.fr/uploa...e6ac2cbddf.png
Si je clique sur la rubrique "Agences" , il faudrait que les rubriques (Agences & Accueil) disparaissent et que je puisse visualiser uniquement les sous-rubriques...
https://www.hebergeur-image.fr/uploa...e7f8638079.png
Ici en l'occurrence, je devrais visualiser l'élément du sous-menu "Portefeuille". Malheureusement, je ne parviens pas à masquer les éléments du menu, c'est à dire que les éléments du sous-menu s'affichent en même temps avec les éléments du menu.
Je vous partage mon code ci dessous, si vous avez une solution à mon problème, je vous remercie pour votre aide et du temps consacré à mon problème car j'ai vraiment pas trouvé d'exemple concret en Angular.
online.ts
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| export class OnlineComponent implements OnInit {
nav: IMenuItem[] = [];
constructor(private onlineService: OnlineService) { }
ngOnInit() {
// Initialize the 'nav' property with data from the 'onlineService'
this.nav = this.onlineService.IMenuItem;
}
toggleSubMenu(index: number) {
// Toggle the active state of the clicked item
this.nav[index].active = !this.nav[index].active;
// Ensure that all other items are deactivated
for (let i = 0; i < this.nav.length; i++) {
if (i !== index) {
this.nav[i].active = false;
}
}
}
} |
online.html
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| <div class="container text-center" *ngIf="nav">
<div class="sideBar">
<div class="menu-content">
<ul class="menu-items">
<li class="item" *ngFor="let menuItem of nav; let i = index">
<div class="menu-item" (click)="toggleSubMenu(i)">
<!-- Display the menu item name -->
<span class="title">{{ menuItem.name }}</span>
</div>
<ul class="submenu" *ngIf="menuItem.active">
<li class="subitem" *ngFor="let subItem of menuItem.sub">
<div class="submenu-item">
<!-- Add [routerLink] directive to manage navigation -->
<a [routerLink]="subItem.state">{{ subItem.name }}</a>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="container">
<!-- This is where the routed components will be displayed -->
<router-outlet></router-outlet>
</div> |
online.service.ts
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| export class OnlineService {
IMenuItem: IMenuItem[] = [
{
name: "Accueil",
type: "valeur_de_type" ,
sub: [
{
name: "Home",
state: "/account/home",
}
]
},
{
name: "Agences",
type: "valeur_de_type" ,
sub: [
{
name: "Portefeuilles",
state: "/agences/portefeuilles",
}
]
},
];
constructor() { }
} |
J'ai également crée une illustration de mon code sur Stackblitz. https://stackblitz.com/edit/github-e...component.html
