Service Portal Menu - how to style active item?

[ASA5]

Hello,

Is there a way to make a menu item look different when it is active (the user is visiting the page related to that menu item) ?

For example when the end user is visiting knowledge page, I want to show the Knowledge menu item on a different css style.

[Kristoffer Mon1]

I would recommend getting familiar with your browser's "developer" options to get exact element you want to style. For example, I use the firebug extension on Firefox, to get a better understanding of how div's are structured.

From there, you can defined a CSS Include, within your own custom theme, to style that element.

[Dylan Mann1]

I can get you started in a new direction but don't have any hard answers for you. The code for a header menu is in an ng-template which is injected in you the header menu widget. If you go into the widgets module and find the Header Menu, you can then view the Angular ng-templates in the related lists section. I'd recommend cloning the menuTemplate and then trying to change that around to fit your needs. Hope this helps.

Dylan  

[Dylan Mann1]

Also if you look at the OOB service portal, they have :hover styles on their header menu. If you can figure out how to access that code, you should be able to add your own style with :active. And like Kristoffer said, take advantage of your dev tools to find that styling. Good luck, let me know if this helped or if there's anything else I can help you with.

[ASA5]

Thank you for the answers ,

I used a dependency attached to the widget "Header Menu".

This dependency contains an angular filter which compare the href attribute of each menu item with the current page id, when they are equals it returns "active"

angular.module("customFilters",[])  

        .filter("activeMenu",function($location){  

        return function(input){  

        if(input == "?id="+$location.search().id && $location.path()=="/sp" )      

        return "active";  

};  

});  

On the Angular ng-template side I have applied the filter on a class attribute of each menu item.

        <a ng-if="item.items.length == 0 && !item.scriptedItems" class="{{item.href | activeMenu}}"   ng-href="{{item.href}}" target="{{item.url_target}}">{{ item.label }}</a>  

And finally I added a CSS include to the same widget with appropriate style :

1. .nav > li > a.active{  
2.   background:yellow;          
3.   color:red;  
4. }  

The solution is working well exept for drop down menus, in my case i have only simple menus.

Hope it will be helpful