Question

I currently working on the menu system for this site.

I have the following code, which is working fine:

$('#menu .container ul li:not(:first-child)').fadeOut()

$('#menu .container ul li:first-child').click(function() {
    $(this).siblings().fadeToggle();
})

I’m just hiding all the menu items to clean up the navigation a bit. What I now want to do is have the browser detect which section you’re currently viewing (ie if you’re looking at Magda under Latest Work) and automatically show that section. I’m not quite sure how to go about this. Maybe detect the URL, then find the URL in #menu .container, and .show() all of its siblings when it loads? Can anyone help on this one?

Answer 1

$("#menu a").each(function() {
  if($(this).attr('href') == window.location.href) {
    //Show the menu.
  }
});

You’ll have to fill in the bit that actually shows the menu, though. Let me know if you need help with that as well.

I tested it briefly in the Chrome Javascript console and it seemed to find the correct element. Be sure to test it across multiple browsers, though. I think this also relies on the href element in each link being a “full” URL including the http:// and the domain name. If they are relative links (e.g. /home) you’ll want to use window.location.pathname instead of window.location.href.