wp_nav_menu, one page design anchors and highlight problem

Martin:

It looks like it’s working to me. I can see that when you click on a menu item, a class is set for that menu item. The class is: actief

Add some styling to this class in your style.css file. Like this:

.actief {
backgound: none #CB7C2E;
}

I think you’re close to having it working.

Hey there Kurt.

Yeah its working now…more or less.

Got this code on the dutch forum:

var $j = jQuery.noConflict();
$j(document).ready(function() {
$j('ul#menu-hoofdmenu li a').click(
    function(e) {
        e.stopPropagation();
        $j(this).closest('ul').find('.actief').removeClass('actief');
        $j(this).parent().addClass('actief');
    });
});

And this works. However, I now need to find a way to automatically highlight the “home” button the first time the website is loaded (since “home” is the landing page).

Also, if you click on “nieuws” (in the footer) and than click on one of the other buttons in the menu, the item won’t be highlighted because the page is reloaded (the “nieuws” section is an external page, so that is why it reloads).

But I have something to move on with.

Hm. This code:
[Code moderated as per the Forum Rules. The maximum number of lines of code that you can post in these forums is ten lines. Please use the pastebin]

Works like it should (also with the reload by switching from “nieuws” to one of the main menu items) but does only work on reload.

This code:

var $j = jQuery.noConflict();
$j(document).ready(function() {
$j('ul#menu-hoofdmenu li a').click(
    function(e) {
        e.stopPropagation();
        $j(this).closest('ul').find('.actief').removeClass('actief');
        $j(this).parent().addClass('actief');
    });
});

Does what it supposed to do, but then doesn’t work when the page reloads (what happens when switching from “nieuws” to one of the main menu items).

Using those two scripts together works, but creates a lot of code. Is there a way to simplify that? (if not this solution is better then none).

Martin:

I’m not a javascript expert. I’m sure someone could come up with streamlined code.

I am sure someone can Kurt :). No problem. Thank you for your help so far.

I haven’t find a proper solution yet. So if anyone can guide me in the right direction I very much like to hear it.

The last piece of code does seem to work, hoewever, I think it will need some kind of check that compares the href attribute with what is written in the url (or viceversa). I think this might solve the refreshing problem, and that the “home” button is standard activated by switching between pages (“nieuws” page and others, since “nieuws” reloads the page).