0

I have 2 conflicting menus I need to solve by adding an active class to a targeted menu only, they are a user menu and a profile and account settings menu which have overlapping links.

  1. User Menu (in the header section of every page):

    • [username] (links to Profile2 page)
      • Account Settings (i.e. change password, etc.)
      • Log out

  2. Profile and Account Settings menu (appears in the sidebar of the profile2 and account pages):

    • View Profile (links to Profile2 page also)
    • Edit Profile
    • Account Settings (same link destination as "Account Settings" of User Menu)
    • Order History

Since I'd like to convey to my users that whenever they are in any page linked by the Profile and Account Settings menu (eg. Edit Profile)I tried using Context to set an .active class for "User Menu>Profile", which worked.

However, now that "User Menu>Profile" is active when I'm in "Edit Profile", since "View Profile" shares the same link destination as "User Menu>Profile", both "View Profile" and "Edit profile" are have an .active class, which is very undesirable.

Hence, I would like to know, if there is a way to use Context or any hooks to set an .active class for the User Menu only when I'm in the "Edit Profile" page?

Improve this question
4
  • Are you using pathauto?
    – SDMulroy
    Commented Jul 1, 2014 at 7:40
  • Yes I'm using pathauto :)
    – ashash
    Commented Jul 1, 2014 at 7:45
  • try using jquery to check the path against all links on the page and $(element).addClass('active') on the matching elements
    – SDMulroy
    Commented Jul 1, 2014 at 8:15
  • Thanks. I'm, not familiar with using jquery. I'd like to know if there's a way to check the path against links in only a specific menu on the page before adding the class?
    – ashash
    Commented Jul 1, 2014 at 8:22

1 Answer 1

Reset to default
2

Try the following modules

1)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.

I've used Menu Position module for one of my project and it works great!

OR

2) Menu Trail By Path

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.

blog

blog/category1

blog/category1/article1

Improve this answer
2
  • @ashash Great! glad to hear that :)
    – Krishna Mohan
    Commented Jul 2, 2014 at 6:31
  • 1
    Yess!! I was about to give up on Menu Position until I went to Settings> Mark the rule's parent menu item as being "active". Thanks! (deleted the previous comment because I wrote Menu Trail by Path instead of Menu Position)
    – ashash
    Commented Jul 2, 2014 at 6:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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