Skip to main content
Added detailed explanation
Source Link
Vagner
  • 2.5k
  • 15
  • 20

Recently I've the same needs in my site and the fastest and painless approach was doing in CSS instead create preprocess functions.

This was done in Drupal 8, but works independently of what you are using.

First make sure that you have a class or id named with your path in any place of your HTML, and then, just use it to style your link with same 'active' class. Something like this...

HTML:

<body class="path-product-detail">
  <header>
    <nav class="main-menu">
      <ul>
        <li><a href="/home">Home</a></li>
        <li><a href="/products">Products</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
    <nav>
  </header>
  ...
</body>

CSS:

.main-menu .active, 
.path-product-detail .main-menu a[href="/products"] {
  color: #fff;
  background-color: #c9093e;
}

Try in JSFiddle:
https://jsfiddle.net/t4vny2df/1/

Edit 1: Detailed explanation
First of all, in your html.tpl.php template make sure that the current path is printed as a class, this will be dynamically specified, all the magic is right here in this class (in Drupal 7, by default, seems the class is page-'currentPath' according docs).

Your HTML must print current path in body element.

<body class="page-currentPath ...">
...
</body>

Now, based in this class just use the right CSS selectors to highlight the menu item. I'm going to use the 'products' html code example.

.main-menu /*Note 1*/ .active /*Note 2*/, 
.page-product-detail /*Note 3*/ .main-menu a[href="/products"] /*Note 4*/, 
.page-search-product /*Note 5*/ .main-menu a[href="/products"] /*Note 4*/{
  color: #fff;
  background-color: #c9093e;
}

First, in CSS we can use a combination of selectors do get the right element and we can use 'comma' to specify another selector to the same style (a, p{color: #000} /*Element 'a' and element 'p' will be color black*/)

Note 1 - Considering your menu with a class 'main-menu'.
Note 2 - Considering that you are using a 'active' class for current path.
Note 3 - If body has a class 'page-product-detail' this selector will be considered.
Note 4 - This selector will get the menu item that you want highlight and doesn't have a 'active' class, because you are not in '/products' page.
Note 5 - If body has a class 'page-search-product' this selector will be considered.

For more pages just add another line with your 'page selector'. Any questions just leave a comment and I explain.

Recently I've the same needs in my site and the fastest and painless approach was doing in CSS instead create preprocess functions.

This was done in Drupal 8, but works independently of what you are using.

First make sure that you have a class or id named with your path in any place of your HTML, and then, just use it to style your link with same 'active' class. Something like this...

HTML:

<body class="path-product-detail">
  <header>
    <nav class="main-menu">
      <ul>
        <li><a href="/home">Home</a></li>
        <li><a href="/products">Products</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
    <nav>
  </header>
  ...
</body>

CSS:

.main-menu .active, 
.path-product-detail .main-menu a[href="/products"] {
  color: #fff;
  background-color: #c9093e;
}

Try in JSFiddle:
https://jsfiddle.net/t4vny2df/1/

Recently I've the same needs in my site and the fastest and painless approach was doing in CSS instead create preprocess functions.

This was done in Drupal 8, but works independently of what you are using.

First make sure that you have a class or id named with your path in any place of your HTML, and then, just use it to style your link with same 'active' class. Something like this...

HTML:

<body class="path-product-detail">
  <header>
    <nav class="main-menu">
      <ul>
        <li><a href="/home">Home</a></li>
        <li><a href="/products">Products</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
    <nav>
  </header>
  ...
</body>

CSS:

.main-menu .active, 
.path-product-detail .main-menu a[href="/products"] {
  color: #fff;
  background-color: #c9093e;
}

Try in JSFiddle:
https://jsfiddle.net/t4vny2df/1/

Edit 1: Detailed explanation
First of all, in your html.tpl.php template make sure that the current path is printed as a class, this will be dynamically specified, all the magic is right here in this class (in Drupal 7, by default, seems the class is page-'currentPath' according docs).

Your HTML must print current path in body element.

<body class="page-currentPath ...">
...
</body>

Now, based in this class just use the right CSS selectors to highlight the menu item. I'm going to use the 'products' html code example.

.main-menu /*Note 1*/ .active /*Note 2*/, 
.page-product-detail /*Note 3*/ .main-menu a[href="/products"] /*Note 4*/, 
.page-search-product /*Note 5*/ .main-menu a[href="/products"] /*Note 4*/{
  color: #fff;
  background-color: #c9093e;
}

First, in CSS we can use a combination of selectors do get the right element and we can use 'comma' to specify another selector to the same style (a, p{color: #000} /*Element 'a' and element 'p' will be color black*/)

Note 1 - Considering your menu with a class 'main-menu'.
Note 2 - Considering that you are using a 'active' class for current path.
Note 3 - If body has a class 'page-product-detail' this selector will be considered.
Note 4 - This selector will get the menu item that you want highlight and doesn't have a 'active' class, because you are not in '/products' page.
Note 5 - If body has a class 'page-search-product' this selector will be considered.

For more pages just add another line with your 'page selector'. Any questions just leave a comment and I explain.

Source Link
Vagner
  • 2.5k
  • 15
  • 20

Recently I've the same needs in my site and the fastest and painless approach was doing in CSS instead create preprocess functions.

This was done in Drupal 8, but works independently of what you are using.

First make sure that you have a class or id named with your path in any place of your HTML, and then, just use it to style your link with same 'active' class. Something like this...

HTML:

<body class="path-product-detail">
  <header>
    <nav class="main-menu">
      <ul>
        <li><a href="/home">Home</a></li>
        <li><a href="/products">Products</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
    <nav>
  </header>
  ...
</body>

CSS:

.main-menu .active, 
.path-product-detail .main-menu a[href="/products"] {
  color: #fff;
  background-color: #c9093e;
}

Try in JSFiddle:
https://jsfiddle.net/t4vny2df/1/