Notebook

Dynamic CSS Navigation Highlighting with Expression Engine

Here’s a little trick I’ve been using with Expression Engine to get my category menus to auto highlight.

I’ve stripped it down to the minimum to make it easier to dissect. The two main things that you need to be looking at are the dynamic_css_navigation_highlighting_with_expression_engine1 variable in the css and {category_id} in the id selector. The dynamic_css_navigation_highlighting_with_expression_engine1 variable will get replaced with whatever is in the third segment of your url. So if we were to use the example url of…

http://www.31three.com/go/demo/category_highlight/C10

The css section of the code would be rendered…

and the nav list would be rendered something like this…

The dynamically created css rule will now be applied only to the active category. I’ve used the example of categories, but you can also substitute the {entry_id} tag if you’re using the {exp:weblog:entries} tag.

Here’s a very simplisticworking example along with a downloadable template.