May I ask how to add sub-menu in the Avalon theme similar to the p-menubar demo (https://www.primefaces.org/primeng/#/menubar) ? I would like to show sub-menu similar to the demo [File] -> [New] -> [Project / Other] ? I.e. submenu show on the right hand side instead of inline expand.
The reason to request this features is because inline sub-menu has indentation, after two levels of submenu / indentation, that sub-menu width is not wide enough to display my text. My text will line wrapped into multiple lines which is not desirable.
It's not an issue in horizontal mode as I can change the _main.scss > ul.layout-menu > li > ul > width from 250px to another value. However, I have no idea how to address the issue for static or overlay mode. I expect submenu should be able to show on the right next to the master menu.
How to add sub-menu similar to p-menubar ?
Forum rules
Please note that response time for technical support is within 3-5 business days.
Please note that response time for technical support is within 3-5 business days.
-
- Prime
- Posts: 18616
- Joined: 05 Jan 2009, 00:21
- Location: Cybertron
- Contact:
Following css takes the submenu to the right as an overlay;
Issue is that, the layout-sidebar has overflow:auto for nanoscroller so you need to remove overflow so that the submenus can go out of boundaries.
Code: Select all
.layout-wrapper .layout-menu li ul {
overflow: hidden;
padding: 0;
margin: 0;
list-style: none;
position: absolute;
left: 250px;
top: 0;
display: block;
background: #ffffff;
min-width: 250px;
-
- Information
-
Who is online
Users browsing this forum: No registered users and 16 guests