最近とても忙しくて数ヶ月もブログを放置していました。今回はプロジェクト内で最近作ったメニュー例を整理して共有します。
バックエンドまたは OA システムで最も一般的に使用されるレイアウトは、多くの場合、フルスクリーン レイアウトです。これは通常、上部、中央、下部に 3 行 2 列があり、ヘッダー、フッター、左側のメニュー、および iframe フレームを備えたレイアウトです。右側のページ。したがって、折りたたみ可能なセカンダリ メニューがよく使用されます。この例は、そのようなより一般的な完全に互換性があり、ハイライト表示可能なセカンダリ バッファ折りたたみメニューを実装するものです。
特徴：
欠点：
このようなメニューを作成する際の簡単なアイデアと問題について簡単に説明しましょう。
一般に、エフェクトを作成するときの私の制作プロセスは、最初に HTML 構造レイヤーのコンテンツを描画し、次にスタイルを記述し、次に JS 特殊効果などのケーキ エフェクトにいくつかのアイシングを追加することです。専門家がどのようなプロセスモデルを持っているかはわかりません。
構造層:
構造層の考え方は通常、レンダリングを伴う知覚的な理解に基づいており、このレンダリングに基づいて最も簡潔な HTML 構造が構築されます。上の図のように、UL の順序なしリストを使用することが最初に思い浮かびますが、これは 2 レベルのネストされたリストです。これが最初に考慮する必要がある問題です。
したがって、構造は次のようになります。
第 2 レベルのメニューがある場合は、ネストされた UL 構造になります。第 2 レベルのメニューがない場合は、次のようになります。
<ul class="メニュー">
<li><a href="#none">第 1 レベルのメニュー項目</a></li>
</ul>
もちろん、実際の状況に応じて、dl-dt-dd 順序リスト方式を使用して、この入れ子構造を作成することもできます。
最も独創的な構造レイヤーでは、スタイルと効果を制御するために CSS と JS に必要なフックを追加する必要があります。私は、ページのサイズが増大するため、多くのクラス名を追加する方法には常に反対してきました。このアプローチでは、1 つまたは 2 つの必要なクラス名を親コンテナーに適用し、子 (グループ) セレクターを使用して、スタイル シートにさまざまな個人設定を設定します。上記の構造で、すべてのスタイルを定義するために使用できるクラス名はいくつあると思いますか?
私のアプローチは、すべてのスタイル表示を制御するために 3 つのクラス名のみを使用することです。 1 つは class="menu" として定義されたトップレベルの UL、もう 1 つは第 2 レベルのメニューのコンテナです。つまり、ネストされた UL は class="level2" を定義し、最後に第 1 レベルのメニュー項目です。 li は class="level1" を定義しており、これら 3 つのフックを使用して、構造全体のスタイルを操作できます。
プレゼンテーション層:
スタイル シートの設定は非常に簡単です。唯一注意すべき点は、JS でセカンダリ メニューの表示と非表示を制御し、現在選択されている項目のハイライト状態を記録するため、ホバー疑似を使用していないことです。 -class を使用してマウスのスライドインおよびスライドアウト効果を実現し、JS を使用してそれをシミュレートします。 JS を使用してスタイルを制御するためのキー コードは次のとおりです。
第 1 レベルのメニュー スタイル
/*第 1 レベルのメニューの 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{背景位置:左 -31px;}
.menu li.level1 a.cur{背景位置:左 -62px;}
二次メニューのスタイル
/*JS 呼び出し用の 2 番目のメニューの 3 状態スタイル*/
.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{背景位置:左 -31px;}
.menu li.level1 a.cur{背景位置:左 -62px;}
行動層:
前述したように、スタイル シートではメニューの 3 状態効果を定義していないため、この効果をシミュレートするには、onmouseover、onmouseout、および onclick イベントを各メニュー項目にバインドする必要があります。構造層では、このコンテナ全体の ID を定義せず、クラス名のみを定義したため、クラスに基づいてこのオブジェクトを取得するために、(友人の Situ Zhengmei のおかげで) JS に拡張 getElementsByClassName() メソッドを追加しました。名前。ループ クロージャを使用して、これら 3 つのイベントをバインドします。
詳細なコードを 1 つずつ説明することはしません。デモのコメントは非常にわかりやすいので、ローカル コンピューターにダウンロードして参照してください。
ご不明な点がございましたら、このブログに投稿してご相談ください。ぜひご利用ください。
<li><a href="#none">第 1 レベルのメニュー項目</a>
<ul>
<li><a href="#none">第 2 レベルのメニュー項目</a></li>
</ul>
</li>