您的位置：首页 > 其它

简单通用的导航条

2016-07-07 17:57 169 查看
1、下划线效果



<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标悬停下划线效果</title>
<style>
*{ margin:0; padding:0; list-style:none;}
.header{ width:100%; background:;}
.nav{ width:1000px; margin:0 auto; overflow:hidden;}
.nav ul li{ height:40px; line-height:40px; float:left; padding:10px 5px; margin:0px 5px;position:relative;}
.nav ul li a{ color:#666; font-family:'Microsoft Yahei'; font-size:14px; text-decoration:none;}
.nav ul li a:hover{ color:#000; text-decoration:none;}
.nav ul li span{ display:block; position:absolute; width:0px; height:0px; background:#F5F5F5; top:58px; left:50%;}
</style>
</head>
<body>

<div class="header">
<div class="nav">
<ul>
<li><a href='#'>首页</a><span></span></li>
<li><a href='#'>Python</a><span></span></li>
<li><a href='#'>Java</a><span></span></li>
<li><a href='#'>Hadoop</a><span></span></li>
<li><a href='#'>JavaScript</a><span></span></li>
<li><a href='#'>文学</a><span></span></li>
</ul>
</div>
</div>
<script src="http://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('.nav li').hover(function(){
$('span',this).stop().css('height','2px');
$('span',this).animate({
left:'0',
width:'100%',
right:'0'
},200);
},function(){
$('span',this).stop().animate({
left:'50%',
width:'0'
},200);
});
});
</script>
</body>
</html>


2、滑块效果



<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>简单导航条</title>
<style type="text/css">
ul#nav li{list-style:none}
ul#nav li a{color:#000000;text-decoration:none}
ul#nav li a:hover{}
ul#nav{ width:100%; height:40px; background:#fff;margin:0 auto;text-align:center}
ul#nav li{display:inline; height:40px}
ul#nav li a{display:inline-block; padding:0 20px; height:40px; line-height:40px;
color:#000; font-family:"\5FAE\8F6F\96C5\9ED1"; font-size:16px}
ul#nav li a:hover{background:#F5F5F5}
</style>
</head>
<body>
<ul id="nav">
<li><a href="">首页</a></li>
<li><a href="">Python</a></li>
<li><a href="">Java</a></li>
<li><a href="">Hadoop</a></li>
<li><a href="">JavaScript</a></li>
<li><a href="">Android</a></li>
<li><a href="">文学</a></li>
</ul>
</body>
</html>


学之，以记之。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航