CSS マルチレベルメニュー実装コード

これは、Web ページを Windows のスタートメニューなどのデスクトッププログラムのように見せる非常に優れた機能です。実装原理は純粋な CSS フォトアルバムと似ていますが、注意すべき点がさらにあります。順を追って説明しましょう。

まずは、ホバー効果のある非常にシンプルな第 1 レベルのメニューから始めましょう。

<ul id="メニュー">
  <li>
    <a href="//www.jb51.net/rubylouvre/">
      メニュー 1<!--小さい画像--><span><!--大きい画像--></span>
    </a>
  </li>
  <li>
    <a href="//www.jb51.net/rubylouvre/">
      メニュー 2<!--小さい画像--><span><!--大きい画像--></span>
    </a>
  </li>
  <li>
    <a href="//www.jb51.net/rubylouvre/">
      メニュー 3<!--小さい画像--><span><!--大きい画像--></span>
    </a>
  </li>
  <li class="last">
    <a href="//www.jb51.net/rubylouvre/">
      メニュー 4<!--小さい画像--><span><!--大きい画像--></span>
    </a>
  </li>
</ul>

構造は見覚えがあるでしょう？元々写真が配置されていた場所がテキストに置き換えられているだけです。私も特別にマークしました。次のプレゼンテーション層のコードは非常にシンプルです。

* {
  マージン:0;
  パディング:0;
}
.メニュー{
  フォントサイズ:12px;
}
.menu li{/*水平メニュー*/
  フロート:左;
  リストスタイル:なし;
}
.メニュー a {
  表示:ブロック;
  位置:相対;
  高さ:32px;
  幅:100ピクセル;
  行の高さ:32px;
  背景:#a9ea00;
  色:#ff8040;
  テキスト装飾:なし;
  テキスト配置:中央;
}
.menu a:hover {
  背景:#369;
  色:#fff;
}
.menu li span {
  表示:なし;
  位置:絶対;
  左:0;
  上:32px;
  幅:200px;
  高さ:150px;
  背景:#B9D6FF;
}
.menu a:hover スパン {
  表示:ブロック;
}

ここで注目すべき点が 2 つあります。まず最初のものについて話しましょう。サブメニュー (span 要素) の上部は、a 要素の範囲内に収まるようにする必要があります。包含ブロックが li 要素の場合も同様です。 span の上限値が 32px より大きい場合 (40px など)、マウスを span 要素に移動することはできません。 a:hover のスコープから外れるため、span 要素は再び非表示になります。

.menu li span {
  表示:なし;
  位置:絶対;
  左:0;
  top:40px;/*★★ここを修正★★*/
  幅:200px;
  高さ:150px;
  背景:#B9D6FF;
}

2 番目の問題は IE6 に特有のもので、対応する包含ブロックをマウスで移動した後もサブメニューが消えないというものです。 hover 疑似クラスは、moverover および moverout と同等です。マウスが上にあるときに子孫要素に 1 つのスタイルを割り当て、マウスが離れているときに別のスタイルを割り当てることができます。つまり、現在 IE6 では表示を切り替えることができません (img 要素を除く)。解決策は、表示ではなく可視性を使用することです。

さて、実際にセカンダリメニューを作成します。span に関連するすべての CSS を削除し、構造レイヤー内の元の span の位置を次のコードに置き換えます。

<ul>
  <li><a href="//www.jb51.net/rubylouvre/">セカンダリメニュー_11</a></li>
  <li><a href="//www.jb51.net/rubylouvre/">セカンダリメニュー_12</a></li>
</ul>

さまざまなブラウザをチェックしたところ、非常に弱いことがわかりました。 IE6 と Opera10 のセカンダリメニュー項目は垂直ですが、フローティングをクリアしていませんか? firefox3.5、chrome、safari4のセカンダリメニュー項目は水平に分散されていますが、上部に追加のメニュー項目があるようです...今回はIE8の学生が最高のパフォーマンスを発揮しました。 IE7 をインストールしていないので、常に無視します。

セカンダリメニュー項目が垂直に表示されるように、包含ブロックを li 要素に変更するなど、スタイルをリセットしましょう。

* {
  マージン:0;
  パディング:0;
}
.メニュー{
  フォントサイズ:12px;
}
.menu li{/*水平メニュー*/
  フロート:左;
  リストスタイル:なし;
  position:relative;/*包含ブロックをli要素に移動する*/
}
.メニュー a {
  表示:ブロック;
  /*position:relative; a要素に見つかり、
  標準ブラウザではひどいです。
  Chrome で Pure CSS Album 3 の最初の実行ボックスと同じバグに遭遇しました*/
  高さ:32px;
  幅:100ピクセル;
  行の高さ:32px;
  背景:#a9ea00;
  色:#ff8040;
  テキスト装飾:なし;
  テキスト配置:中央;
}
.menu a:hover {
  背景:#369;
  色:#fff;
}
/*新しく追加されたセカンダリメニューセクション*/
.menu ul ul {
  visibility:hidden;/*最初は非表示*/
  位置:絶対;
  左:0px;
  上:32px;
}
.menu ul a:hover ul{
  可視性: 表示可能;
}
.menu ul ul li {
  clear:both;/*垂直表示*/
  テキスト配置:左;
}

Firefox、Safari、Chrome ではセカンダリメニューが応答せず、ポップアップも表示されないことがわかりました (これら 3 つのブラウザーの CSS 部分は互いに大幅にコピーされていました)。 Opera10 のパフォーマンスが最も優れており、IE8 がそれに続きました。ただし、href を持つ a 要素を必要とする IE6 とは異なり、標準ブラウザのすべての要素は hover 疑似クラスをサポートしています。いくつかの CSS コードを書き直します。

.menu ul li:hover ul,/*IE6以外*/
.menu ul a:hover ul{/*IE6*/
  可視性: 表示可能;
}

セカンダリメニューがポップアップしますが、謎の li 要素も表示されます。ダブルフローティングやシュリンクラップも試してみましたが、謎のli要素を取り除くことができませんでした。外部コードを参照すると、サブメニュー全体を a 要素の外側に配置し、li:hover を使用してスタイルの切り替えを制御する方法が示されます。したがって、構造レイヤーは次のように書き換えられます。

<div class="メニュー">
  <ul>
    <li>
      <a href="//www.jb51.net/rubylouvre/">メニュー 1</a>
      <ul>
        <li><a href="//www.jb51.net/rubylouvre/">セカンダリメニュー_11</a></li>
        <li><a href="//www.jb51.net/rubylouvre/">セカンダリメニュー_12</a></li>
      </ul>
    </li>
    <li>
      <a href="//www.jb51.net/rubylouvre/">メニュー 2</a>
      <ul>
        <li><a href="//www.jb51.net/rubylouvre/">セカンダリメニュー_21</a></li>
        <li><a href="//www.jb51.net/rubylouvre/">セカンダリメニュー_22</a></li>
      </ul>
    </li>
    <li>
    //***************わずかに************
    </li>
    <li>
    //***************わずかに************
    </li>
  </ul>
</div>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<: MySQLの通常インデックスとユニークインデックスの違いの詳しい説明

>>: Zabbix を使用して Oracle データベースを監視する方法の詳細な説明