Easy way to check if a menu item is current (to apply class="current")
  • Vote Up0Vote Down Travis August 2011

    currently I have a simple page menu using an unordered list.

    The code I have below is always returning true, i'm not sure what I have to change.

    Also, after the main page menu is working, I also need a way to differentiate wildcards or something for my sidebar-menu and each career position which will always be changing.

    The career page is located at /about/careers

    Each career post is located in /about/apply/22462 (vae ID)

    So basically I would need the sidebar menu to always be highlighted for 'careers' if the url is /about/apply/*

    The v:yeild is from the old way i was doing it, but its missing a lot of my inner pages, and the v:yield method is very clunky for what im trying to do because of the templates inside of templates.


    <ul>
    <li<v:if path="request_uri('/')"> class="current"</v:if>><a href="/">Home</a></li>
    <li<v:if path="request_uri('/about')"> class="current"</v:if>><a href="/about">About</a></li>
    <li <v:yield for="ourwork_current" />><a href="/our-work">Our Work</a></li>
    <li <v:yield for="process_current" />><a href="/process">Process</a></li>
    <li <v:yield for="contact_current" />><a href="/contact">Contact</a></li>
    </ul>

  • 2 Answers sorted by
  • Vote Up1Vote Down KevinKevin August 2011

    request_uri() doesn't take parameters, it just returns the whole request URI.

    What you can do is:

    <v:if path="request_uri()=='/about'">

    That will match /about exactly. If you want to also match the subpages, you can do something like this:


    <v:if path="substr(request_uri(), 0, 6)=='/about'">

  • Vote Up0Vote Down michaelmichael August 2011

    I always have the filename of the page added as a class in the body/html tag, then you can highlight things like this using CSS.

    var namespace = window.location.pathname.split('/')[1] || 'home';
    $('body').removeClass().addClass(namespace);

Add a Comment

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In Apply for Membership

Categories

In this Discussion