Question

i was looking around and i saw a very technical navigation, its pretty awesome for me. when i read its codes i got stucked. i tried all my best but unable to understand please help me.

http://jsfiddle.net/RXvyY/

i tried many timese to make this navigation same as orignal but i don’t whats wrong with me. please help me to solve … when i hover over the navigation button it doesn’t change.. and when i click there is no possibility the it changed…

the orignal navigation link is … where is saw it first.

http://www.intuit.com/

please help me.

Answer 1

try changing this part of the css:

.primary-level a {
    display:block;
    height: 80px;
    background:url("http://www.intuit.com/sbweb/common/includes/header/navigation/images/nav_main.png") no-repeat;
}

you were changing the background position for the links on hover but the links didn’t actually have a background set. The height is so there is a target for the link – you can change it to whatever you want. I have set it at the height of the entire menu but you may only want half of that.

EDIT:

you could add this:

#nav-primary-intuit a:active{
     background-position: -9px -220px;
}

you’ll have to add it for each menu item, of course

EDIT 2:

how about this then…

change your css to this:

#nav-primary-intuit a.active {
    background-position: -9px -220px;
}

note that active is now a class not a pseudo-class

add this jquery:

$("a").bind({
    click: function () {
        $("a").removeClass("active");
        $(this).addClass("active");
    }
});

the removeClass takes the active class away from all links then it adds it back to the selected one