Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Can you show us an image? Also you can upgrade to <code>3.0.M4 version</code> if you aren't stuck with 2.2.1... </p> <p>I've tested your code in version 3 and if I have a lot of <code>menuItems</code>, a <code>scroll</code> is appearing for easy navigation to the last item. </p> <p>Anyway, I think the design is somehow wrong if you need so many menuItems for a single subMenu!</p> <p>Another solution would be to use a <code>tiered or sliding menu</code> in the left corner/part of the page - I prefer the <strong>sliding menu</strong> exactly for these types of situations: you could have a thousand submenuItems! <a href="http://www.primefaces.org/showcase-labs/ui/menu.jsf" rel="nofollow">http://www.primefaces.org/showcase-labs/ui/menu.jsf</a></p> <p>EDIT: Since you can't change the primefaces version, maybe it's time to look for the solution elsewhere:</p> <ul> <li>a jquery solution, simple and efficient: I've written the code(html,css,javascript) here and you can see the result in the south-east box - <a href="http://jsfiddle.net/4UFmk/" rel="nofollow">http://jsfiddle.net/4UFmk/</a> .</li> </ul> <p>The source blog: <a href="http://www.kriesi.at/archives/create-a-multilevel-dropdown-menu-with-css-and-improve-it-via-jquery" rel="nofollow">http://www.kriesi.at/archives/create-a-multilevel-dropdown-menu-with-css-and-improve-it-via-jquery</a></p> <p>EDIT2:</p> <p>You do not have to change from Primefaces (by the way PF components are using already jquery), so you can use it's built-in jquery version(1.4 for PF 2 and 1.6 for PF 3):</p> <pre><code>&lt;h:outputScript library="primefaces" name="jquery/jquery.js" target="head" /&gt; </code></pre> <p>So you can have a simple html/jquery solution inside primefaces components.</p> <p>EDIT3:</p> <p>Fixing the Primefaces menuBar implementation - adding a jquery function to fix the way the submenu(<code>ul</code>) is showing on clicking a menu item:</p> <pre><code>&lt;h:form id='menuForm' &gt; &lt;p:menubar&gt; &lt;p:submenu label="test"&gt; &lt;p:menuitem&gt; &lt;h:commandLink value="test 123"/&gt; &lt;/p:menuitem&gt; &lt;p:menuitem&gt; &lt;h:commandLink value="test 123"/&gt; &lt;/p:menuitem&gt; &lt;p:menuitem&gt; &lt;h:commandLink value="test 123"/&gt; &lt;/p:menuitem&gt; ... &lt;/p:submenu&gt; &lt;p:menubar&gt; &lt;/h:form&gt; &lt;h:outputScript library="primefaces" name="jquery/jquery.js" target="head" /&gt; &lt;!-- use the jquery library built-in primefaces --&gt; &lt;h:outputScript&gt; // Add the $() function to avoid conflict with primefaces $ = jQuery; function mainmenu(){ $("#menuForm li").click( function(e){ $(e.currentTarget).children("ul").css("top", 28); }); } $(document).ready( function(){ mainmenu(); }); &lt;/h:outputScript&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload