メニューの強調表示効果は、どの Web ページでもよく使用されるデザイン手法で、ユーザーに現在いる列を効果的に知らせることができます。これは私もよく使う方法です。通常、Web ページには少なくとも 2 つのレベルのメニューがあり、1 つは上部の一般ナビゲーション バー メニュー、もう 1 つは左側のカテゴリ ナビゲーション メニューです。一般に、第 1 レベルのメニューが強調表示されているときに、現在のステータスを第 2 レベルのメニューにも記録できることが必要です。
トップメニューを含むヘッダー領域が固定されている場合、つまり毎回リロードする必要がない場合は、純粋な CSS または JS を使用して簡単に実装できますが、今日はこれについては説明しません。今日お話しするのは、第 1 レベルのメニューと第 2 レベルのメニューが各ページに動的に読み込まれる、つまりユーザー コントロールとして読み込まれるということです。この場合、メニューのハイライト状態を記録することが困難になります。
もちろん、Cookie を使用して、各ページが読み込まれたときに記録された最後の強調表示状態を記録できると言われるかもしれませんが、この方法は、多くのサブページを含む一部の複雑なアプリケーションで問題を引き起こします。ユーザーに多大な混乱と迷惑を与えます。たとえば、Cookie のライフ サイクル中に、プロジェクトが再度開かれたとき、Cookie のライフ サイクルは完全には終了していませんが、最後に保存された状態も記録され、この時点でページのアドレスが変更されているため、現在強調表示されているメニューが指しています。 to はユーザーが見たいものではありません。この Cookie のライフサイクルをどれだけ長く設定しても、ユーザーが悪意を持ってページを更新する問題を完全には解決できないことが実践で証明されています。これは本当に悪いことです！
それでは、この状況を解決するより良い方法はあるのでしょうか?
答えは「はい」です。この問題を解決する最も理想的な方法は、各ページが読み込まれるときに、ページの URL アドレスに従って現在のメニューのハイライト スタイルを明示的に設定することであることがわかっています。これにより、この種の問題は完全に解決され、ユーザーがどれほど悪意を持って更新ボタンをクリックしても、強調表示された状態は変更されません。 原理を理解すれば、実装ははるかに簡単になります。
構造層
第 1 レベルのメニュー構造レイヤー:
<ul id="メニュー">
<li><a href="default.html">ホーム</a></li>
<li><a href="clothing.html">衣料品</a></li>
<li><a href="house.html">家庭用家具</a></li>
<li><a href="cosmetic.html">化粧品</a></li>
</ul>
この第 1 レベルのメニューでは、通常、リンク アドレスにはパラメータ値がないことがわかります。 二次メニューの構造層:
<ul id="その他メニュー">
<li><a href="house.html?pId=2&sId=1">日用品</a></li>
<li><a href="house.html?pId=2&sId=2">小さな家具</a></li>
<li><a href="house.html?pId=2&sId=3">電気付属品</a></li>
<li><a href="house.html?pId=2&sId=4">寝具セット</a></li>
<li><a href="house.html?pId=2&sId=5">結婚式用寝具</a></li>
<li><a href="house.html?pId=2&sId=6">子供用寝具</a></li>
<li><a href="house.html?pId=2&sId=7">クラフト装飾</a></li>
<li><a href="house.html?pId=2&sId=8">掃除ツール</a></li>
<li><a href="house.html?pId=2&sId=9">ハウスクリーニング</a></li>
</ul>
第 1 レベルのメニューとは異なり、第 2 レベルのメニューのリンク アドレスに 2 つのパラメータ値を追加します。pId パラメータは最上位の第 1 レベルのメニューのシリアル番号を指し、sId はそのシーケンス番号です。メニュー自体。これら 2 つのメニューの合計コンテナー ul に 2 つの異なる ID を設定します。これらは JS で呼び出す必要があるため、欠落してはいけません。
スタイルレイヤー
スタイルに関しては、実際には、必要なスタイルに設定できます。唯一注意する必要があるのは、JS による動的呼び出しのために、メニュー ハイライトの 3 つのステータス スタイルを個別に設定する必要があることです。 。
/*第 1 レベルのメニューの 3 つのスタイル設定*/
#menu li a.normal{background:#fff;}//通常のスタイル
#menu li a.over{background:#00ff00;} //ローリング スタイル
#menu li a.cur{background:#ff0000;color:#fff;} //ハイライトスタイル
/*二次メニューの 3 つのスタイル設定*/
#othermenu li a.normal{background:#fff;} //通常のスタイル
#othermenu li a.over{background:#AA7F00;color:#fff;} //ローリング スタイル
#othermenu li a.cur{background:#7F0000;color:#fff;} //ハイライトスタイル