javascript - このようなナビゲーションをどのように実装しますか?

Question

このようなナビゲーションをどのように実装しますか?

私は少し立ち往生しており、誰かがこれを達成するための良い方法を教えてくれるかどうか疑問に思っています.

これは、ホバー状態の 1 つの透明な PNG です。

Answer 1

あなたの基本リンクグループは<ul>

<ul id="links">
    <li class="current"> <!--apply class "current" for current link-->
        <a>link1</a>
    </li> 
    <li>
        <a>link2</a>
    </li>
</ul>

<a>より良いUXのためのタグの少しの変更

#links a {
   display:block;     /*to make `<a>` not inline*/
   padding:           /*make the link hover/click area bigger*/
   text-align: right; /*the right-aligned text*/
}

css では、「四角いインジケーター」を<a> 「現在」の背景に適用します<li>。あなたもそれを行うことができます<a>（古いブラウザの場合、ホバーは非要素には適用されません）

li.current a{
    background-image:url(url_to_square_indicator);
    background-position: middle right; 
    /*
      you can use position to refine it's position.
      im not so sure about this if this "middle right" 
      is still applicable these days
    */
}

現在のリンクにカーソルを合わせると、 を使用して画像が光っているものと交換されます:hover。以前から適用されたスタイルを再宣言する必要はありません。継承されるだけです。あなたはちょうどイメージを交換しています。(この場合、background-position は引き続き適用されます)

li.current a:hover{
    background-image:url(url_to_glowing_indicator);
}

Answer 2

推測する必要がある場合は、画像ファイルであるため、:hover で背景が変更されると思います。また、背景の位置と繰り返しを設定して、そこにのみ表示されるようにしてください。