js はハイライト表示可能なセカンダリ バッファーの折りたたみと完全に互換性あり menu_navigation メニュー

バックエンドまたは OA システムで最も一般的に使用されるレイアウトは、多くの場合、フルスクリーン レイアウトです。通常は、上部、中央、下部に 3 行 2 列のレイアウトで、ヘッダー、フッター、左側のメニュー、および ifame フレーム ページが表示されます。右。したがって、折りたたみ可能なセカンダリ メニューがよく使用されます。この例は、そのようなより一般的な完全に互換性があり、ハイライト表示可能なセカンダリ バッファ折りたたみメニューを実装するものです。

機能:

完全な互換性、ブラウザテスト: IE5.5、IE6、IE7、IE8、FF3.0、Google、Safari 4.0、Opera9.0。
HTML 構造はエレガントかつ簡潔で、冗長なタグがないため、プログラム ループ出力に役立ちます。
スタイルと構造は分離されており、スタイル シートでさまざまなスタイルを変更できます。
現在選択されている項目が強調表示され、第 1 レベルのメニューと第 2 レベルのメニューの両方を強調表示できます。
レイヤーを折りたたむと、アニメーションが適切にバッファリングされます。
バックエンドおよび一部の OA システム インターフェイスに最適です。

欠点:

この機能はバックグラウンド アプリケーション システムではあまり役に立たないため、この機能は追加されていません。
IE6ではバッファリング効果が現れません。IE6では効果が弱まります。
まずエフェクトのスクリーンショットを見てみましょう:

このようなメニューを作成する際に発生するいくつかの簡単なアイデアと問題について簡単に説明します。

通常、私の制作プロセスでは、最初に HTML 構造レイヤーのコンテンツを描画し、次にスタイルを記述し、次に JS 特殊効果やエフェクトなどの装飾を追加します。すぐ。専門家がどのようなプロセスモデルを持っているかはわかりません。

構造層:

構造層の考え方は一般に知覚的な理解に基づいており、通常はレンダリングがあり、それに基づいて最も簡潔な HTML が作成されます。構造。上の図のように、UL の順序なしリストを使用することが最初に思い浮かびますが、これは 2 レベルのネストされたリストです。これが最初に考慮する必要がある問題です。

構造は次のようになります:

コードをコピー コードは次のとおりです:

第 1 レベルのメニュー項目

セカンダリ メニュー項目


セカンダリ メニューがある場合セカンダリ メニューがない場合のネストされた UL 構造は次のとおりです:

コードをコピー コードは次のとおりです:

第 1 レベルのメニュー項目

>< ;/ul>

もちろん、実際の状況に応じて、dl-dt-dd 順序リスト方式を使用してこの入れ子構造を作成することもできます。

元の構造レイヤーでは、スタイルや効果を制御するために CSS と JS に必要なフックを追加する必要があります。私は、ページ サイズが増大するため、大量のクラス名を追加する方法には常に反対してきました。ボリュームがあるため、最も簡単なアプローチは、1 つまたは 2 つの必要なクラス名を親コンテナーに適用し、子 (グループ) セレクターを使用して、スタイル シートにさまざまな個人設定を設定することです。上記の構造で、すべてのスタイルを定義するために使用できるクラス名はいくつあると思いますか?

私のアプローチは、3 つのクラス名だけを使用してすべてのスタイル表示を制御することです。 1 つは class="menu" として定義されたトップレベルの UL、もう 1 つは第 2 レベルのメニューのコンテナです。つまり、ネストされた UL は class="level2" を定義し、最後に第 1 レベルのメニュー項目です。 li は class="level1" を定義しており、これら 3 つのフックを使用して、構造全体のスタイルを操作できます。

プレゼンテーション層:

スタイル シートの設定は非常に簡単です。唯一注意すべき点は、JS がセカンダリ メニューの表示と非表示を制御し、現在選択されている項目のステータスを強調表示するため、マウスのスライドインおよびスライドアウト効果を実現するために hover 疑似クラスを使用せず、JS を使用してそれをシミュレートします。 JSでスタイルを制御するキーコードは以下の通りです:

レベルメニュースタイル




コードをコピー

コードは次のとおりです: /*レベル メニューの 3 状態スタイル、JS 呼び出し用*/ .menu li.level1 a{display:block;line-height:31px;height:31px ;padding-left:50px ; font-size:12px;color:#fff;background:url(../images/menubg.gif) 左上を繰り返しません;}

.menu li.level1 a.hove{ background-position:left - 31px;}

.menu li.level1 a.cur{background-position:left -62px;}


2 番目のメニュー スタイル

コードをコピー

コードは次のとおりです:

/*第 2 レベルのメニューの 3 状態スタイル、JS 呼び出し用*/
.menu li.level1 a{display:block;line-height:31px;height:31px;padding-left: 50px; font-size:12px;color:#fff;background:url(../images/menubg.gif) no-repeat 左上;}
.menu li.level1 a.hove{background-position:left -31px ;}
.menu li.level1 a.cur{background-position:left -62px;}

行動層:

なぜなら、前述したように、私たちはこの表ではメニューの 3 状態効果を定義していないため、この効果をシミュレートするには、onmouseover、onmouseout、および onclick イベントを各メニュー項目にバインドする必要があります。構造層では、このコンテナ全体の ID を定義せず、クラス名のみを定義したため、クラスに基づいてこのオブジェクトを取得するために、(友人の Situ Zhengmei のおかげで) JS に拡張 getElementsByClassName() メソッドを追加しました。名前。ループ クロージャを使用して、これら 3 つのイベントをバインドします。

詳細なコードを 1 つずつ説明することはしません。デモ内のコメントは非常にわかりやすいので、ローカル コンピューターにダウンロードして参照してください。

ご不明な点がございましたら、このブログに投稿してご相談ください。ご活用いただければ幸いです。
オンライン デモのアドレスhttp://demo.jb51.net/js/caidan_js/demo.html
パッケージのダウンロード アドレスhttp://www.jb51.net/jiaoben/ 27308.html