CSS多段メニューのサンプルコード説明

この記事の内容は CSS のマルチレベルメニューのサンプルコードの説明です。必要な方は参考にしていただければ幸いです。

これは、Web ページをウィンドウのスタート メニューなどのデスクトップ プログラムのように見せる、非常に優れた機能です。実装原理は基本的に純粋な CSS フォト アルバムと同じですが、注意すべき点がさらにあるので、段階的に実行してみましょう。

非常に単純な第 1 レベルのメニューとホバー効果から始めましょう。

<ul id="menu">
  <li>
    <a href="http://www.php.cn/">
      菜单一<!--小图--><span><!--大图--></span>
    </a>
  </li>
  <li>
    <a href="http://www.php.cn/">
      菜单二<!--小图--><span><!--大图--></span>
    </a>
  </li>
  <li>
    <a href="http://www.php.cn/">
      菜单三<!--小图--><span><!--大图--></span>
    </a>
  </li>
  <li class="last">
    <a href="http://www.php.cn/">
      菜单四<!--小图--><span><!--大图--></span>
    </a>
  </li>
</ul>

この構造は非常によく知られており、画像の元の場所をテキストに置き換えるだけです。こちらも特別にマークしておきました。次のプレゼンテーション層のコードは非常に単純です。

* {
  margin:0;
  padding:0;
}
.menu {
  font-size:12px;
}
.menu li {/*水平菜单*/
  float:left;
  list-style:none;
}
.menu a {
  display:block;
  position:relative;
  height:32px;
  width:100px;
  line-height:32px;
  background:#a9ea00;
  color:#ff8040;
  text-decoration:none;
  text-align:center;
}
.menu a:hover {
  background:#369;
  color:#fff;
}
.menu li span {
  display:none;
  position:absolute;
  left:0;
  top:32px;
  width:200px;
  height:150px;
  background:#B9D6FF;
}
.menu a:hover span {
  display:block;
}

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

.menu li span {
  display:none;
  position:absolute;
  left:0;
  top:40px;/*★★修改这里★★*/
  width:200px;
  height:150px;
  background:#B9D6FF;
}

2 番目の問題は、IE6 に固有の問題です。つまり、対応する包含ブロックをマウスアウトしてもサブメニューが消えません。 hover 擬似クラスは、moverover および moveout と同等です。マウスオーバー時に 1 つのスタイルをその子孫要素に割り当て、マウスアウト時に別のスタイルを割り当てることができます。つまり、IE6では表示の切り替えができません（img要素を除く）。解決策は、表示の代わりに可視性を使用することです。

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

<ul>
  <li><a href="http://www.php.cn/">二级菜单_11</a></li>
  <li><a href="http://www.php.cn/">二级菜单_12</a></li>
</ul>

各ツアーでデバイスを見ていると、とても弱っているように感じます。 IE6やOpera10の二次メニュー項目は縦長になっていますが、フロートをクリアできていないのでしょうか？ firefox3.5、chrome、safari4の二次メニュー項目は水平方向に分散されていますが、上に追加のメニュー項目があるようです... 今回はIE8の生徒が最もパフォーマンスが良かったです。私はIE7をインストールしていないので、いつも無視しています。

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

* {
  margin:0;
  padding:0;
}
.menu {
  font-size:12px;
}
.menu li {/*水平菜单*/
  float:left;
  list-style:none;
  position:relative;/*把包含块移动li元素*/
}
.menu a {
  display:block;
  /*position:relative;发现放在a元素中，
  在标准游览器中惨不忍睹，
  和纯CSS相册3的第一个运行框在chrome中遇到的bug一样*/
  height:32px;
  width:100px;
  line-height:32px;
  background:#a9ea00;
  color:#ff8040;
  text-decoration:none;
  text-align:center;
}
.menu a:hover {
  background:#369;
  color:#fff;
}
/*新增的二级菜单部分*/
.menu ul ul {
  visibility:hidden;/*开始时是隐藏的*/
  position:absolute;
  left:0px;
  top:32px;
}
.menu ul a:hover ul{
  visibility:visible;
}
.menu ul ul li {
  clear:both;/*垂直显示*/
  text-align:left;
}

Firefox、Safari、Chrome ではセカンダリ メニューが応答せず、ポップアップできないことがわかりました (これら 3 つのブラウザの CSS 部分は互いに深刻に盗用されています)。 opera10 のパフォーマンスが最も高く、次に IE8 が続きました。ただし、IE6 とは異なり、標準ブラウザのすべての要素は hover 疑似クラスをサポートします。IE6 では、href を含む a 要素が必要です。 CSS コードの一部を書き換えます。

.menu ul li:hover ul,/*非IE6*/
.menu ul a:hover ul{/*IE6*/
  visibility:visible;
}

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

<div class="menu">
  <ul>
    <li>
      <a href="http://www.php.cn/">菜单一 </a>
      <ul>
        <li><a href="http://www.php.cn/">二级菜单_11</a></li>
        <li><a href="http://www.php.cn/">二级菜单_12</a></li>
      </ul>
    </li>
    <li>
      <a href="http://www.php.cn/">菜单二</a>
      <ul>
        <li><a href="http://www.php.cn/">二级菜单_21</a></li>
        <li><a href="http://www.php.cn/">二级菜单_22</a></li>
      </ul>
    </li>
    <li>
    //***************略************
    </li>
    <li>
    //***************略************
    </li>
  </ul>
</div>

以上がCSS多段メニューのサンプルコード説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。