您的位置：首页 > Web前端 > JQuery

中英文切换导航

2016-09-21 20:13 218 查看

总结学到的一些新的特效使用css3 及jquery两种方法实现中英文切换导航。

css3版：

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>中英文切换导航条</title>
<style>
*{
padding: 0;
margin: 0;
}
li{list-style: none;}
a{
text-decoration: none;
}
.nav{
width: 100%;
height: 40px;
background: #222;
margin-top: 100px;
overflow: hidden;
}
.list{
width: 1000px;
height: 40px;
margin: 0 auto;
}
.list li{float: left;}
.list li a{display: block;transition:.3s;}
.list b,.list i{
display: block;
padding: 0 30px;
color: #aaa;
line-height: 40px;
text-align: center;
}
.list b{
font-weight: normal;
}
.list i{
font-style: normal;
background: #333;
color: #fff;
}
.list a:hover{
margin-top: -40px;
}
</style>
</head>

<body>
<div class="nav">
<ul class="list">
<li>
<a href="javascript:(void);">
<b>Index</b>
<i>首页</i>
</a>
</li>
<li>
<a href="#">
<b>course</b>
<i>职业课程</i>
</a>
</li>

<li>
<a href="#">
<b>study</b>
<i>就业学习</i>
</a>
</li>

<li>
<a href="#">
<b>BBS</b>
<i>极客社区</i>
</a>
</li>

<li>
<a href="#">
<b>JiKe+</b>
<i>极客+</i>
</a>
</li>
</ul>
</div>
</body>

</html>

原理是通过改变a标签的margin-top值，来切换显示。使用css3 transition属性。

jquery版：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq中英文切换滚动条</title>
<style>
*{padding: 0;margin: 0;}
.nav{width: 100%;height: 40px;background: #222; margin-top: 100px;overflow: hidden;}
.list{width: 1000px;margin: 0 auto;height: 40px;}
li{
list-style: none;
}
a{
text-decoration: none;
}
.list li{
float: left;
}
.list li b,.list li i{
display: block;
line-height: 40px;
color: #aaa;
text-align: center;
padding: 0 30px;
}
.list  li a{
display: block;
}
.list b{
font-weight: 100;
}
.list i{
font-style: normal;
background: #333;
color: #fff;
}
</style>
</head>
<body>
<div class="nav">
<ul class="list">
<li>
<a href="javascript:(void);">
<b>Index</b>
<i>首页</i>
</a>
</li>
<li>
<a href="#">
<b>course</b>
<i>职业课程</i>
</a>
</li>

<li>
<a href="#">
<b>study</b>
<i>就业学习</i>
</a>
</li>

ac56
<li>
<a href="#">
<b>BBS</b>
<i>极客社区</i>
</a>
</li>

<li>
<a href="#">
<b>JiKe+</b>
<i>极客+</i>
</a>
</li>
</ul>
</div>
<script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(".list li a").hover(function(){
$(this).stop().animate({'margin-top':-40},300);
},function(){
$(this).stop().animate({'margin-top':0},300);
});
</script>
</body>
</html>

原理相同，只不过通过jquery改变，兼容性更好。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery css3 导航中英文切换

相关文章推荐

新的分享

章节导航