• 不断学习才有回报,学无止境!

一个不错的导航栏特效

DIV+CSS技巧发现 箭翎 792次浏览 0个评论 扫描二维码

demo:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dom</title>
<style>
.nav {
height: 30px;
width: 400px;
/*border: 1px solid #009966;*/
padding: 0;
margin: 0px;
padding-left: 10px;
/*border-bottom: 2px solid #009966;*/
}

.nav li {
display: inline-block;
list-style-type: none;
padding: 0;
/*border: 1px solid #ddd;
margin-right: -7px;*/
}

.nav li a {
display: block;
float:left;
height: 30px;
line-height: 30px;
color: #1100ff;
border-radius: 3px;
background: #eee;
padding: 2px 5px;
font-size: 14px;
font-weight: bold;
font-family: 'Microsoft Yahei';
min-width: 60px;
text-align: center;
transition: all .8s;
text-decoration: none;
}

.nav li a:hover{
background: #eea236;
box-shadow: 1px 1px 10px #111;
}

.nav li .arrow {
float: left;
width: 0;
height: 0;
border:6px solid transparent;
border-top: 6px solid #0077fa;
margin-top: 15px;
display: none;
margin-left: 4px;
transform-origin:center 1px;
transition: all .3s;
}

.nav li:hover .arrow {
transform:rotate(180deg);
}

.nav li.active .arrow{
display: block;
}

.nav li.active a {
background: #5bc0de;
}
</style>

<script>
(function(win){
window.onload = function() {
var navObj = document.getElementById("nav");
var items = navObj.getElementsByTagName("li");
for (var i = 0; i < items.length; i++){
(function(){
var item = items[i];
item.onclick = function() {
for (var j = 0; j < items.length; j++){
(function() {
if(item !== items[j] && items[j].className){
items[j].className = "";
}
})(j);
}
item.className = "active";
}
})(i);
}
}
})(window);
</script>
</head>
<body>
<ul class="nav" id="nav">
<li class="active">
<a href="#">
CSS3
</a>
<div class="arrow"></div>
</li>
<li>
<a href="#">Javascript</a>
<div class="arrow"></div>
</li>
<li>
<a href="#">HTML5</a>
<div class="arrow"></div>
</li>
</ul>
</body>
</html>

箭翎 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明一个不错的导航栏特效
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址