By clicking on MenuItem without clicking on text

Question

I have a Menu, and I want to click on the menu, but not the text, if you guys know what I mean. MenuItem has a border or something like that, but when I click on it, it won’t be redirected to the page I want if I don’t click on the text.

Can I click on the entire “Button” and redirect or do what needs to be done?

My menu looks like this:

<rich:dropDownMenu showDelay="250" hideDelay="0" submitMode="none">
        <f:facet name="label">Tools</f:facet>

        <rich:menuItem>
            <s:link view="/pages/tools/ppaParameters/PpaParametersEdit.xhtml" value="Parameters" id="PpaParametersId" includePageParams="false" propagation="none"/>
        </rich:menuItem>

        <rich:menuGroup value="Security">
            <rich:menuItem>
                <s:link view="/pages/tools/security/ppaModule/PpaModuleEdit.xhtml" value="Module" id="PpaModuleId" includePageParams="false" propagation="none" />
            </rich:menuItem>
        </rich:menuGroup>
</rich:dropDownMenu>

Here is an example. I need to click on the text for it to work.

Answer 1

Customize the menu item using:

display:block;

---

For example, for rich:menuItemusing h:link(instead s:link, but the same idea should apply):

<rich:menuItem immediate="true">
    <h:link value="System" outcome="menu-01" id="menu-01" styleClass="menu-item-link" />
</rich:menuItem>

CSS (.rf-ddm-itm-lbl):

/* Allow clicking anywhere on a menu item, not just the text. */
.rf-ddm-itm-lbl {
    display: block;
}

/* Style the menu to taste. */    
a.menu-item-link {
    color: #333333 !important;
    text-decoration: none !important;
    display: block !important;
}

/* Remove space for icons. */
.rf-ddm-emptyIcon, .rf-ddm-emptyIcon {
    display: none;
}

display: block;.

Answer 2

, . - :

 <rich:menuItem onclick="location.href='url'">
     <h:outputText value="Link 2" />
 </rich:menuItem>

.

url - , : link. : http://server/app/page.seam?cid=XX&propogate=xx...

, : <s:conversationId>

, ...

Answer 3

css , . , .