Menu
I have a static menu in the sidebar which I include in every JSF page. The menu looks like so:
<li class="nav-header">Item 1</li>
<li class="active"><a href="index.xhtml">Item 2</a></li>
<li><a href="new_workload.xhtml">Item 3</a></li>
<li><a href="import_workload.xhtml">Item 4</a></li>
Adding a class="active" to the <li> highlights the menu. How do I go about making sure selected item is highlighted dynamically in JSF2?
I know PrimeFaces and RichFaces have ready made components for this, but I want to try a pure JSF 2 solution first. A pure client side JavaScript solution is also acceptable.
361
Highlighting the current page makes navigation easier. WordPress menu functions (wp_nav_menu, wp_list_pages) automatically add current_page_item class to li containing the active link. So all we have to do is use the same class to highlight the current page.
The :active selector is used to select and style the active link. A link becomes active when you click on it. Tip: The :active selector can be used on all elements, not only links.
You can highlight a menu by adding a different background color, text color etc to the particular menu item using custom CSS. To apply custom CSS you need to add CSS class for the menu.
If the button has to stay highlighted even if you're not holding the click button, use a:focus { background-color: blue; //or others } Instead, if you want the button to be highlighted only when you are holding them clicked use a:active { background-color: yellow; } hope this helps, good luck with your html.
You can get the current view ID in EL as follows
#{view.viewId}
So, this should do
class="#{view.viewId eq '/index.xhtml' ? 'active' : ''}"
It'd be easier to hold all those links in some List<Page> so that you can just do something like
<li class="nav-header">#{menu.header}</li>
<ui:repeat value="#{menu.pages}" var="page">
<li class="#{view.viewId eq page.viewId ? 'active' : ''}">
<h:link value="#{page.title}" outcome="#{page.viewId}" />
</li>
</ui:repeat>
instead of copypasting the same piece of code over and over.
126
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
