私はこのように動作する私のウェブサイトのナビゲーションメニューを作成していました.ナビゲーション、矢印、メインコンテンツがあります. ページをロードすると、矢印がナビゲーションのホーム オプションを指し、他のオプションにカーソルを合わせると、現在ホバーされているオプションに移動し、マウスがナビゲーションから離れると、ホーム オプションに戻ります。
ホームページはなんとかできましたが、今は他の6ページに問題があります。常にホームページ オプションに戻るのではなく、常に href="#" を持つナビゲーション オプションに矢印を戻す方法がわかりません。ナビゲーションは垂直です。
ここに私のコードがあります:
$(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
})
});
});
デフォルトの margin-top の値を変えてページごとに .js ファイルを作成することでこれを解決できることはわかっていますが、そうすると新しいことは学べないので、この Web サイトを練習用に作成しています。
前もってありがとう、ドブリカ