Modify Navigation portlet to style selected links
The Problem:
Solution:
This is what the result looks like:
Here is the final html mark code, see that the parent “li” has selected class name.
By Default the Navigation Portlet doesn’t traverse the selected class up to the root element; only to the current page that is selected.
If the Nav tree is deep of levels, if set to add the selected class by default it could cause some loading time issues
Notice in this picture Page1 isn’t bold, because the selected class isn’t added to it.
This is the html markup of the navigation portlet by default with the following Customizations:
- Display Style: Custom
- Header: Root Layout
- Root Layout: Parent at Level
- Root Layout Level: 0
- Included Layouts: All
- Nested Children: Yes
Solution:
Use Javascript to target selected link and add the selected class on parent “li”
This is what the result looks like:
Here is the final html mark code, see that the parent “li” has selected class name.
-
liferaytips posted this
Blog comments powered by Disqus
