Looking for Mega Menu & LayoutUnit

[murli.p.israni]

Hi,

Can any one please assist me for the JQuery Mega Menu plugin implementation in PrimeFaces, as I like the usability, since my application is having the bulk of URLs/Links, so the aggregation of links gives good usability.

As a limitation of the
1. p:menuButton can have only p:menuitem as child components
2. p:menu can have only p:submenu or p:menuitem as child components

Code: Select all

<p:menuButton value="Go To" >
            <p:menuitem value="Home"  url="/" icon="ui-icon ui-icon-home" />  
	    <p:menuitem value="Preferences"  url="/preferences/" icon="ui-icon ui-icon-wrench"/>
	    <p:menuitem value="Account Settings"  url="/preferences/" icon="ui-icon ui-icon-wrench"/>
	    <p:menuitem>
	    	<p:separator />
	    </p:menuitem>	    
	    <p:menuitem value="Logout"  icon="ui-icon ui-icon-wrench"/>
</p:menuButton>

Code: Select all

<p:menu type="tiered" rendered="true">
 // Single /multilevel of menu items (Incl. Sub Menu)
</p:menu>

My expectations are something like this -
http://www.geektantra.com/2009/09/jquery-mega-menu/
http://www.sohtanaka.com/web-design/meg ... ss-jquery/
http://codecanyon.net/item/css3-mega-dr ... ebdesigner (Premium plugin)
http://www.dynamicdrive.com/style/cssli ... line_tabs/

I am able to load this in the application, But there are few issues, I am facing -
- UNable to put the custom plugin code inside the top layout unit - Setting the ZIndex, Scrollable, Slidable, display:overflow -- Nothing is responding at north layout unit.
- Once I am pushing the code, inside layout unit, the scroll is coming, for the menu items (as Mouseover to the main menu)


Please let me know, any alternate solution for this.

[Oleg]

Hi Murli,

Layout pane containing the drop-down element must have the style 'overflow: visible'. There are other recommendations as well. Look here please http://layout.jquery-dev.net/documentat ... Drop-Downs

Many people have asked about Mega Menu. Mega Menu will be implemented in the PrimeFaces Extensions project. But not in the first release because we have a lot of work yet for the first release. So, I guess after PF 3.0 release we can start to implement a Mega Menu. This is on the TODO list.

[murli.p.israni]

Thanks alot,
Do you have any example for the same, or reference with PF 3.0 (Able to get the Layout instance in JS, But unable to do any more programming)

layout.getManager().toggle('right'); - Not responding, also page got stucked with undefined object
mainlayoutVar.getUnitByPosition('right').toggle(); - Same problem, But I think this is YUI Layout, which is depricated and JQuery layout introduced in 3.0 onwards.

Please comment on the same.

[Oleg]

AFAIK JQuery layout was introduced in 2.2.1. What is layout.getManager()....? Where did you see this example?

[lauksas]

Hi, I'm new in prime faces. I'm trying to write a layout, but I'm facing the same issue as murli.p.israni... In the style I wrote as Oleg said, but no luck... The menu dos not show as it should...

see the code below:

Code: Select all

<p:menubar autoDisplay="true" style="overflow: visible;">
		<p:submenu label="Mail">
			<p:menuitem value="Gmail" url="http://www.google.com" />
			<p:menuitem value="Hotmail" url="http://www.hotmail.com" />
			<p:menuitem value="Yahoo Mail" url="http://mail.yahoo.com" />
		</p:submenu>
		<p:submenu label="Videos">
			<p:menuitem value="Youtube" url="http://www.youtube.com" />
			<p:menuitem value="Break" url="http://www.break.com" />
		</p:submenu>
	</p:menubar>

Did I put the style in the wrong element?

see what's happens on the link http://lauksas.dyndns.org/primeTest/facetTeste.xhtml

Thanks in advance!

[Oleg]

Hi and welcome to the PrimeFaces.

I didn't suggest to use style="overflow: visible;" I pointed to this link (underlying layout widget) http://layout.jquery-dev.net/documentat ... Drop-Downs You can see there "Working with Drop-Downs and Pop-Ups" and you can find there a link to demo. Look http://layout.jquery-dev.net/demos/simple.html

The problem is only AFAIK, PF doesn't expose allowOverflow, resetOverflow and showOverflowOnHover. We expose allowOverflow, resetOverflow in PF Extensions project, but these methods are not documented. showOverflowOnHover will be added to layout pane soon.

[lauksas]

Thanks Oleg for the fast reply! but i just found the error, it was missing the !important notation in the css class. I never saw this notation in css until now... always learning
Regards!