Hello,
I'm using the ejs-menu in an ejs-sidebar navigation and I have a few issues:
1) I'm trying to add icons before each element of the menu from the nested levels, but the icons appear only for the parents:
each element from the menu has IconCss property and the icons are applied from css:
How to apply icons also for the nested level, for children and nephews?
2) I'm using a custom logic to open the sidebar when the user hover on the dockbar and when takes the cursor from it, the sidebar is closed. The issue appears when the user hovers for the first time on an icon, the sidebar is opened behind the ejs menu:
If the user moves the cursor again over another icon, the ejs menu fixes its position:
Also, because the mouseenter and mouseleave events are triggered on the sidebar container, when the user moves the cursor on the ejs menu, the sidebar closes:
this is the code for the custom hover functionality:
How to keep the sidebar open when the user navigates through the elements of the ejs menu, and close the sidebar only when the cursor is outside of the sidebar + ejs-menu?
Thank you!
Hi Ciprian,
Query 1: I'm trying to add icons before each element of the menu from the nested levels, but the icons appear only for the parents:
To add icons for parent and submenu, you can give any icon name, such as “e-icons e-file” into the iconCss property of the Menu component. By including the e-icons name, all icon CSS will be loaded automatically. Please refer to the below code snippets and sample.
|
public menuItems: MenuItemModel[] = [ { text: 'File', iconCss: 'e-icons e-file', items: [ { text: 'Open', iconCss: 'e-icons e-folder-open' }, { text: 'Save', iconCss: 'e-icons e-save' }, { separator: true }, { text: 'Exit' } ] }, { text: 'Edit', iconCss: 'e-icons e-edit', items: [ { text: 'Cut', iconCss: 'e-icons e-cut' }, { text: 'Copy', iconCss: 'e-icons e-copy' }, { text: 'Paste', iconCss: 'e-icons e-paste' } ] }, ]; |
Sample link: https://stackblitz.com/edit/angular-6xhwwv-v4rpfr?file=src%2Fapp.component.ts
To see the available icons in Syncfusion, please refer to the UG link below.
Link: https://ej2.syncfusion.com/angular/documentation/appearance/icons#available-icons
Query 2: I'm using a custom logic to open the sidebar when the user hover on the dockbar and when takes the cursor from it, the sidebar is closed. The issue appears when the user hovers for the first time on an icon, the sidebar is opened behind the ejs menu:
For the second query, we have created a separate ticket under your account; please follow the below forum for further assistance.
Forum link: [Ejs-menu
in sidebar navigation] - from 194451 | Angular - EJ 2 Forums | Syncfusion
Please let us know if you need any further assistance on this.
Regards,
KeerthiKaran K V
