jquerymenusuperfish

Active links jquery superfish


I have a question. I use jquery superfish menu with the following structure

<div id="menu" class="ge-navigation-item">
  <!-- navigation -->
    <ul id="test" class="sf-menu sf-vertical sf-js-enabled sf-shadow">
      <li><a href="index.html">Home</a></li>
      <li><a href="#">About</a>
        <ul>
          <li><a href="index.html">Index</a></li>
          <li><a href="#">Page</a>
                            <ul>
                                <li><a href="#">menu item</a></li>
                                <li><a href="#">menu item</a></li>
                                <li><a href="proef.html">menu item</a></li>
                                <li><a href="index.html">index</a></li>
                                <li><a href="#">menu item</a></li>
                            </ul>
          </li>
          <li><a href="page-fullwidth.php">Page - Full Width</a></li>
        </ul>
      </li>
      <li><a href="showcase.php">Showcase</a></li>
    </ul>
    <!-- /navigation -->
  </div>

what I want is that clicking on a link the menu structure will be visible

So clicking on index.html will set a link on all links with href index.html But clicking on proef.html will set an active class on href proef.html - Page - About

So far I have tried this but with bad results

var path = window.location.toString().split("/")
path = path[path.length - 1]
//alert (path);
if (path)
$("#test a[href='" + path + "']").addClass("actief");
$("#test ul li:has(a) a[href='" + path +
     "']").parent().parent().parent().addClass("actief");

Solution

  • Welcome to stackoverflow. Try this:

    var path = window.location.pathname.split('/');
    path = path[path.length-1];
    
    if (path !== undefined) {
        $("#menu3").find("a[href='" + path + "']").addClass("actief");
    
    }
    

    That should appply the class to any link that matches the last item of the current url. If you were looking for a different behavior, please elaborate!

    UPDATE
    Actually, it looks like you need this:

    var path = window.location.pathname.split('/');
    path = path[path.length-1];
    
    if (path !== undefined) {
        $("#menu3")
            .find("a[href$='" + path + "']") // gets all links that match the href
            .parents('li')  // gets all list items that are ancestors of the link
            .children('a')  // walks down one level from all selected li's
            .addClass('actief');
    }
    

    That will put the class on every a element up the chain.