2

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");
Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
ceasar
  • 1,512
  • 3
  • 17
  • 25

2 Answers2

2

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.

Stephen
  • 18,827
  • 9
  • 60
  • 98
  • This works but only for the active link. Clicking on proef.html should also set an active class on - Page - About Thanks – ceasar Dec 14 '10 at 21:21
  • I just made it far better. You should update your script with my updated version. I don't know why I went about it the way I did the first time. – Stephen Dec 14 '10 at 21:33
  • 1
    I did that thanks. I added one small detail to it. if (!path) { path = 'index.html'; } so when no link is set the the default menu item is highlighted – ceasar Dec 14 '10 at 22:35
  • 1
    Nice solution Stephen, I would just suggest small update where href is checked if **contains** not **match** path, because your solution doesn't work if link href has long path with more than one slash like this "something/something/page.htm". Solution: `.find("a[href$='" + path + "']")` – Klikerko Sep 14 '11 at 16:41
  • Very nice answer! StackOverflow rocks... Adding to @Klikerko: here's the different selectors for attributes if someone's interested: http://stackoverflow.com/a/303961/114029 – Leniel Maccaferri Jan 18 '13 at 01:44
1

we did something like:

$("#sample-menu-1").find("a[href='"+window.location.pathname+"']").each(function() {
$(this).parents('li').addClass("current");
$(this).closest('ul').css("visibility","visible").css("display","block");
});

It seems to work but on mousing over the menu, the menu doesn't hold the current position.

=== update ===

It seems the parent ul is reset to not display after mousing over the menu

Mike Henke
  • 864
  • 1
  • 8
  • 22