By jkestler on

Does anyone know the best way to do this using Drupal's menu system?

So, for instance, if my menu contains an entry for Page 1, Page 2, and Page 3 of an article and the user is on page 3, I want Page 3 in the menu to be bold/highlighted.

I looked around the forums and couldn't find anything on this, so thanks for any help.

⋅ Categories: Drupal 5.x

Comments

www.richardsprojects.co.uk’s picture

www.richardsprojects.co.uk commented

Drupal should set the class for the <a> or <li> element to be active when it is the selected menu item. You can then add some CSS to style that as you wish.

style.css

li a.active {
  font-weight: bold;
}

Richard Garside
www.richardsprojects.co.uk

jkestler’s picture

jkestler commented

Thanks very much for the reply Richard. Here's a slight complication:

I have my CSS set up so that visited links in menus appear gray. If I set active links to be, say, red, the gray (visited) style seems to override the red (active) style. Any way to make it so that the active item stays red while the non-active visited items stay gray? Non-active non-visited menu links should stay black (my default link style) throughout.

Thanks again!

www.richardsprojects.co.uk’s picture

www.richardsprojects.co.uk commented

The browser always looks for the most specific CSS style rule to use for a certain HTML element.

You could try using a:visited.active as your style selector.

If you really want to know how CSS is affecting your webpage you should use Firebug. It's an extension for the Firefox web browser that among many other things lets you point at the screen and see what CSS rules are being applied.

Richard Garside
www.richardsprojects.co.uk

larry rosenfeld’s picture

larry rosenfeld commented

Thanks for this thread -- I've found it useful.

If I may add, it seems to me that the CSS is interpreted so that the last a.* item has the overriding impact. So, if you have an "a.active { color:red }" statement followed by an "a.visited { color:gray }" statement, then the latter overrides the former (and the ultimate letter color will be gray in this instance). To give precedence to the former statement, put the "a.active" statement after the "a.visited" in your css file (since the link will likely have been both visited and active).

Hope this might help.

rajesh.sharma1’s picture

rajesh.sharma1 commented

Thank you very much