14 4 / 2012
Recently I blogged about Tagging the HTML tag. The general idea is to apply some
data- attributes to
Using the two, here is how you can very easily implement processor that would highlight active link in your navigation. Lets say that we have following
<nav class="main"> <a class="home">Home</a> <a class="projects">Projects</a> <a class="account">My Account</a> </nav>
Here is how our
NavHighlighter may look like:
@NavHighlighter = mapping: "nav.main .home": [ /^\/welcome/ ] "nav.main .projects": [ /^\/projects/ ] "nav.main .account": [ /^\/registrations\/(edit|update)/, /^\/profile/ ] process: -> for elem, paths of @mapping $(elem).addClass("active") if App.onPath.apply(App, paths)
mapping hash to define highlight conditions for each link. Hash key is just css selector, so you can use anything you want. Hash value is an array representing list of paths for which the given link is active.
Can’t we do it on server? Sure. There are two reasons I’m doing it on the client: cleaner and faster erb template, and fragment caching.
What about users with js disabled? Well, they could probably live without highlighted menu items. If you really want to do this on server and still use caching, read more on Cache Personalization.