摘要：<!DOCTYPE html> <html lang = "en"> <head> <meta charset = "UTF-8"> <ti
<!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">
<style>
* {
margin: 0;
padding: 0;
}
.clear {
clear: both;
}
#top-nav {
background: #333;
}
#top-nav > li {
list-style: none;
width: 96px;
height: 60px;
line-height: 60px;
text-align: center;
float: left;
cursor: pointer;
}
/*边框线的小绿条*/
.bottom-line {
border-bottom: 5px solid forestgreen;
}
#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;
border-radius: 50%;
/*当图片img有line-height时，需要设置垂直对齐vertical-align*/
vertical-align: top;
position: relative;
top: 15px;
}
/*glyph [glif] 字形*/
.glyphicon {
font-size: 20px;
vertical-align: top;
position: relative;
top: 20px;
}
.small {
font-size: 12px;
top: 24px;
}
.red {
width: 8px;
height: 8px;
border-radius: 50%;
background: red;
display: inline-block;
position: relative;
left: 2px;
bottom: 5px;
}
#msg-icon:hover {
background: #555;
}
.more {
width: 240px;
box-shadow: 0 2px 3px #CCC;
text-align: left;
display: none;
}
.more li {
list-style: none;
width: 120px;
height: 40px;
line-height: 40px;
float: left;
/*bootstrap中，padding会计算在内容区的宽度内*/
padding-left: 15px;
}
.more li a {
text-decoration: none;
color: #000;
}
.more li:hover {
background: #DDD;
}
/*当有二级导航时，鼠标滑过这部分，会挡住原有li的部分，出现闪的问题*/
/*
.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 = "">编程词典 <span class = "glyphicon glyphicon-triangle-bottom small"></span></a>
<ul class = "more">
<li><a href = "">php词典</a></li>
<li><a href = "">技术文章</a><span class = "red"></span></li>
<li><a href = "">CSS词典</a></li>
<li><a href = "">小程序开发</a></li>
<li><a href = "">技术文章</a></li>
<li><a href = "">技术文章</a></li>
<li><a href = "">Javascript词典</a></li>
<li><a href = "">技术文章</a></li>
<!--li是float，所以需要clear撑起高度，否则，more的box-shadow无效-->
<div class = "clear"></div>
</ul>
</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><span class = "red"></span></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>
<!--clear:both两边是不允许有float的，有的话，它就会另起一行。因此，会撑起父元素的高度-->
<!--clear如果在line的上面，line则会在li的高度外，占有新的高度-->
<div class = "clear"></div>
</ul>
</body>
<script src = "https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function () {
//边框线的小绿条
$('.item').hover(function () {
$(this).addClass('bottom-line');
}, function () {
$(this).removeClass('bottom-line');
});
/*
//导航底部span小绿条 -- 会挡住导航的部分，二级导航滑过时，会出问题
$('.item').hover(function () {
var len = 196 + $(this).attr('name') * 96 + 'px';
$('.line').show().stop().animate({
'left': len
});
$(this).children('a').css('color', '#EEE');
}, function () {
$('.line').stop().hide();
$(this).children('a').css('color', '#CCC');
});
*/
//二级导航
console.log($('.item[name="3"]'));
$('.item[name="3"]').hover(function () {
$(this).find('.glyphicon').removeClass('glyphicon-triangle-bottom').addClass('glyphicon-triangle-top');
$('.item .more').show();
}, function () {
$(this).find('.glyphicon').removeClass('glyphicon-triangle-top').addClass('glyphicon-triangle-bottom');
$('.item .more').hide();
});
/*
$('.item[name="3"]').mouseover(function () {
$(this).find('.glyphicon').removeClass('glyphicon-triangle-bottom').addClass('glyphicon-triangle-top');
$('.item .more').show();
});
$('.item[name="3"]').mouseleave(function () {
$(this).find('.glyphicon').removeClass('glyphicon-triangle-top').addClass('glyphicon-triangle-bottom');
$('.item .more').hide();
});
*/
});
</script>
</html>
批改老师：灭绝师太批改时间：2019-01-31 09:22:28
老师总结：完成的不错,但是不可以把直播课的作业拿过来当做vip作业哦
