Page 1 of 1

How can I get top-menu menus to display as overlays?

Posted: 01 Jul 2015, 05:22
by RElliott
Currently, if you add a menu to the Rio top-menu, the menu displays in the top bar by expanding the items horizontally. For example, the following code displays the help menu horizontally across the top bar similar to "? Overview Page About":

Code: Select all

<a
    class="ripplelink WhiteBlue Fright ShowOnMobile"
    id="show-top-menu">
    <i class="icon-show8"></i>
</a>
<h:form>
    <ul
        id="top-menu"
        class="ShowOnDesktop">
        <li>
            <a class="ripplelink">
                <i class="icon-search100"></i> <span class="Txt">Help</span>
            </a>
            <pr:menu>
                <p:menuitem
                    id="sm-help-overview"
                    value="Overview"
                    outcome="/help/Overview.xhtml" />
                <p:menuitem
                    id="sm-help-page"
                    value="Page"
                    onclick="PF('help-dialog').show();" />
                <p:menuitem
                    id="sm-help-about"
                    value="About"
                    outcome="/help/About.xhtml" />
            </pr:menu>
        </li>
    </ul>
</h:form>
I would like the menu to display as an overlay menu similarly to the way the menu would display when the screen is small and the show-top-menu button is displayed.

Is there a standard way to do this in Rio?

Re: How can I get top-menu menus to display as overlays?

Posted: 01 Jul 2015, 13:47
by mert.sincan
You can not use <pr:menu> in Top-menu because of different structure in DOM.
I think you can use jsf:outcome with JSF2.2 in your html anchor as outcome of menuitem.
Please see; http://www.beyondjava.net/blog/jsf-2-2- ... eat-sheet/

Re: How can I get top-menu menus to display as overlays?

Posted: 13 Jul 2015, 23:26
by RElliott
If you want the top menu to display overlay menus, you can either rip out the top menu and replace with a menu using the standard PrimeFaces menu or switch to Modena. The Modena top menu behaves exactly like I wanted.