您的位置：首页 > Web前端 > JQuery

jQuery鼠标经过显示二级导航菜单(用less写的)

2018-01-29 16:50 615 查看

HTML代码，包含js

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/nav.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
<header class="nav-header">
<u
4000
l class="nav" id="nav">
<li>
<a href="javascript:void(0)">首页</a>
<ul class="nav-list">
<li><a href="javascript:void(0)">首页</a></li>
<li><a href="javascript:void(0)">首页</a></li>
<li><a href="javascript:void(0)">首页</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0)">导航一</a>
<ul class="nav-list">
<li><a href="javascript:void(0)">导航一</a></li>
<li><a href="javascript:void(0)">导航一</a></li>
<li><a href="javascript:void(0)">导航一</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0)">导航二</a>
<ul class="nav-list">
<li><a href="javascript:void(0)">导航二</a></li>
<li><a href="javascript:void(0)">导航二</a></li>
<li><a href="javascript:void(0)">导航二</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0)">导航三</a>
<ul class="nav-list">
<li><a href="javascript:void(0)">导航三</a></li>
<li><a href="javascript:void(0)">导航三</a></li>
<li><a href="javascript:void(0)">导航三</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0)">导航四</a>
<ul class="nav-list">
<li><a href="javascript:void(0)">导航四</a></li>
<li><a href="javascript:void(0)">导航四</a></li>
<li><a href="javascript:void(0)">导航四</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0)">导航五</a>
<ul class="nav-list">
<li><a href="javascript:void(0)">导航五</a></li>
<li><a href="javascript:void(0)">导航五</a></li>
<li>
<a href="javascript:void(0)">导航五</a>
</li>
</ul>
</li>
</ul>
</header>
<section>
<div class="instruction">
说明:练习一下导航怎么写，同时试着用less来写样式。
<br>需要更多信息请查看：<a href="http://blog.csdn.net/dongxingpeng">http://blog.csdn.net/dongxingpeng</a>
</div>
</section>
<script !src="">
$(function () {
$("#nav li").each(function () {
$(this).hover(function () {
$(this).find(".nav-list").addClass("show-list");
},function () {
$(this).find(".nav-list").removeClass("show-list");
})
})
})
</script>
</body>
</html>

less样式语言

@red :#000;
@white :#CA952D;
@li-width : 200px;
@fontSize: 20px;
html,body{
background: @red;
margin: 0;
padding: 0;
}
header{
width: 100%;
height: 30px;
color: @white;
.nav{
width: 1200px;
margin: 0 auto;
height: 30px;
text-align: center;
font-size: 16px;
}
.nav li{
float: left;
width: @li-width;
list-style-type: none;
line-height: 30px;
}
.nav li a,.nav-list li a{
text-decoration: none;
color: @white;
}
.nav-list {
position: relative;
display: none;
left: -40px;
z-index: 99;
width: 100px;
background: #00ff00;
}
.show-list{
display: block;
}
}
.instruction{
position: fixed;
top:50%;
left:30%;
clear: both;
color: @white;
font-size: @fontSize;
a{
color: @white;
text-decoration: none;
}
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航