ドロップダウンメニューは私の開発でよく遭遇しますが、プロジェクトを書き直す必要はありません。それはシンプルですが、それを変更するのは非常に面倒ですが、私はまだ比較的怠zyです。今日、私は以前のプロジェクト開発でメニューを整理し、一般的なバージョンを書く時間があります。将来こんなに厄介である必要はありません。
特徴
本日コンパイルされたメニューは、jQuery+CSSによって開発されました。
1。強い汎用性
以前に使用したドロップダウンメニューに問題があり、メインナビゲーションとサブメニューを個別に設定する必要があります。たとえば、セカンドレベルのメニューはclass = "first_menu"、3番目のレベルのメニューはclass = "second_menu" ...などです。この書き込み方法には問題があります。つまり、ループ出力を実行するプログラマーを助長しないということです。このメニューは、マルチレベルのメニューを定義する必要なく、CSSスタイルを導入する必要があります。
2。美しい自動通話プルダウン命令
過去には、ドロップダウンメニューにドロップダウンクラスを手動で追加しました。これで、CSSのドロップダウン効果のスタイルを定義するだけで、コードはドロップダウンメニューを自動的に探し、インジケータ矢印を追加します。
3。簡単な呼び出し
プログラマー出力リストはシンプルで、あまり判断する必要はありません。メニューデータを再帰的に呼び出すだけです。
成し遂げる
1。HTMLコード
まず、ページにメニューデータを出力します。ページは、ULとLIで構成されるメニューリストを形成します。特定の構造コードは次のとおりです。
<ul> <li> <a href = "＃"> home </a> </li> <li> <a href = "＃">メニュー1つ</a> <ul> <li> <a href = "＃">ロックコースター</a> </li> <li> <li> <a href = "＃"> volcanic uption </a> </li> <鳥</a> </li> </li> </li> <li> <a href = "＃">メニュー2 </a> <ul> <li> <a href = "＃">私たちについて</a> <ul> <li> <a href = "＃">地理的geo </a> <ul> <a </</</< href = "＃">誕生と永遠</a> </li> <li> <a href = "＃"> href = "＃">成功</li> </li> </li> <li> <a href = "＃">データベース</a> <ul> <ul> <li> <a> href = "＃">データ暗号化</a> </li> <li> <a href = "＃">データモデリング</a> </li> </li> </li> <li> <a href = "＃"> cカメラ</a> </li> </li> </li> </li> </</</</</</</</li>
一部の基本的なHTMLコードはシンプルで、コードの意味を説明する必要はありません。彼らは、コード構造を強調します。2番目のレベル、第3レベル、またはいくつかのレベルのメニューが主にネストされたULであるかどうか。スタイルシート名も非常にシングルで、Submenuは「Sub_menu」スタイルであり、プログラムコードループコールを非常に助長します。
2。CSSスタイル
CSSスタイルコードも非常に簡単で、特定のコードは次のとおりです。
A {テキスト装飾：なし; } ul、li {list-style：none;マージン：0;パディング：0; }/*定義メニュー*/。menue li {background：＃111;色：#fff;高さ：30px; Line-Height：30px;位置：相対;フロート：左;マージン右：5px;幅：100px;テキストアライグ：センター;フォントファミリー：arial、helvetica、sans-serif; } .menue li a {color：#fff;フォントサイズ：14px;表示：ブロック; }/*ドロップダウンメニュースタイル*/ul.sub_menu {position：absolute; width：100px;表示：なし; Z-Index：999; }。色：＃555;フォントサイズ：12px;国境圏：1px＃333ソリッド;位置：相対;幅：100px;高さ：30px; }。 } /*jsはこのクラスを最後のLIに追加し、境界線底効果を削除します* /。menue li ul.sub_menu li a {background：＃222;色：＃888;ディスプレイ：ブロック;高さ：30px; }。背景：url（arrow.png）繰り返しの権利。パディング・ライト：15px;}/*メインナビゲーション矢印は下にあります*/。menue li a.hasmenu {background：url（arrow.png）繰り返しの権利。パディング・ライト：15px;背景ポジション：右-30px;}/*ドロップダウンメニュー矢印は正しい*/。menueli ul.sub_menu a.hasmenu {background：＃222 url（arrow.png）No-Repeat Right Top;}。繰り返しの右上部;}。メニューli ul.sub_menu li a.hasmenu：hover {background：＃f90 url（arrow.png）繰り返し右上部。色：#ffff;}ここでは、2つの予防策のみを強調します。
1.位置の絶対と相対の違い
絶対：絶対的な位置付け、CSSは「位置：絶対的;」として記述され、その位置は次のように2つの状況に分割されます。
A.上部、右、下、左が設定されていない場合、デフォルトは親の「コンテンツ領域の元のポイント」に基づいて元のポイントになります。
B.上部、右、下、左が設定されている場合があります。次のように2つの状況があります。
（1）。親には位置属性がなく、ブラウザの左上隅（ボディ）は「元の座標ポイント」として配置されます。位置は、上部、右、下、および左属性によって決定されます。
（2）。親には位置属性があり、親の「座標元のポイント」が元のポイントです。
相対的なポジショニング、CSSは「位置：相対;」と書かれており、親の「コンテンツ領域の元のポイント」を元のポイントと呼び、親がいないと、本文の「コンテンツ領域の元のポイント」が元のポイントとして言及されています。位置は、上部、右、下、および左属性によって決定され、「ストレッチまたは占有の高さ」の機能があります。
上記の2つの違いは非常に重要であり、非常に一般的な手法です。それらを区別する必要があります。私は開発に多くの時間を無駄にし、問題を発見しました。実際、これらの2つの属性によって引き起こされます。
2。背景ポジションを使用します
ウェブサイトの速度を向上させ、ウェブサイト管理を促進するために、一般的に使用されている小さな写真を大きな写真に配置するために、時々、時々。 CSSが対応する小さな写真を必要とする場合、この方法で達成できます。それが何を意味するのかを理解している限り、電話するのは非常に便利です。この方法では、白いドットが画像インターセプト関数であり、使用法の詳細は次のとおりであることを説明しています。
文法：
背景ポジション：長さ||長さ
背景ポジション：位置||位置
価値：
長さ：パーセント|浮動小数点数とユニット識別子で構成される長さの値。
位置：上|センター|下|左|センター|右
説明：
オブジェクトの背景画像の場所を設定または取得します。背景画像プロパティを最初に指定する必要があります。この属性の位置決めは、オブジェクトのパッチ属性（パディング）設定の影響を受けません。デフォルト値は、0％0％です。この時点で、背景画像は、オブジェクトにパッチ（パディング）が含まれていないコンテンツ領域の左上隅に配置されます。 1つの値のみが指定されている場合、値は水平座標に使用されます。縦座標はデフォルトで50％になります。 2つの値が指定されている場合、2番目の値が縦座標に使用されます。水平軸値が中心値をオーバーライドするため、値が正しい中心に設定されている場合、背景画像は右に配置されます。ここにいくつかの方程式があります
左上、左上は0％0％に相当します。
トップ、トップセンター、センタートップは50％0％に相当します。
右上、右上は100％0％に相当します。
左、左中央、中央の左は0％50％に相当します。
センター、センターセンターは50％50％に相当します。
右、右センター、センター右は100％50％に相当します。
左下、左下は0％100％に相当します。
底、下部の中央、中央の底部は、50％100％に相当します。
右下、右下は100％に相当します
3。JSコード
このメニューはjQueryに基づいているため、最初にjQueryコードベースを導入してから、次のJSコードを記述してドロップダウンメニューを実装する必要があります。
<Script src = "js/jquery.min.js"> </script> <script> $（document）.ready（function（）{//ナビゲーションのデフォルトのハイライトを設定すると、このメニュー$（ "ul.menue li.menue_li：eq（0）"）。最後のアンダースコア$（ "。sub_menu"）。find（ "li：last-child"）。 if（$（this）.find（ "ul"）。length！= 0）{$（this）.find（ "a：first"）。addclass（ "hasmenu"）}}）// $（ "。menue li"）。 find（ul.sub_menu：first "）。 submenu.css（{左： "100px"、top： "0px"}）$（ "。sub_menuli"） $（this）.find（ "a：first"）。removeclass（ "now"）$（this）.find（ "ul：first"）。隠し（）}）;/*jQueryメニューend*/}）</script>上記の手順を通じて、一般的なマルチレベルのメニューが実現されます。上記のコードは、私の毎日の開発の蓄積です。私のレベルが限られているため、多くの間違いがあるかもしれません。私の同僚が、私の参照のためにより最適化されたコードを批判し、修正または提案することを願っています。ありがとう。
Universal Infinitusドロップダウンメニューの上記の実装コードは、私があなたと共有したすべてのコンテンツです。参照を提供できることを願っています。wulin.comをもっとサポートできることを願っています。