网站导航栏如何实现动态效果
导航栏是每一个网站都要有的，那么对于一般的导航栏制作，相信大家都会，而且也不会遇到什么麻烦，但是如何才能让网站导航栏实现动态效果估计这会难倒很多技术人员，那么下面就来为大家分析解答一下。
Html代码：
<html>
<head>
<title>导航演示</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="nav.css">
</head>
<body>
<div class="nav">
<a href="">栏目1</a>
<a href="">栏目2</a>
<a href="">栏目3</a>
<a href="">栏目4</a>
<a href="">栏目5</a>
<a href="">栏目6</a>
</div>
</body>
</html>
CSS代码：（nav.css）
.nav {
width: 1200px;
height: 40px;
margin: 0 auto;
display: flex;
align-items: center;
z-index: 9;
}
.nav > a {
height: 40px;
display: flex;
justify-content: center;
align-items: center;
color: #333;
padding: 0 20px;
font-size: 16px;
text-decoration:none;
}
接下来进入正题
第一步：引入jquery.min.js
第二部：添加js代码（nav.js）
$(function(){
$(".nav>a").each(function(){
$(this).mouseover(function(){
$(this).css({"color":"red","border-bottom":"2px solid red"})
}).mouseout(function(){
$(this).css({"color":"#333","border-bottom":"2px solid white"})
})
})
})
function中的第一行.nav>a是根据css选择器写出来的
each会选择特定的符合条件的标签
进行以上两步骤操作以后，最终html代码如下：（index.html）
<html>
<head>
<title>导航演示</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="nav.css">
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery.min.js"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="nav.js"></script>
</head>
<body>
<div class="nav">
<a href="">栏目1</a>
<a href="">栏目2</a>
<a href="">栏目3</a>
<a href="">栏目4</a>
<a href="">栏目5</a>
<a href="">栏目6</a>
</div>
</body>
</html>
把index.html ， jquery.min.js ，nav.js ，nav.css四个文件放到同一个目录下，运行index.html再试试看，有没有效果，是不是很棒!
这里还需要跟大家说的是，单独演示不会出现问题，但是如果放在网页中，在出现动效的同时会有轻微的位置偏移，这是因为border-bottom出现和消失导致的，解决方法就是在.nav>a样式表中再添加一行border-bottom: 2px solid white。即可解决。如果大家还存在有疑问的地方可以留言，我们可以共同学习进步。
共同学习，写下你的评论
评论加载中...
作者其他优质文章
