How to change the color of the current selected menuitem?

Question

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>

score 5 · Accepted Answer · edited May 23 '17 at 12:17

5

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 :

Highlighting selected menu (Another approach)

edited May 23 '17 at 12:17

Community

1
1

answered Dec 18 '13 at 11:36

Hatem Alimam

9,968
4
44
56

This solution would be hard when we provide theme switcher for user to change the theme color. I expect PF has default attribute for this. – stuckedunderflow Apr 01 '15 at 17:32

score 0 · Answer 2 · 2017-04-05T13:24:32.343

0

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

edited Apr 05 '17 at 13:24

answered Apr 04 '17 at 08:50

How do you know in this case the menuitem is selected? It looks more like conditionally styling it, but the condition not being 'it is selected' – Kukeltje Apr 04 '17 at 11:05
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. – Apr 05 '17 at 12:51
Then please add that to your answer on **how** you store that. That is not clear and very important. – Kukeltje Apr 05 '17 at 13:10
I've just added the comment yo the answer. Excuse me, just trying to help – Apr 05 '17 at 13:34
I (we all?) appreciate the help, and I want to help improving the quality of answers. It still is not clear how you set the variable in your application. Can you add something about that? – Kukeltje Apr 05 '17 at 13:40
Ok, Im a newbie but i though you must discuss about the topic, im going to leave the site. tired about the forum gods. Despite im a newbie, i guess i cant help. – Apr 05 '17 at 13:50
I'm not a god, human of flesh and blood (and an aging brain). Help is good, and being a newbie is not a problem at all, trying to help is good. But since I do not understand/see how you save/store the page you are on, I'm looking/requesting for clarification – Kukeltje Apr 05 '17 at 14:07
Ok, sorry, just a little embaraced, less than a year developing java and i dont understand quite well your question, look, the code is huge, I have many subflows when I click on a command link (each one has his own action associated) I jump from one flow to another, all of them, has the same parent-flow, wich is associated with a Controller, lets call it "ParentController" the xhtml asociated to the chlids sub-flow acces to this variable and draw one thing or another depending of the variable. More than 25000 lines of code. Dont know what i should paste. Sorry again – Apr 07 '17 at 05:55
A co-worker suggests me to store in session a value representing the selected option and compare this value with de equivalent menuitem during rendering, so you can distinguish which color is needed. – Apr 07 '17 at 07:35
Yes, but your answer does not contain that information and no example code on how to do that. If you add an example of that, your answer is 'complete' and good ;-) – Kukeltje Apr 07 '17 at 07:37
Ok, understand. On 18 of April i will write my first post (Is necessary enough reputation?) and ill explain it with examples. Sorry again for my bad manners. Hope this information help somebody :) – Apr 07 '17 at 07:43
is not bad manners, don't feel ashamed... Good luck further (I'll help out with improving if needed!) – Kukeltje Apr 07 '17 at 09:16

How to change the color of the current selected menuitem?

2 Answers2