php中文网首页导航
茄子2019-01-27 21:29:42270<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>浮动--导航</title>
<link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
integrity = "sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin = "anonymous">
<style>
* {
margin: 0;
padding: 0;
}
#top-nav {
background: #333;
overflow: hidden;
}
#top-nav li {
list-style: none;
width: 96px;
height: 60px;
line-height: 60px;
text-align: center;
float: left;
cursor: pointer;
}
#top-nav li a {
font-size: 14px;
color: #CCC;
text-decoration: none;
}
#logo {
margin-right: 100px;
}
#logo img {
width: 140px;
height: 60px;
}
.active {
background: #555;
}
#top-nav #msg {
width: 120px;
float: right;
margin-right: 20px;
}
#top-nav #msg a {
display: inline-block;
width: 60px;
height: 60px;
float: left;
}
#top-nav #msg img {
width: 30px;
height: 30px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
/*当图片img有line-height时，需要设置垂直对齐vertical-align*/
vertical-align: top;
position: relative;
top: 15px;
}
.glyphicon {
font-size: 20px;
vertical-align: top;
position: relative;
top: 20px;
}
#msg-icon:hover {
background: #555;
}
.line {
width: 96px;
height: 5px;
background: forestgreen;
position: relative;
top: 55px;
left: 196px;
display: none;
}
</style>
</head>
<body>
<ul id = "top-nav">
<li id = "logo"><a href = ""><img src = "http://www.php.cn/static/images/logo.png" alt = ""></a></li>
<li class = "active item" name = "0"><a href = "">首页</a></li>
<li class = "item" name = "1"><a href = "">视频教程</a></li>
<li class = "item" name = "2"><a href = "">社区问答</a></li>
<li class = "item" name = "3"><a href = "">编程词典</a></li>
<li class = "item" name = "4"><a href = "">手册下载</a></li>
<li class = "item" name = "5"><a href = "">工具下载</a></li>
<li class = "item" name = "6"><a href = "">类库下载</a></li>
<li class = "item" name = "7"><a href = "">特色教程</a></li>
<li class = "item" name = "8"><a href = "">菜鸟学堂</a></li>
<li id = "msg">
<a href = "" id = "msg-icon"><span class = "glyphicon glyphicon-volume-up" aria-hidden = "true"></span></a>
<a href = ""><img src = "http://img.php.cn/upload/avatar/000/369/589/5c403927cc95b343.jpg"></a>
</li>
<p class = "line"></p>
</ul>
</body>
<script src = "https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function () {
$('.item').hover(function () {
var len = 196 + $(this).attr('name') * 96 + 'px';
$('.line').show().stop().animate({
'left': len
});
$(this).find('a').css('color', '#EEE');
}, function () {
$('.line').stop().hide();
$(this).find('a').css('color', '#CCC');
});
});
</script>
</html>