ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSで二次メニュー効果を実現するにはどうすればよいですか?水平メニューと垂直メニューの実装 (コード例)
CSSで二次メニュー効果を実現するにはどうすればよいですか?水平メニューと垂直メニューの実装 (コード例)
- 青灯夜游オリジナル
- 2018-09-12 16:07:5916780ブラウズ
この章では、CSS を使用して二次メニュー効果を実現する方法を紹介します。水平メニューと垂直メニューの実装 (コード例)。 HTML + CSS コードを使用して 2 つの異なるセカンダリ メニュー効果を作成する方法は、必要な場合に参考にしていただければ幸いです。
1. CSS は水平のセカンダリ メニュー スタイルを実装します
CSS は水平のセカンダリ メニュー コードを実装します:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>二级菜单--水平</title>
<style>
*{margin: 0;padding: 0;}
.demo{background: red;width: 100%;height: 35px;}
nav{height: 35px;width: 1000px;margin: 0 auto;}
nav ul li{list-style-type:none;float: left}
nav ul li a{ text-decoration: none;display: block;width: 130px;line-height: 35px;text-align: center;color:white;font-fimily:微软雅黑;}
nav ul li ul li{float: none}
nav ul li ul li a{color:black}
nav ul li ul{display: none;}
nav ul li:hover ul{display: block;}
</style>
</head>
<body>
<div class="demo">
<nav>
<ul>
<li><a href="#">菜单1</a>
<ul>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单1</a></li>
</ul>
</li>
<li><a href="#">菜单2</a>
<ul>
<li><a href="#">菜单2</a></li>
<li><a href="#">菜单2</a></li>
<li><a href="#">菜单2</a></li>
</ul>
</li>
<li><a href="#">菜单3</a>
<ul>
<li><a href="#">菜单3</a></li>
<li><a href="#">菜单3</a></li>
<li><a href="#">菜单3</a></li>
<li><a href="#">菜单3</a></li>
</ul>
</li>
<li><a href="#">菜单4</a>
<ul>
<li><a href="#">菜单4</a></li>
<li><a href="#">菜单4</a></li>
<li><a href="#">菜单4</a></li>
</ul>
</li>
<li><a href="#">菜单5</a>
<ul>
<li><a href="#">菜单5</a></li>
<li><a href="#">菜单5</a></li>
<li><a href="#">菜单5</a></li>
<li><a href="#">菜单5</a></li>
<li><a href="#">菜单5</a></li>
</ul>
</li>
<li><a href="#">菜单6</a>
<ul>
<li><a href="#">菜单6</a></li>
<li><a href="#">菜单6</a></li>
<li><a href="#">菜单6</a></li>
<li><a href="#">菜单6</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</body>
</html>レンダリング:
マウスは上に移動しません:
Mouse Move to menu 1 :
 "153672915757434CSSで二次メニュー効果を実現するにはどうすればよいですか?水平メニューと垂直メニューの実装 (コード例)")
上記の例からわかるように、CSS の display 属性を使用して、2 番目のドロップダウン メニューを表示するかどうかを制御します。 1階層目のメニューのliタグにマウスを移動すると、2階層目のメニューのulタグが表示されます。
コアコード:
list-style-type:none - ドットを削除します。
float: 最初のレベルのメニューが水平に表示されるように、左に left-float します。
:hover - マウス ポインターが浮いている要素を選択するために使用されます。
display:none - 二次メニューを非表示にします。
display:block - リンクをブロック要素として表示すると、リンク領域全体 (テキストだけでなく) をクリック可能になり、幅を指定することもできます。
最初に第 2 レベルのメニューを非表示にすると、第 1 レベルのメニューの li タグにマウスが移動すると、第 2 レベルのメニューの ul タグが表示されます。
2. 垂直セカンダリメニュースタイルを実装するCSS
垂直セカンダリメニューコードを実装するCSS:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>二级菜单--垂直</title>
<style type="text/css">
body { font-family: Verdana; font-size: 12px; line-height: 1.5; }
img { border-style: none; }
a { color: #000; text-decoration: none; }
a:hover { color: #F00; }
#menu { width: 200px; border: 1px solid #CCC; border-bottom:none;margin:50px auto;text-align: center;}
#menu ul { list-style: none; margin: 0px; padding: 0px; }
#menu ul li { background: #289CFF;color: #fff; padding: 0px 10px; height: 26px; line-height: 26px; border-bottom: 1px solid #CCC; position:relative; }
#menu ul li ul { display:none; position: absolute; left: 200px; top: 0px; width:100px; border:1px solid #ccc; border-bottom:none; }
#menu ul li ul li{background-color: #21B4BB}
#menu ul li:hover{background-color: #21B4BB}
#menu ul li:hover ul { display:block;}
</style>
</head>
<body>
<div id="menu">
<ul>
<li>
<a href="">菜单1</a>
<ul>
<li>
<a href="#">菜单1</a>
</li>
</ul>
</li>
<li>
<a href="#">菜单2</a>
<ul>
<li>
<a href="#">菜单2</a>
</li>
<li>
<a href="#">菜单2</a>
</li>
</ul>
</li>
<li>
<a href="#">菜单3</a>
<ul>
<li>
<a href="#">菜单3</a>
</li>
<li>
<a href="#">菜单3</a>
</li>
<li>
<a href="#">菜单3</a>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>レンダリング:
マウスは上に移動しません:
マウスはメニューに移動します2 上:
上の例からわかるように、CSS の表示属性は、2 番目のドロップダウン メニューを表示するかどうかを制御するためにも使用されます。 1階層目のメニューのliタグにマウスを移動すると、2階層目のメニューのulタグが表示されます。
コアコード:
list-style-type:none - ドットを削除します。
:hover - マウス ポインターが浮いている要素を選択するために使用されます。
display:none - 二次メニューを非表示にします。
display:block - リンクをブロック要素として表示すると、リンク領域全体 (テキストだけでなく) をクリック可能になり、幅を指定することもできます。
position :relative/absolute -- プライマリ メニューの隣にセカンダリ メニューを表示する位置。
最初に第 2 レベルのメニューを非表示にすると、第 1 レベルのメニューの li タグにマウスが移動すると、第 2 レベルのメニューの ul タグが表示されます。
以上がCSSで二次メニュー効果を実現するにはどうすればよいですか?水平メニューと垂直メニューの実装 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。