この記事の内容は CSS のマルチレベルメニューのサンプルコードの説明です。必要な方は参考にしていただければ幸いです。
これは、Web ページをウィンドウのスタート メニューなどのデスクトップ プログラムのように見せる、非常に優れた機能です。実装原理は基本的に純粋な CSS フォト アルバムと同じですが、注意すべき点がさらにあるので、段階的に実行してみましょう。
非常に単純な第 1 レベルのメニューとホバー効果から始めましょう。
<ul id="menu"> <li> <a href="//m.sbmmt.com/"> 菜单一<!--小图--><span><!--大图--></span> </a> </li> <li> <a href="//m.sbmmt.com/"> 菜单二<!--小图--><span><!--大图--></span> </a> </li> <li> <a href="//m.sbmmt.com/"> 菜单三<!--小图--><span><!--大图--></span> </a> </li> <li class="last"> <a href="//m.sbmmt.com/"> 菜单四<!--小图--><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="//m.sbmmt.com/">二级菜单_11</a></li> <li><a href="//m.sbmmt.com/">二级菜单_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="//m.sbmmt.com/">菜单一 </a> <ul> <li><a href="//m.sbmmt.com/">二级菜单_11</a></li> <li><a href="//m.sbmmt.com/">二级菜单_12</a></li> </ul> </li> <li> <a href="//m.sbmmt.com/">菜单二</a> <ul> <li><a href="//m.sbmmt.com/">二级菜单_21</a></li> <li><a href="//m.sbmmt.com/">二级菜单_22</a></li> </ul> </li> <li> //***************略************ </li> <li> //***************略************ </li> </ul> </div>
以上がCSS多段メニューのサンプルコード説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
