CODEWITHSUNDEEP
jsfprimefacesmenuitem
Angelika
Angelika

Reputation: 381

How to change the color of the current selected menuitem?

I have a submenu in PrimeFaces that contains many menuitems, I would like to color it when it's selected in order to show to the user the current menuitem.

                <p:submenu label="Books" style="width:60%; color:#FFFFFF; background:#db4455;"
                               icon="ui-icon ui-icon-refresh">
                        <p:menuitem 
                            style="width:95%; font-weight:bold; background:#93c3cd; color:#FFFFFF;"
                            value="Action" url="action.xhtml"  /> 
                        <p:menuitem 
                            style="width:95%; font-weight:bold; background:#93c3cd; color:#FFFFFF;"
                            value="Fiction" url="fiction.xhtml"  /> 
                </p:submenu>

Upvotes: 2

Views: 9398

Answers (2)

user6381032
user6381032

Reputation:

Try This:

<p:menuitem action="resoluciones" value="Resoluciones" style="color :#{expediente.samattramite eq 20 ? '#990000' : 'black'};"/>

I dont know how your application is developed, but in my case i have a variable (expediente.samattramite) wich change of value when I change the screen ¿view? (xhtml, sorry for my lenguage) or active some functionality to know in what state I am

Upvotes: 0

Hatem Alimam
Hatem Alimam

Reputation: 10048

You can do it this way.

JS

$(document).ready(function() {

   $('.ui-menuitem-link').each(function(){
       if(window.location.pathname.indexOf($(this).attr('href')) != -1) {
           $(this).css('background', 'red');//or add class
       }
   });  

})

See Also :

Upvotes: 5

Related Questions