网站导航栏如何实现动态效果
2018-07-23 17:35
513 查看
导航栏是每一个网站都要有的,那么对于一般的导航栏制作,相信大家都会,而且也不会遇到什么麻烦,但是如何才能让网站导航栏实现动态效果估计这会难倒很多技术人员,那么下面就来为大家分析解答一下。
<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 src="jquery.min.js"></script>
<script src="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。即可解决。如果大家还存在有疑问的地方可以留言,我们可以共同学习进步。
本文由专业的郑州app开发公司燚轩科技整理发布,原创内容不易,如需转载,请注明出处!
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 src="jquery.min.js"></script>
<script src="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。即可解决。如果大家还存在有疑问的地方可以留言,我们可以共同学习进步。
本文由专业的郑州app开发公司燚轩科技整理发布,原创内容不易,如需转载,请注明出处!
相关文章推荐
- 网站顶部的固定淡出菜单 --- 可以实现新浪微博顶部导航菜单一样的效果
- 如何实现网站内容页的移动菜单效果?
- 如何用Python,C#等语言去实现抓取静态网页+抓取动态网页+模拟登陆网站
- jquery实现网站导航动画滑动效果
- 如何用Python,C#等语言去实现抓取静态网页+抓取动态网页+模拟登陆网站
- 如何实现像商城网站上的商业行业分类的效果
- php 网站添加视频,如何实现这种效果,自己开发,还是找视频插件商买
- jQuery ui实现动感的圆角渐变网站导航菜单效果代码
- 如何在Fragment中使用ViewPager,并实现导航随手势滑动效果
- JavaScript实现导航动态效果实践
- jQuery实现Meizu魅族官方网站的导航菜单效果
- 如何用Python去实现抓取静态网页+抓取动态网页+模拟登陆网站
- JS+CSS实现电子商务网站导航模板效果代码
- CSS技术结合图像实现动态效果的菜单导航
- jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
- PageAdmin使如何实现网站顶部效果。
- jQuery实现的背景动态变化导航菜单效果
- ASP.NET轻松实现网站动态新闻效果
- 微软BI 之SSRS 系列 - 如何实现报表导航 Navigation 和钻取 Drill Down 的效果