用jquery实现导航条动画显示效果
主要用到学到的jQuery动画显示隐藏效果功能
// hide 隐藏
// show 显示
// toggle 显示隐藏切换 效果为左右
// slideDown 向下显示
// slideUp 向上隐藏
// slideToggle 显示隐藏切换 效果为上下
用jQuery获取到元素 设置鼠标移进移出的函数
在函数内设置显示隐藏切换的效果。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin: 0;padding: 0;list-style: none;}
.wrap{
width: 1000px;
height: 60px;
background-color: #A9A9A9;
margin: 0 auto;
text-align: center;
}
#box1{
/*background-color: black;*/
}
#box1 li{
float: left;
width: 100px;
height: 60px;
line-height: 60px;
position: relative;
}
.box2{
display: none;
background-color: #A9A9A9;
position: absolute;
}
.box2 li{
/*float: none;*/
height: 30px;
line-height: 30px;
/*width: 100px;*/
}
#box1 li:hover{
background-color: lightseagreen;
}
</style>
</head>
<body>
<div class="wrap">
<ul id="box1">
<li>首页</li>
<li onmousedown="">新闻
<ul class="box2">
<li>新闻1</li>
<li>新闻2</li>
<li>新闻3</li>
<li>新闻4</li>
<li>新闻5</li>
</ul>
</li>
<li>产品
<ul class="box2">
<li>产品1</li>
<li>产品2</li>
<li>产品3</li>
<li>产品4</li>
<li>产品5</li>
</ul>
</li>
<li>关于</li>
</ul>
</div>
<script src="jquery-3.4.0.js"></script>
<script>
$("#box1 li").hover(function(){
$(this).children("ul").slideToggle(300);
// this.style.backgroundColor = 'lightseagreen';
},function () {
// this.style.backgroundColor = '';
$(this).children("ul").slideToggle(300);
});
// hide 隐藏
// show 显示
// toggle 显示隐藏切换 效果为左右
// slideDown 向下显示
// slideUp 向上隐藏
// slideToggle 显示隐藏切换 效果为上下
</script>
</body>
</html>