0

So I have nav that looks like this:

<li>
  <a href="/some-parent-url">Parent Url</>
  <ul>
    <li>
       <a href="/some-parent-url/child-url-2">Child Url</a> 
    </li>
    <li>
       <a href="/some-parent-url/child-url-2">Child Url</a> 
    </li>
  </ul>
</li>

I would like to add an "active" class to the Parent URl if a user is on the page with url "some-parent-url" or any of it's parent url?

Ideally something like

<a href="/some-parent-url" <?php if (some_drupal_code_for_this){ echo 'class="active"'; } ?>>Parent Url</>
  • Why to not use theme_menu_link for that? There you can check each element by depth: $element = $variables['element']; $depth = $element['#original_link']['depth']; In your code the parent url would have depth = 1, child-url-2 = 2, child-url-3 = 3. Use l() function to create links, it takes care about "active" class. – Jack-PL Aug 6 '13 at 10:46
  • I have update my answer without using any CONTRIBUTE modules. It can be achieve programmatically. – inizio Aug 7 '13 at 10:20
1

You could use Menu Trail By Path module.

Menu Trail By Path sets the active-trail on menu items according to the current url.

For example if you are at yoursite.com/blog/category1/article1 Menu Items with these paths will get the active-trail class on them and expand accordingly.

| improve this answer | |
  • I was trying to do without using a module. – raeq Aug 5 '13 at 17:41
1

In Drupal 7, you can achieve this by using contributed modules and also by programatically.

Using Context module.

  • Go to admin » structure »context » add
  • While adding new context go to Conditions category and click <add a condition> and select PATH in the list and add YOUR_PATH.

    enter image description here

  • Now its time to ACTIVE the MENU. Go to Reactions category and click <add a reaction> and and select MENU in the list. And select the MENU which you want to be active.

    enter image description here

  • For this example I have selected Article as an active menu item.

    enter image description here

  • I have made Article as an active menu item for the following contexts. Each contexts have different path, but have same active menu item.

    enter image description here

Programatically :

  • By using menu_get_active_trail and menu_set_active_item we can achieve it
  • menu_get_active_trail - To gets the active trail of the current page.
  • menu_set_active_item - To sets the active trail of the current page.

    function THEMENAME_preprocess_page(&$vars) { $trail = menu_get_active_trail();//get the active menu trail if (count($trail) >= 3) {//if there are children menu items menu_set_active_item($trail[1]['link_path']);//set the active menu } }

| improve this answer | |
0

If this isn't a menu you may want to use Drupal args and check if your anchor's URL equals the args. If this is a menu consider to use menu_get_active_trail() .

| improve this answer | |
0

You could use Crumbs + Menupoly.

With Crumbs, you make sure that any child page where you want the parent item to be highlighted is in the breadcrumb.

With Menupoly, you can display a menu, where items are expanded and highlighted if they are in the Crumbs breadcrumb trail, even if the current page is not in the menu.

E.g. if the menu only goes as deep as "Parent > Child", but your page is at "Parent > Child > Grandchild > Grandgrandchild" (without being in any menu), then Menupoly would still expand / highlight the "Parent > Child" menu links in the menu.

So, the effect is similar to Menu Trail By Path as suggested by Nikhil M. You need to figure out which of them is more practical for your taste.

You need a little bit of programming to make the menupoly menu show up. This is explained on the module page.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.