A Common feature found in many CMS’s or web-apps is a navigation menu with a highlighted active page, or the parent of the current page in a hierarchy. The trick is getting the proper element with an added CSS class of ‘selected’ or ‘active’. There are a number of ways to do this, but I just found a new way to do it in Grails using a Sitemesh’s pageProperty. In my main layout gsp I have the nav menu
- Books
- Authors
- Stores
then in the head section of a view gsp’s where I want the appropriate element to have a ‘selected’ or ‘active’ class. I include:
Then in the css have something to deal with the applied class:
#mainMenu li > a.selected { .... }
Pretty simple! I don’t know if this is very efficient in terms of performance. I can think of other ways to do this with Javascript, or params passed from the controller, but I wanted to find something that used Sitemesh as that seemed like the component that ought to handle this sort of feature. So while this is working for me, and gives a pretty good level of control, I am still wondering if it is really the ‘right’ way to do it. For a more comprehensive explanation of Sitemesh in Grails visit this blog.