Web フロントエンド開発の実践 1: 2 番目のドロップダウン menu_html/css_WEB-ITnose の CSS 実装

第 2 レベルのドロップダウン メニューは、主要な学校 Web サイト、電子商取引 Web サイト、ニュース Web サイトなどで使用されていますか? Web サイトは非常に一般的ですが、その実装原理は何でしょうか?

Web フロントエンド開発の知識を学んだ後、このような機能を実装できます。複雑なものはすべて基本的なエフェクトに追加されていますが、原理とプロセスは同じです。今日は、いくつかの単純な二次ドロップダウン メニューを作成していきます。

以下の図に示すように、多くの水平方向の第 1 レベルのメニューを見てきました:

第 2 レベルのドロップダウン メニューの図:

第 2 レベルのドロップダウン メニューは次のとおりです。水平の第 1 レベルのメニューに基づいてドロップダウン効果を追加します。 実現された制作アイデア:

ステップ 1: 静的 Web ページの制作

ラベル

• ...
プロジェクトリスト

ラベルリンク

use using using use using を通じて を通じて を通じて を通じて を通じて を通じて ‐ ‐‐ ‐‐‐‐‐ と

今日は CSS スタイルシートを使用します実装するための制作プロセスは次のとおりです:
1. 第 1 レベルのメニュー設定: 第 1 レベルのメニューが水平に表示され、1 行に配置されるように CSS スタイルを設定します。
2 セカンダリ メニュー設定: 「コース ホール」メニューへのリンクを含むセカンダリ メニュー (JavScript/JQuery/Ajax の 3 つの項目) を追加すると同時に、「ラーニング センター」メニューにセカンダリ メニューを追加します
(ビデオ)学習/事例紹介/コミュニケーションプラットフォームの3項目）、リンクもあります。
3. セカンダリ メニューを非表示にする: セカンダリ メニューを非表示にするように CSS スタイルを設定します。
4. セカンダリ メニューを表示する: セカンダリ メニューを表示するための CSS スタイルを設定します。
5 ブラウザの互換性の問題解決とコードの最適化。少なくとも 5 つのブラウザをテストします。 IE7、8、9、2345 ブラウザ、Google Chrome、
、Firefox ブラウザをテストしました。
HTML コード部分:

<span style="font-size:18px;"><meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>涓</title></span>