JavaScript - CSS を使用して Web にナビゲーション バーを実装しますか?

Question

1. ナビゲーション バーを http://chuangzaoshi.com/code の左側のようにするにはどうすればよいですか?
2. CSSを使って完全に実現できるのでしょうか？純粋なCSSを実装するにはどうすればよいですか? jsを実装するにはどうすればよいですか? ＃＃＃ありがとう！

ps: 回答してくれた 2 人のマスターに感謝します。明確に説明できませんでした。私の質問は次のとおりです:

リーリー

これを実装する方法がわからないので、教えていただければ幸いです。

Answer 1

どのエフェクトのことを指しますか? :hover 逆、それほど複雑なことはありません。
すでに自分で例を示しているので、そのコードを開いて比較するだけです。
特定のスタイルや効果がわからない場合は、さらに詳細を尋ねることができます。
全体を実装する方法を直接尋ねるには広すぎる
実装例を示しましたか？ cssとjsは示されているので、直接参照できます。

新しく追加された質問に基づく

左側のナビゲーションでデザインなどの大きなラベルをクリックすると、元のラベルが自動的に折りたたまれ、現在のULがポップアップ表示され、右側のコンテンツがそれに応じて変更されます。

大きなラベルをクリックするたびに、実際にはすべての大きなラベルの下にある ul がデフォルトで閉じていることがわかります。
その後、現在のページによると、現在の大きなラベルにはアクティブなクラス名があり、開きたいULがそれに続くことがわかります。つまり、簡単です:

CSSメソッドは.active + ul { display:block; }

jqueryメソッドは$('.active').next('ul').css('display','block');

他のメソッドも同様で、アクティブなアクティビティ タグを取得し、その下に表示する小さなタグ リストを示します。
いただいた例によると、cssで書かれているのではなくstyle属性に挿入されているのでjsで実装する必要があります。

Answer 2

マウスをその上に移動したときに変色効果が必要ですか?

• CSSで実装する場合は、左側のリストを使用してからスタイルを変更し、:hover疑似クラスを使用してマウスを移動するスタイルに合わせます
  たとえば

リーリー

• JSで実装する場合は、対応する要素のマウス入力イベントを監視する必要がありますonmouseenter，将列表的项目中除了当前项，其他的样式都设置为常规样式，还要监听元素的鼠标离开事件onmouseleave マウスが離れると、マウスが通過したときに設定されたスタイルを通常のスタイルに戻す必要があります。

アップデート

次回初めて質問するときは、問題の詳細を明確に説明することをお勧めします。そうしないと、回答者の時間が無駄になります。

後ほどいただいたご質問に対して、

左側のHTMLレイアウトはおそらくこんな感じです

リーリー

次に、上記のように、白くなったものの上にマウスを移動します。
クリックすると、クリックした <li> に .active などの CSS クラスを追加してから、前の <li>加上一个CSS类，比如.active，然后，加上之前的:hover を追加します。CSS は次のようになります。

リーリー

もちろん、この例では現在のラベルとマウスオーバーのスタイルは同じなので、ul li:hover和ul li.activeを組み合わせて

と書くこともできます リーリー

このようにすると、タブを切り替えることができなくなります。右側の HTML レイアウトは次のようになります。 リーリー

デフォルトでは、

クラスの表示にはCSSが使用されます。それ以外の場合は非表示になります。 #main中第一个子p显示出来，将其他的隐藏，建议也给p加上.active类，有.active リーリー

次に、JS イベントを記述しますが、ネイティブの方が記述が面倒なので、jQuery を使用して操作することをお勧めします。

ネイティブの記述例:
リーリー

jQuery ライブラリを使用すると、次のようにより簡単になります:

リーリー

結論

これでかなり説明がつきましたが、非常に衝撃的なニュースをお伝えしたいと思います。つまり、あなたが挙げたサンプル Web サイトではこれがまったく行われない可能性があります。この Web サイトには 4 つのページがあり、リンクを通じて相互にジャンプできます。各ページの現在のページのラベルは常に点灯しています。 (ソースコードを注意深く見ていませんでしたが、異なる URL アドレスに基づいてルーティングされているかどうかはわかりませんでした。そのため、「おそらく」とだけ述べました)。