A web page usually has a menu link that gets you there, as does this blog post with its menu link in the vertical menu of blog posts, listed chronologically, newest at the top. When you are reading this post, that menu link will be styled bold. That bit is easy.
But there is a further complexity in that this blog post also has a ‘grandparent’ menu link at the top of the page, simply entitled ‘Blog’. If you click that link, you don’t arrive at this page, but at a page listing some of the most recent blog posts, prefaced by a general introduction about the whole blog. From there you need to locate this post’s title in the introduction (or its associated vertical menu) and click that. Then you get here.
We are therefore two layers down in the rabbit hole. To be really considerate to users, we should ideally show them which rabbit hole they fell down - and that’s what this post is about.
Targeting parent links
Most CMS systems have a built-in styling engine that does the work on the first level-down. At that point, the horizontal menu link saying ‘Blog’ is automatically assigned the active class, and that class is styled behind the scenes with something like the following:
.nav u li a.active {
font-weight: bold;
}We could also simplify this so that it applies universally to any link which has the active class, as follows:
a.active {
font-weight: bold;
}This would then target the links running up and down the vertical column of blog titles, giving a current blog post’s menu link a bold style - if one was on a blog post’s page (rather than its parental summary page). Basic stuff. A good-enough CMS will do this automatically for all ‘parent’ links. It’s just good manners.
Targeting grandparent links
For the second-level down, where ‘grandparent’ links are involved, one needs something more nuanced. We could use a ‘breadcrumb’ system that builds a horizontal line of links representing the click-route you took to get where you are. I’m personally not too keen on these for simple sites (like this one), so something else is needed to help us indicate which route you started at.
The problem is that as we navigate further down into the rabbit hole the top-most ‘Blog’ link, which is still visible, no longer has an active class assigned to it. We are no longer on the blog page’s introduction, but have gone deeper in and need a custom solution to fix this.
Recap with screenshots
Before moving further, let’s remove any ambiguity with a couple of screenshots:
Above, on the blog’s introductory page, we are one level down:
- We can see in the left column the blog’s introduction followed by summaries of the latest blog posts.
- (A) shows the ‘parent link’ in its active, highlighted state.
- (B) Shows the title of the post we are going to navigate to, the one you are reading now.
- (C) Is a link to this post, along with links to other recent posts, none of which are highlighted (because we aren’t viewing any of them at this stage).
Above, on an individual blog post, we are two levels down:
- We can see in the left column this blog post. On the right column there is the same list of links to recent posts.
- (D) Shows the active link to the current post. It is highlighted. Most CMSs will do this automatically.
- (E) Shows what is now the ‘grandparent link’ to the page we have just come from. Most CMSs will not highlight this for you by default, but we want to be good mannered and show that link as highlighted. Doing just that (in Drupal) in this circumstance is what this post is about! (Do it once in a project and it will be available elsewhere with a bit more tweaking.)
Menu attributes
The Drupal Menu attributes module enables us to add custom classes to any links in any menu. We install it and can assign classes or IDs to individual links or just allow the system to twin each link with a unique class. In this example, that ‘Blog’ link happens to be assigned the additional class of menu-item-806.
Specify the context
We then need to ensure that Drupal is generating body classes for every node. Some Drupal themes do this by default. If yours doesn’t, then in the appropriate theme template file (probably page.tpl.php) there should be an instruction to inject default classes into the body class, using:
<body class="<?php print $body_classes ?>">
This then generates a body tag filled with standard Drupal variables which we can then use as classes:
<body class="html not-front not-logged-in section-blog">
Link the attribute to the context
We then link these together with a simple CSS declaration:
.section-blog li.menu-item-806 a {
font-weight: bold;
}
and the relevant link, (E) in the second screenshot, becomes highlighted on every blog page of the site.
With so many angels dancing on this particular pin-head it’s easy to forget what started this. Effectively, giving users a simple visual cue as to their whereabouts in a site is just good manners. A grandparent-grandchild content relationship stretches what an out-of-the-box CMS automatically does, so a bit of code-wrangling is required. Remember: once done, this can be tweaked for any similar situation. Identify the menu link you need to style up, then define the context, then express that succinctly with CSS. Happy tweaking!