溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“純CSS如何實(shí)現(xiàn)多級(jí)導(dǎo)航聯(lián)動(dòng)”，在日常操作中，相信很多人在純CSS如何實(shí)現(xiàn)多級(jí)導(dǎo)航聯(lián)動(dòng)問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”純CSS如何實(shí)現(xiàn)多級(jí)導(dǎo)航聯(lián)動(dòng)”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！
首先是二級(jí)導(dǎo)航欄，例如這樣的：
之前一直不明白……其實(shí)這種東西說(shuō)穿了很簡(jiǎn)單……。
主要的地方在于：
1.整個(gè)導(dǎo)航的結(jié)構(gòu)應(yīng)該是怎么樣的
2.不用JS的情況下，如何讓鼠標(biāo)移到一級(jí)導(dǎo)航時(shí)，顯示出二級(jí)導(dǎo)航。
3.二級(jí)導(dǎo)航欄的定位。
分析：
1.較為主流的做法應(yīng)該是使用ul標(biāo)簽。每個(gè)ul標(biāo)簽為一個(gè)導(dǎo)航級(jí)，里面的li為子項(xiàng)目，li里面又包含a標(biāo)簽和ul標(biāo)簽，a標(biāo)簽用于點(diǎn)擊跳轉(zhuǎn)，ul為下一級(jí)的導(dǎo)航欄，以此類(lèi)推……
2.鼠標(biāo)移動(dòng)到一級(jí)導(dǎo)航欄上，顯示出二級(jí)導(dǎo)航欄，第一反應(yīng)是hover偽類(lèi)，按照之前的理解，hover用于控制自身的改變，怎么樣才能控制子元素的樣式呢？其實(shí)這樣就可以了：
#nav li:hover ul{
display: block;
}當(dāng)一級(jí)導(dǎo)航的li被鼠標(biāo)覆蓋時(shí)，子元素中的ul顯示出來(lái)。
……
……
原來(lái)還可以這樣，之前的理解錯(cuò)了。我原先以為li：hover單單是一個(gè)狀態(tài)，其實(shí)他也是個(gè)元素。
這句代碼把整個(gè)li:hover當(dāng)成一個(gè)元素，只是這個(gè)元素比較特殊，定義為“當(dāng)鼠標(biāo)覆蓋到li元素的li元素”，他也是一個(gè)元素，這樣，當(dāng)鼠標(biāo)覆蓋上li元素時(shí)，這時(shí)鼠標(biāo)所指的元素是 li:hover，這時(shí)候控制li:hover下的ul元素顯示出來(lái)，就達(dá)到目的了。
我真機(jī)智。
3.那么如何讓第二級(jí)的ul剛好顯示在第一級(jí)的li正下方呢？
1）第二級(jí)的ul是包裹在第一級(jí)的li里面的，實(shí)際上使用相對(duì)定位就可以了，而且不止是正下方，這時(shí)候已經(jīng)脫離了文檔流，想定位到哪里都可以。
2）如果出于某種原因，或者你是強(qiáng)迫癥患者，不想脫離文檔流呢？
……
其實(shí)把他“擠”下來(lái)就可以了，li里面有a標(biāo)簽和ul標(biāo)簽，當(dāng)a標(biāo)簽足夠大，占據(jù)了所有位置的時(shí)候，自然會(huì)把ul擠到下面去。
上代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>吃貨的導(dǎo)航欄</title>
</head>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
#nav{
width: 600px;
height: 40px;
background: gray;
margin: 0 auto;
}
#nav li{
line-height: 40px;
float: left;
list-style: none;
height: 40px;
position: relative;
}
#nav a{
padding: 0 20px;
color: black;
display: block;
text-decoration: none;
height: 40px;
}
#nav a:hover{
background: #058;
color:white;
}
#nav li ul{
display: none;
position: absolute;
top: 40px;
left:0px;
}
#nav li ul li{
float: none;
margin: 2px;
width:100px;
text-align: center;
}
#nav li ul li a{
background: #ccc;
}
#nav li ul li a:hover{
background: deeppink;
}
#nav li:hover ul{
display: block;
}
</style>
<body>
<ul id="nav">
<li><a href="#">首頁(yè)</a></li>
<li><a href="#">肉類(lèi)</a>
<ul>
<li><a href="#">牛肉</a></li>
<li><a href="#">豬肉</a></li>
<li><a href="#">雞肉</a></li>
</ul>
</li>
<li><a href="#">水果</a>
<ul>
<li><a href="#">西瓜</a></li>
<li><a href="#">香蕉</a></li>
<li><a href="#">蘋(píng)果</a></li>
</ul>
</li>
<li><a href="#">零食</a></li>
<li><a href="#">蔬菜</a>
<ul>
<li><a href="#">白菜</a></li>
</ul>
</li>
</ul>
</body>
</html>這是最最最最最基礎(chǔ)的二級(jí)導(dǎo)航欄了，但是有了這個(gè)基礎(chǔ)，想要制作多級(jí)導(dǎo)航欄以及各種效果就有了依據(jù)。
在以上的原理基礎(chǔ)上，可以輕松制作多級(jí)導(dǎo)航欄，以三級(jí)的為例子，學(xué)做一個(gè)好看點(diǎn)的。 
同樣是li內(nèi)嵌ul的結(jié)構(gòu)，使用相對(duì)定位和一點(diǎn)過(guò)渡效果，還有利用border做的小三角形，原理就是把其他邊框的顏色變成透明色transparent。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>吃貨的動(dòng)畫(huà)導(dǎo)航欄</title>
</head>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.top-nav{
width: 960px;
margin: 0 auto;
list-style: none;
background-image: linear-gradient(#444, #111);
border-radius: 6px;
box-shadow: 0 1px 10px #777;
}
.top-nav:before,.top-nav:after{
content: "";
display: table;
}
.top-nav:after{
clear: both;
}
.top-nav>li{
float: left;
border-right: 1px solid saddlebrown;
position: relative;
line-height: 40px;
}
.top-nav li{
position: relative;
}
.top-nav>li a{
font: "微軟雅黑" 12px;
text-decoration: none;
color: goldenrod;
padding: 12px 30px;
}
.top-nav>li a:hover{
color:#fafafa;
}
.top-nav li ul{
position: absolute;
border-radius: 6px;
z-index: 1;
top: 40px;
left: 0px;
list-style: none;
background-image: linear-gradient(#444, #111);
box-shadow: 0 -1 0 rgba(255,255,255,0.3);
visibility: hidden; /*這里只能用hidden 不能display*/
opacity: 0;
margin: 20px 0 0 0;
transition: all .2s ease-in-out;
}
.top-nav ul ul{
margin-left: 20px;
margin-top: 20px;
}
.top-nav ul li:hover>ul{
margin-left: 0px;
}
.top-nav li:hover>ul{
opacity: 1;
visibility: visible;
margin: 0;
}
.top-nav ul a{
padding: 15px;
width: 70px;
display: block;
}
.top-nav ul a:hover{
background-image: linear-gradient(#04acec, #0186ba);
}
.top-nav ul li:first-child>a{
border-radius: 6px 6px 0 0;
}/*第一個(gè)跟最后一個(gè)a標(biāo)簽設(shè)置圓角*/
.top-nav ul li:last-child>a{
border-radius: 0 0 6px 6px;
}
.top-nav ul li{
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}/*兩個(gè)陰影疊加產(chǎn)生間隔*/
.top-nav ul li:first-child>a:before{
content: "";/*這句不可少，少了沒(méi)效果*/
display: block;
width: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;
position: absolute;
top: -6px;
left: 40px;
}
.top-nav ul li:first-child>a:hover:before{
border-bottom: 6px solid #04acec;
}
.top-nav ul ul{
top: 0px;
left: 100px;
}
.top-nav ul ul li:first-child>a:before{
border-top: 6px solid transparent;
border-right: 6px solid #444;
border-bottom: 6px solid transparent;
position: absolute;
top: 20px;
left: -12px;
}
.top-nav ul ul li:first-child>a:hover:before{
border-bottom: 6px solid transparent;
border-right: 6px solid #04acec;
}
</style>
<body>
<ul class="top-nav">
<li><a href="#">什么都吃</a></li>
<li><a href="#">肉類(lèi)</a>
<ul>
<li><a href="#">鐵板牛肉</a>
<ul>
<li><a href="#">黑椒味</a></li>
<li><a href="#">孜然味</a></li>
<li><a href="#">酸辣味</a></li>
</ul>
</li>
<li><a href="#">泡椒鳳爪</a>
<ul>
<li><a href="#">大盤(pán)裝</a></li>
<li><a href="#">中盤(pán)裝</a></li>
<li><a href="#">小盤(pán)裝</a></li>
</ul>
</li>
<li><a href="#">坩堝田雞</a></li>
</ul>
</li>
<li><a href="#">中餐</a>
<ul>
<li><a href="#">家常菜</a>
<ul>
<li><a href="#">紅燒肉</a></li>
<li><a href="#">拔絲地瓜</a></li>
<li><a href="#">青椒炒肉</a></li>
</ul>
</li>
<li><a href="#">湯</a>
<ul>
<li><a href="#">花蛤湯</a></li>
<li><a href="#">大骨肉湯</a></li>
<li><a href="#">魚(yú)湯</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">水果</a></li>
<li><a href="#">甜點(diǎn)</a></li>
</ul>
</body>
</html>由于層級(jí)較多……使用選擇器的時(shí)候一定要注意。。什么時(shí)候應(yīng)該加> 什么時(shí)候用空格。。否則會(huì)改個(gè)大半天，別問(wèn)我是怎么知道的。
到此，關(guān)于“純CSS如何實(shí)現(xiàn)多級(jí)導(dǎo)航聯(lián)動(dòng)”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼