abstrak：<!DOCTYPE html> <html lang = "en"> <head> <meta charset = "UTF-8"> <ti
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>浮動--導(dǎo)航</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%;
/*當(dāng)圖片img有l(wèi)ine-height時，需要設(shè)置垂直對齊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會計算在內(nèi)容區(qū)的寬度內(nèi)*/
padding-left: 15px;
}
.more li a {
text-decoration: none;
color: #000;
}
.more li:hover {
background: #DDD;
}
/*當(dāng)有二級導(dǎo)航時，鼠標(biāo)滑過這部分，會擋住原有l(wèi)i的部分，出現(xiàn)閃的問題*/
/*
.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://ipnx.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 = "">社區(qū)問答</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 = "">技術(shù)文章</a><span class = "red"></span></li>
<li><a href = "">CSS詞典</a></li>
<li><a href = "">小程序開發(fā)</a></li>
<li><a href = "">技術(shù)文章</a></li>
<li><a href = "">技術(shù)文章</a></li>
<li><a href = "">Javascript詞典</a></li>
<li><a href = "">技術(shù)文章</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 = "">菜鳥學(xué)堂</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');
});
/*
//導(dǎo)航底部span小綠條 -- 會擋住導(dǎo)航的部分，二級導(dǎo)航滑過時，會出問題
$('.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');
});
*/
//二級導(dǎo)航
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>
Guru membetulkan：滅絕師太Masa pembetulan：2019-01-31 09:22:28
Rumusan guru：完成的不錯,但是不可以把直播課的作業(yè)拿過來當(dāng)做vip作業(yè)哦