jQuery 实现水平菜单下拉功能
2019-03-10 本文已影响47人
CondorHero
横向菜单栏下拉菜单.gif
实现思路
- 写一个横向导航条
- 在导航条的每个块里面添加下拉文本
- 下拉内容
display:none; -
slideDown/slideUp实现下拉功能
直接上源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dropdown menu</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
color: #f9f9f9;
}
.nav {
margin: 100px auto;
height: 43px;
background-color: #7995cc;
}
.inner {
width: 1030px;
margin: 0 auto;
}
.nav .inner ul {
list-style: none;
}
.nav .inner ul li {
float: left;
height: 43px;
width: 116px;
text-align: center;
line-height: 43px;
position: relative;
}
.nav .inner ul li.first {
width: 86px;
}
.nav .inner ul li>a {
font-size: 15px;
text-decoration: none;
color: #fff;
}
.nav .inner ul li>a:hover {
color: #333;
}
.nav .inner ul li .dropdown {
display: none;
background-color: #858aab;
position: absolute;
top: 55px;
left: 0;
width: 116px;
}
.nav .inner ul li .dropdown a {
font-size: 12px;
text-decoration: none;
color: #fff;
display:block;
}
.nav .inner ul li .dropdown a:hover {
background-color: blue;
}
.box {
height: 12px;
}
</style>
</head>
<body>
<div class="nav">
<div class="inner">
<ul>
<li class = 'first'><a href="">首页</a></li>
<li>
<a href="">学校概况</a>
<div class="box"></div>
<div class="dropdown">
<p><a href="">学校简介</a></p>
<p><a href="">概况一览</a></p>
<p><a href="">学校历史</a></p>
<p><a href="">历任领导</a></p>
<p><a href="">现任领导</a></p>
<p><a href="">校长寄语</a></p>
<p><a href="">学校标志</a></p>
<p><a href="">老照片</a></p>
<p><a href="">校园导游</a></p>
<p><a href="">校园地图</a></p>
</div>
</li>
<li>
<a href="">国际合作</a>
<div class="box"></div>
<div class="dropdown">
<p><a href="">交流概况</a></p>
<p><a href="">国际合作</a></p>
<p><a href="">国际学生</a></p>
</div>
</li>
<li><a href="">院系部门</a></li>
<li><a href="">科学研究</a></li>
<li><a href="">教师队伍</a></li>
<li><a href="">人才培养</a></li>
<li><a href="">人才招聘</a></li>
<li><a href="">招生就业</a></li>
</ul>
</div>
</div>
<script src="js/jquery-1.12.3.min.js"></script>
<script>
$("li").mouseenter(function(){
if($(this).children(".dropdown").is(":animated")){
return;
}
$(this).children(".dropdown").slideDown();
});
$("li").mouseleave(function(){
$(".dropdown").slideUp();
});
</script>
</body>
</html>
需要注意的几点：
- 下拉菜单和导航条之间有间隔。
dropdown绝对定位。 - 因为导航条和下拉菜单之间有空隙。当鼠标移动去下拉菜单，下拉菜单已经消失。解决办法,中间加个盒子，实现过度。
