How to keep "active" css on menu item when clicking on other link on same page?

Question

I have an issue with my main menu. When you click on the "Cases by Topic" menu item, you are taken to the "Cases by Topic" page. The "Cases by Topic" menu item is then given the css class "active". I set it up so if a menu item has "active" css it is dark blue, rather than light blue to indicate it is the current menu item.

The page it's self has a drupal block that has a bunch of taxonomy menu items. Each one of these taxonomy menu items also point to this page but will load a different set of information in the page (which is a drupal view).

When they click on a taxonomy link in the block it reloads the page, but then the "Cases by Topic" main menu item no longer has the "active" css class on it.

Here is a picture example:

The user clicks on the "Cases by Topic" main menu item and the page loads. At this point the "Cases by Topic" menu item has the 'active' css class. The user then clicks on a taxonomy link in the drupal block ("Access to Information").

The same page reloads, but now the "active" css is on the taxonomy link and not the main menu "Cases by Topic" menu item.

I would really like to have the "active" css class stay on the "Cases by Topic" main menu item, even when people click the links in the taxonomy block.

At the very least I would not have the taxonomy link just clicked have "active" css and "Cases by Topic" should keep that css class.

Any ideas?

Answer 1

You could consider using jQuery client-side to set the class based on path. See this post on how to do that: http://www.itworld.com/article/2832973/development/setting-an-active-menu-item-based-on-the-current-url-with-jquery.html

or you could try using Menu Trail By Path module https://www.drupal.org/project/menu_trail_by_path

Answer 2

Borrowed from here: This deals with hover, but you should be able to modify the principles to work for you. With this you could create css that functions on the taxonomy menu item being active.

When I hover over a div or class with an id of "a", can I get the background color of a div or class with the id of "b" to change?


Yes, you can do that, but only if #b is after #a in the HTML.

If #b comes immediately after #a: http://jsfiddle.net/u7tYE/

#a:hover + #b {
    background: #ccc
}

<div id="a">Div A</div>
<div id="b">Div B</div>
That's using the adjacent sibling combinator (+).

If there are other elements between #a and #b, you can use this: http://jsfiddle.net/u7tYE/1/

#a:hover ~ #b {
    background: #ccc
}

<div id="a">Div A</div>
<div>random other elements</div>
<div>random other elements</div>
<div>random other elements</div>
<div id="b">Div B</div>
That's using the general sibling combinator (~).

Both + and ~ work in all modern browsers and IE7+

If #b is a descendant of #a, you can simply use #a:hover #b.

ALTERNATIVE: You can use pure CSS to do this by positioning the second element before the first. The first div is first in markup, but positioned to the right or below the second. It will work as if it were a previous sibling.

Answer 3

Future readers may be interested in controlling the active trail with the module: menu_position

Often times site builders want certain types of content to appear in a specific position in the navigational menu. The simplest solution, adding all of that content individually to the menu system, has performance and usability issues. (Imagine hundreds of menu items added to one spot in the menu.)

This module allows for the creation of rules that will dynamically add the current page into the menu system at the requested spots.

This includes affecting:

• The main links of the theme
• The secondary links of the theme
• The breadcrumb trail
• Menu blocks provided by core's Menu module
• Menu blocks provided by the Menu Block module