admin 管理员组

文章数量: 1086019

I am attempting to use the PrimeNG mega menu: But I want the sub menu to open on hover instead of click. This is what I'm trying to do:

<div class="menu-wrap">
  <div class="menu-items-wrap center-width">
    <p-megamenu [model]="items">
      <ng-template let-item pTemplate="item">
        <div
          (click)="itemmand ? itemmand() : null"
          (mouseenter)="onMouseEnter(item)"
          (mouseleave)="onMouseLeave(item)"
          class="mega-menu-item"
        >
          {{ item.label }}
          <div *ngIf="item.items && item.visible" class="sub-menu">
            <div *ngFor="let subItem of item.items[0]">
              <div (click)="subItemmand ? subItemmand() : null" class="sub-menu-item">
                {{ subItem.label }}
              </div>
            </div>
          </div>
        </div>
      </ng-template>
    </p-megamenu>
  </div>
</div>


import { Component } from '@angular/core';
import { Router } from '@angular/router';
import {Menubar} from 'primeng/menubar';
import {MegaMenu} from 'primeng/megamenu';
import {MegaMenuItem} from 'primeng/api';
import { NgFor, NgIf } from '@angular/common';

@Component({
  selector: 'app-nav-bar',
  standalone: true,
  imports: [
    Menubar,
    MegaMenu,
    NgFor,
    NgIf
  ],
  templateUrl: './nav-barponent.html',
  styleUrl: './nav-barponent.less'
})
export class NavBarComponent {

  constructor(private router: Router) {}

  items: MegaMenuItem[] = [
    {
      label: 'My Dashboard',
      command: () => this.route('dashboard')
    },
    {
      label: 'Manuals',
      items: [
        [{ label: 'Review Tool', command: () => this.route('review-tool') }],
        [{ label: 'Public Site', command: () => this.route('public-site') }]
      ],
      // Custom handlers for hover
      styleClass: 'manuals-menu-item'
    },
    {
      label: 'Administration',
      command: () => this.route('admin')
    },
    {
      label: 'Tools',
      items: [
        [{ label: 'Review Tool', command: () => this.route('review-tool') }],
        [{ label: 'Public Site', command: () => this.route('public-site') }]
      ]
    },
  ];

  route(route: string) {
    this.router.navigate(['/' + route]); // Navigate to the About page
  }

  // Mouse events to handle hover functionality
  onMouseEnter(menuItem: MegaMenuItem) {
    if (menuItem.items) {
      menuItem.visible = true; // Show submenu on hover
    }
  }

  onMouseLeave(menuItem: MegaMenuItem) {
    if (menuItem.items) {
      menuItem.visible = false; // Hide submenu when mouse leaves
    }
  }

}

But even with all this the menu just behaves like normal. The behavior is the same as:

<body>
<div class="menu-wrap">
  <div class="menu-items-wrap center-width">
    <p-megamenu [model]="items" />
  </div>
</div>
</body>

Has anyone been able to achieve this behavior with the PrimeNG Mega Menu or is this not possible?

本文标签： htmlPrimeNG Mega Menu open submenu on hoverStack Overflow

版权声明：本文标题：html - PrimeNG Mega Menu open submenu on hover - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1744068937a2528131.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。