MegaMenu displays submenus of root items together.
|
|
|
|
|
|
|
|
|
|
<div class="card">
<h5>Horizontal</h5>
<p:megaMenu orientation="horizontal" autoDisplay="false">
<p:submenu label="TV" icon="pi pi-check">
<p:column>
<p:submenu label="TV.1">
<p:menuitem value="TV.1.1" url="#"/>
<p:menuitem value="TV.1.2" url="#"/>
</p:submenu>
<p:submenu label="TV.2">
<p:menuitem value="TV.2.1" url="#"/>
<p:menuitem value="TV.2.2" url="#"/>
<p:menuitem value="TV.2.3" url="#"/>
</p:submenu>
</p:column>
<p:column>
<p:submenu label="TV.4">
<p:menuitem value="TV.4.1" url="#"/>
<p:menuitem value="TV.4.2" url="#"/>
</p:submenu>
<p:submenu label="TV.5">
<p:menuitem value="TV.5.1" url="#"/>
<p:menuitem value="TV.5.2" url="#"/>
<p:menuitem value="TV.5.3" url="#"/>
</p:submenu>
</p:column>
<p:column>
<strong>Image</strong>
<p:graphicImage name="/demo/images/nature/nature1.jpg" width="200"/>
</p:column>
</p:submenu>
<p:submenu label="Sports" icon="pi pi-file">
<p:column>
<p:submenu label="Sports.1">
<p:menuitem value="Sports.1.1" url="#"/>
<p:menuitem value="Sports.1.2" url="#"/>
</p:submenu>
<p:submenu label="Sports.2">
<p:menuitem value="Sports.2.1" url="#"/>
<p:menuitem value="Sports.2.2" url="#"/>
<p:menuitem value="Sports.2.3" url="#"/>
</p:submenu>
</p:column>
<p:column>
<p:submenu label="Sports.4">
<p:menuitem value="Sports.4.1" url="#"/>
<p:menuitem value="Sports.4.2" url="#"/>
</p:submenu>
<p:submenu label="Sports.5">
<p:menuitem value="Sports.5.1" url="#"/>
<p:menuitem value="Sports.5.2" url="#"/>
<p:menuitem value="Sports.5.3" url="#"/>
</p:submenu>
</p:column>
<p:column>
<p:submenu label="Sports.7">
<p:menuitem value="Sports.7.1" url="#"/>
<p:menuitem value="Sports.7.2" url="#"/>
</p:submenu>
</p:column>
</p:submenu>
<p:submenu label="Entertainment" icon="pi pi-pencil">
<p:column>
<p:submenu label="Entertainment.1">
<p:menuitem value="Entertainment.1.1" url="#"/>
<p:menuitem value="Entertainment.1.2" url="#"/>
</p:submenu>
<p:submenu label="Entertainment.2">
<p:menuitem value="Entertainment.2.1" url="#"/>
<p:menuitem value="Entertainment.2.2" url="#"/>
<p:menuitem value="Entertainment.2.3" url="#"/>
</p:submenu>
</p:column>
<p:column>
<p:submenu label="Entertainment.4">
<p:menuitem value="Entertainment.4.1" url="#"/>
<p:menuitem value="Entertainment.4.2" url="#"/>
</p:submenu>
<p:submenu label="Entertainment.5">
<p:menuitem value="Entertainment.5.1" url="#"/>
<p:menuitem value="Entertainment.5.2" url="#"/>
<p:menuitem value="Entertainment.5.3" url="#"/>
</p:submenu>
</p:column>
</p:submenu>
<p:submenu label="Tech" icon="pi pi-briefcase">
<p:column>
<p:submenu label="Tech.1">
<p:menuitem value="Tech.1.1" url="#"/>
<p:menuitem value="Tech.1.2" url="#"/>
</p:submenu>
<p:submenu label="Tech.2">
<p:menuitem value="Tech.2.1" url="#"/>
<p:menuitem value="Tech.2.2" url="#"/>
<p:menuitem value="Tech.2.3" url="#"/>
</p:submenu>
</p:column>
<p:column>
<p:submenu label="Tech.4">
<p:menuitem value="Tech.4.1" url="#"/>
<p:menuitem value="Tech.4.2" url="#"/>
</p:submenu>
</p:column>
</p:submenu>
<p:menuitem value="Quit" url="http://www.primefaces.org" icon="pi pi-times"/>
</p:megaMenu>
<h5>Vertical</h5>
<p:megaMenu orientation="vertical" autoDisplay="false">
<p:submenu label="TV" icon="pi pi-check">
<p:column>
<p:submenu label="TV.1">
<p:menuitem value="TV.1.1" url="#"/>
<p:menuitem value="TV.1.2" url="#"/>
</p:submenu>
<p:submenu label="TV.2">
<p:menuitem value="TV.2.1" url="#"/>
<p:menuitem value="TV.2.2" url="#"/>
<p:menuitem value="TV.2.3" url="#"/>
</p:submenu>
</p:column>
<p:column>
<p:submenu label="TV.4">
<p:menuitem value="TV.4.1" url="#"/>
<p:menuitem value="TV.4.2" url="#"/>
</p:submenu>
<p:submenu label="TV.5">
<p:menuitem value="TV.5.1" url="#"/>
<p:menuitem value="TV.5.2" url="#"/>
<p:menuitem value="TV.5.3" url="#"/>
</p:submenu>
</p:column>
<p:column>
<strong>Image</strong>
<p:graphicImage name="/demo/images/nature/nature1.jpg" width="200"/>
</p:column>
</p:submenu>
<p:submenu label="Sports" icon="pi pi-file">
<p:column>
<p:submenu label="Sports.1">
<p:menuitem value="Sports.1.1" url="#"/>
<p:menuitem value="Sports.1.2" url="#"/>
</p:submenu>
<p:submenu label="Sports.2">
<p:menuitem value="Sports.2.1" url="#"/>
<p:menuitem value="Sports.2.2" url="#"/>
<p:menuitem value="Sports.2.3" url="#"/>
</p:submenu>
</p:column>
<p:column>
<p:submenu label="Sports.4">
<p:menuitem value="Sports.4.1" url="#"/>
<p:menuitem value="Sports.4.2" url="#"/>
</p:submenu>
<p:submenu label="Sports.5">
<p:menuitem value="Sports.5.1" url="#"/>
<p:menuitem value="Sports.5.2" url="#"/>
<p:menuitem value="Sports.5.3" url="#"/>
</p:submenu>
</p:column>
<p:column>
<p:submenu label="Sports.7">
<p:menuitem value="Sports.7.1" url="#"/>
<p:menuitem value="Sports.7.2" url="#"/>
</p:submenu>
</p:column>
</p:submenu>
<p:submenu label="Entertainment" icon="pi pi-pencil">
<p:column>
<p:submenu label="Entertainment.1">
<p:menuitem value="Entertainment.1.1" url="#"/>
<p:menuitem value="Entertainment.1.2" url="#"/>
</p:submenu>
<p:submenu label="Entertainment.2">
<p:menuitem value="Entertainment.2.1" url="#"/>
<p:menuitem value="Entertainment.2.2" url="#"/>
<p:menuitem value="Entertainment.2.3" url="#"/>
</p:submenu>
</p:column>
<p:column>
<p:submenu label="Entertainment.4">
<p:menuitem value="Entertainment.4.1" url="#"/>
<p:menuitem value="Entertainment.4.2" url="#"/>
</p:submenu>
<p:submenu label="Entertainment.5">
<p:menuitem value="Entertainment.5.1" url="#"/>
<p:menuitem value="Entertainment.5.2" url="#"/>
<p:menuitem value="Entertainment.5.3" url="#"/>
</p:submenu>
</p:column>
</p:submenu>
<p:submenu label="Tech" icon="pi pi-briefcase">
<p:column>
<p:submenu label="Tech.1">
<p:menuitem value="Tech.1.1" url="#"/>
<p:menuitem value="Tech.1.2" url="#"/>
</p:submenu>
<p:submenu label="Tech.2">
<p:menuitem value="Tech.2.1" url="#"/>
<p:menuitem value="Tech.2.2" url="#"/>
<p:menuitem value="Tech.2.3" url="#"/>
</p:submenu>
</p:column>
<p:column>
<p:submenu label="Tech.4">
<p:menuitem value="Tech.4.1" url="#"/>
<p:menuitem value="Tech.4.2" url="#"/>
</p:submenu>
</p:column>
</p:submenu>
<p:menuitem value="Quit" url="http://www.primefaces.org" icon="pi pi-times"/>
</p:megaMenu>
</div>