0

さて、私はメニューについてこのアイデアを持っていますが、それを実装する方法や必要なものが本当にわかりません。私はWebデザインに非常に慣れていません。つまり、基本的にメニューの項目が強調表示されているときは、スライダーバーを強調表示された項目の下に移動させたいのです。

http://s7.postimage.org/qa3vfh797/purple.gif

そのため、ページを表示しているときに、そのページに関連するメニュータブの下にスライダーが必要です。メニューの項目にカーソルを合わせると、スライダーが現在のタブから強調表示されたタブにスライドします。ユーザーがハイライトを解除すると、ユーザーが表示しているページに関連するタブに戻ります。どんな助けでも大歓迎です

4

2 に答える 2

1

jsfiddleの例を提供するつもりでしたが、車輪の再発明をする必要はありません。

jQuery MagicLine: 記事デモ

これが目的の方向ではない場合は、 jQuery UI、特にタブセクションを使用することをお勧めします:ここ。ユーザーのカスタマイズを可能にするThemerollerでjQueryUIを使用してください。

これがお役に立てば幸いです。ご不明な点がありましたらお知らせください。

于 2013-01-22T21:30:43.310 に答える
0

完全なコードは提供しませんが、検索するキーワードをいくつか使用して正しい方向に向けます。必要なのは、メニュー項目の下にスライドするバーのを作成することです。各メニュー項目をdiv内にカプセル化し、それぞれにonMouseOverイベントを実装します。次に、onMouseOverイベントで、divを現在の場所からこのメニューdivの下に移動する必要があります。つまり、スライダーdivのoffsetLeftをメニューdivのoffsetLeft値に変更します(jqueryを使用する場合は、これを取得するための便利な関数が提供されます)。ここで、divの位置を変更すると、divの位置が直接移動します。「スライド」アニメーションでそれを実行したい場合は、段階的に移動する必要があります。たとえば、毎回5ピクセルずつ移動します。このためには、setTimeOut関数を使用します。スライダーdiv'を変更する関数を作成します ■offsetLeft値を5ピクセル単位で指定し、setTimeout関数を介して宛先に到達するまで、この関数を何度も呼び出します。setTimeoutは基本的にタイマーであり、指定された時間が経過すると関数を呼び出します。

これはあなたにグーグルで検索するのに十分なはずです:)

于 2013-01-22T19:11:35.423 に答える