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

Locked
RElliott
Posts: 94
Joined: 07 Feb 2014, 00:39

01 Jul 2015, 05:22

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?
PrimeFaces 7.0.1, Glassfish 5.1.0, Oracle JDK 8, Eclipse 2016-02

mert.sincan
Posts: 4142
Joined: 29 Jun 2013, 12:38

01 Jul 2015, 13:47

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/

RElliott
Posts: 94
Joined: 07 Feb 2014, 00:39

13 Jul 2015, 23:26

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.
PrimeFaces 7.0.1, Glassfish 5.1.0, Oracle JDK 8, Eclipse 2016-02

Locked

Return to “Rio”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest