ホームページ > 記事 > ウェブフロントエンド > 3 レベルの menu_jquery を実装するための jQuery コード
3 レベルの menu_jquery を実装するための jQuery コード
- WBOYオリジナル
- 2016-05-16 09:00:281745ブラウズ
先週、私は新しい web サイト構築の仕事を引き継ぎました。それには、3 レベルのメニューを実装するために jquery コードが必要でした。実際、それはまったく難しいことではありません。参考のためにエディターがコードを共有します。
最初にレンダリングをお見せします。気に入ったら実装コードを参照してください。
html コード:
<body> <div class="navmenu"> <ul> <li><a href="#">首页</a> <ul> <li><a href="#">javascript+</a> <ul> <li><a href="#">三角函数</a></li> <li><a href="#">矩形</a></li> </ul> </li> <li><a href="#">语文</a> <ul> <li><a href="#">唐诗</a></li> <li><a href="#">宋词</a></li> </ul> </li> <li><a href="#">英语</a></li> </ul> </li> <li><a href="#">课程大厅</a></li> <li><a href="#">学习中心+</a> <ul> <li><a href="#">javascript+</a> <ul> <li><a href="#">三角函数</a></li> <li><a href="#">矩形</a></li> </ul> </li> <li><a href="#">语文</a> <ul> <li><a href="#">三角函数</a></li> <li><a href="#">矩形</a></li> </ul> </li> <li><a href="#">英语</a></li> </ul> </li> <li><a href="#">帮助</a></li> </ul> </div> </body>
js コード:
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script type="text/javascript">
$(function(){
$("li").has("ul").mouseover(function(){
$(this).children("ul").css("display","block");
$(this).css("backgroundcolor","#0066ff");
}).mouseout(function () {
$(this).children("ul").css("display","none");
$(this).css("backgroundcolor","#eee");
})
})
</script>
css コード:
*{
padding:0;
margin:0;
}
/*一级菜单*/
.navMenu {
width:570px;
margin:0 auto;
}
.navMenu ul li{
float: left;
position: relative;
}
li{
list-style: none;
background-color: #eee;
width: 140px;
height: 40px;
text-align: center;
margin-right: 2px;
margin-bottom: 2px;
}
ul li a{
line-height: 40px;
text-align: center;
font-size: 20px;
color: #000;
text-decoration: none;
display: block;
padding:0 10px;
}
/*二级菜单*/
.navMenu ul li ul {
display: none;
position:absolute;
left: 0;
top:0;
margin-top:42px;
}
.navMenu ul li ul li{
float:none;
}
/*三级菜单*/
.navMenu ul li ul li ul{
display: none;
left:140px;
top:-42px;
}
上記の内容は、エディターが紹介した3階層メニューを実装するためのjqueryコードです。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。