摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>頁(yè)面中常見的三級(jí)導(dǎo)航j(luò)query</title> <link rel="
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>頁(yè)面中常見的三級(jí)導(dǎo)航j(luò)query</title>
<link rel="shortcut icon" href="static/images/logo.png" type="image/x-icon"/>
<link rel="stylesheet" href="static/css/style.css" type="text/css">
<link rel="stylesheet" href="static/font-awesome/css/font-awesome.min.css">
<script type="text/javascript" src="static/js/jquery.js"></script>
<script type="text/javascript">
$(function(){
$('.two,.three').hide()
$('li.one:not(0)').mouseover(function(){
$(this).find('.two').slideDown(300)
})
$('li.one:not(0)').mouseleave(function(){
$(this).find('.two').hide(300)
})
$('li.two').mouseover(function(){
$(this).find('.three').slideDown(300)
})
$('li.two').mouseleave(function(){
$(this).find('.three').hide()
})
})
</script>
</head>
<body>
<ul class="nav">
<li class="one" style="background: #DC3514"><a href="" style="margin-right:12px;">圖書</a></li>
<li class="one"><a href="">文字</a><i class="fa fa-chevron-right"></i>
<ul>
<li class="two" style="border-top: 1px solid #6D6E6A"><a href="">穆斯林葬禮</a><i class="fa fa-chevron-right"></i>
<div class="three">
<p >在人生的黃昏時(shí)，一代不幸的人在摸索徘徊：一些人在斗爭(zhēng)中死去；一些人墮入深淵；種種機(jī)緣，希望和仇恨沖擊著那些被偏見束縛著的人；在那黑暗泥濘的道路上同樣也走著那些給人點(diǎn)亮燈光的人，每一個(gè)頭上舉著火種的人盡管沒(méi)有人承</p>
</div>
</li>
<li class="two"><a href="">穆斯林葬禮</a><i class="fa fa-chevron-right"></i>
<div class="three three2">
<p >在人生的黃昏時(shí)，一代不幸的人在摸索徘徊：一些人在斗爭(zhēng)中死去；一些人墮入深淵；種種機(jī)緣，希望和仇恨沖擊著那些被偏見束縛著的人；在那黑暗泥濘的道路上同樣也走著那些給人點(diǎn)亮燈光的人，每一個(gè)頭上舉著火種的人盡管沒(méi)有人承</p>
</div>
</li>
<li class="two"><a href="">穆斯林葬禮</a><i class="fa fa-chevron-right"></i></li>
<li class="two"><a href="">穆斯林葬禮</a><i class="fa fa-chevron-right"></i></li>
</ul>
</li>
<li class="one"><a href="">漫畫</a><i class="fa fa-chevron-right"></i>
<ul>
<li class="two" style="border-top: 1px solid #6D6E6A"><a href="">穆斯林葬禮</a><i class="fa fa-chevron-right"></i>
<div class="three">
<p >在人生的黃昏時(shí)，一代不幸的人在摸索徘徊：一些人在斗爭(zhēng)中死去；一些人墮入深淵；種種機(jī)緣，希望和仇恨沖擊著那些被偏見束縛著的人；在那黑暗泥濘的道路上同樣也走著那些給人點(diǎn)亮燈光的人，每一個(gè)頭上舉著火種的人盡管沒(méi)有人承</p>
</div>
</li>
<li class="two"><a href="">穆斯林葬禮</a><i class="fa fa-chevron-right"></i>
<div class="three three2">
<p >在人生的黃昏時(shí)，一代不幸的人在摸索徘徊：一些人在斗爭(zhēng)中死去；一些人墮入深淵；種種機(jī)緣，希望和仇恨沖擊著那些被偏見束縛著的人；在那黑暗泥濘的道路上同樣也走著那些給人點(diǎn)亮燈光的人，每一個(gè)頭上舉著火種的人盡管沒(méi)有人承</p>
</div>
</li>
<li class="two"><a href="">穆斯林葬禮</a><i class="fa fa-chevron-right"></i></li>
<li class="two"><a href="">穆斯林葬禮</a><i class="fa fa-chevron-right"></i></li>
</ul>
</li>
<li class="one"><a href="">小說(shuō)</a><i class="fa fa-chevron-right"></i></li>
<li class="one"><a href="">雜志</a><i class="fa fa-chevron-right"></i></li>
</ul>
</body>
</html>*{
margin: 0px;
padding: 0px;
}
ul{
list-style: none;
}
a{
text-decoration: none;
color: #fff;
}
.nav{
width:150px;
height:700px;
background: #333233;
margin-top: 10px;
margin-left: 100px;
}
.nav .one{
height:35px;
line-height: 35px;
text-align: center;
border-bottom: 1px solid #6D6E6A;
position: relative;
}
.nav .one i{
float: right;
margin: 10px 5px 0px 0px;
color: #fff;
}
.nav .one:hover{
background: #DC3514;
}
.nav .one ul{
position: absolute;
left:150px;
top:-1px;
border-left: 1px solid #6D6E6A;
border-right: 1px solid #6D6E6A;
}
.two{
width:150px;
height:35px;
line-height: 35px;
text-align: center;
border-bottom: 1px solid #6D6E6A;
background: #333233;
}
.two:hover{
background: #DC3514;
}
.three{
width:300px;
color:#fff;
background: #333233;
padding: 10px 20px;
position: absolute;
left: 151px;
top: 0px;
}
.three2{
width:300px;
color:#fff;
background: #333233;
padding: 10px 20px;
position: absolute;
left: 151px;
top: 36px;
}
p{
text-indent: 2em;
line-height: 20px;
text-align: left;
}總結(jié)：通過(guò)這個(gè)案例，既學(xué)到了三級(jí)導(dǎo)航的制作，也鞏固了之前的知識(shí)，尤其對(duì)定位有了一個(gè)更加清晰的認(rèn)識(shí)。對(duì)jquery的某些函數(shù)也更加熟悉?？傊芤娣藴\。
批改老師：天蓬老師批改時(shí)間：2018-12-07 23:34:03
老師總結(jié)：三級(jí)導(dǎo)航,這種應(yīng)用在頁(yè)面中,隨處可見,其原理都差不多,實(shí)現(xiàn)方式也很多, 純css可以實(shí)現(xiàn),但更多是用js來(lái)做