Question

I was making navigation menu for my website that works like this: there is navigation, arrow and main content. when you load page, arrow points to home option in navigation, and when you hover over other options, it moves to currently hovered option, and when mouse leaves navigation, it comes back to home option.

I managed to do it on homepage, but now i have a problem with other 6 pages. I don’t know how to make arrow always go back to navigation option that has a href=”#”, instead of always going back to homepage option.
navigation is vertical.

here is my code:

$(document).ready(function() {

$('#arrow').css({'marginTop' : top});

$('ul li h3').hover(function(){

     var top = $(this).parent().position().top; //getting margin-top value of hovered element


$('#arrow').stop().animate({
    'marginTop' : top-115 //setting margin top,and removing 115px for aesthetics 

    });
},function(){
    $('#arrow').stop().animate({
    'marginTop' : 10 //here i set margin-top to 10 because that is where home option is
    })
});
});

I know that i can solve this by making .js file for each page with different values for default margin-top, but that way i wont learn anything new, and I am making this website to practice.

Thanks in advance,
Dobrica

Answer 1

Didn’t test it but it might be something very close if not working.

declare var top at the beginning of $(document).ready();

var top = $('ul li h3 a[href=#]').position().top;

and run the script you are using to animate the arrow to that position.

Basically you are selecting the anchor with the “#” in the href value, you get its top and set it as initial top value