站長(zhǎng)資訊網(wǎng)
導(dǎo)航欄之前也做過(guò)……但都是很簡(jiǎn)單的一級(jí)導(dǎo)航欄或者用JQ實(shí)現(xiàn)的二級(jí)導(dǎo)航欄。但是關(guān)于頁(yè)面展示的東西，還是應(yīng)該由CSS來(lái)實(shí)現(xiàn)，JavaScript應(yīng)該多負(fù)責(zé)動(dòng)作?！就扑]：css視頻教程】 首先是二級(jí)導(dǎo)航欄，例如這樣的： 主要的地方在于： 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)航欄，以此類推…… 2.鼠標(biāo)移動(dòng)到一級(jí)導(dǎo)航欄上，顯示出二級(jí)導(dǎo)航欄，第一反應(yīng)是hover偽類，按照之前的理解，hover用于控制自身的改變，怎么樣才能控制子元素的樣式呢？其實(shí)這樣就可以了： 當(dāng)一級(jí)導(dǎo)航的li被鼠標(biāo)覆蓋時(shí)，子元素中的ul顯示出來(lái)。 …… 原來(lái)還可以這樣，之前的理解錯(cuò)了。我原先以為 這句代碼把整個(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á)到目的了。 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擠到下面去。 這是最最最最最基礎(chǔ)的二級(jí)導(dǎo)航欄了，但是有了這個(gè)基礎(chǔ)，想要制作多級(jí)導(dǎo)航欄以及各種效果就有了依據(jù)。 在以上的原理基礎(chǔ)上，可以輕松制作多級(jí)導(dǎo)航欄，以三級(jí)的為例子，學(xué)做一個(gè)好看點(diǎn)的。 由于層級(jí)較多……使用選擇器的時(shí)候一定要注意。。什么時(shí)候應(yīng)該加> 什么時(shí)候用空格。。否則會(huì)改個(gè)大半天，別問(wèn)我是怎么知道的。
前言
基礎(chǔ)
之前一直不明白……其實(shí)這種東西說(shuō)穿了很簡(jiǎn)單……。 #nav li:hover ul{ display: block; }
li：hover單單是一個(gè)狀態(tài)，其實(shí)他也是個(gè)元素。
我真機(jī)智。
上代碼：<!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="#">肉類</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="#">蘋果</a></li> </ul> </li> <li><a href="#">零食</a></li> <li><a href="#">蔬菜</a> <ul> <li><a href="#">白菜</a></li> </ul> </li> </ul> </body> </html>
多級(jí)導(dǎo)航欄
同樣是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="#">肉類</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="#">小盤裝</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>
純CSS實(shí)現(xiàn)多級(jí)導(dǎo)航聯(lián)動(dòng)（附圖文示例）
相關(guān)推薦
- RakSmart服務(wù)器成本優(yōu)化策略
- 自媒體推廣實(shí)時(shí)監(jiān)控從服務(wù)器帶寬到用戶行為解決方法
- 個(gè)人站長(zhǎng)消亡論？從“消失”到“重生”的三大破局路徑
- 華納云高防服務(wù)器3.6折起低至1188元/月，企業(yè)級(jí)真實(shí)防御20G`T級(jí)，自營(yíng)機(jī)房一手服務(wù)器資源
- 華納云：美國(guó)cn2云服務(wù)器月5折/年3折，一手服務(wù)器資源，解鎖tiktok ChatGPT等
- 華納云三月活動(dòng)：香港cn2云服務(wù)器3折促銷，4H8G5M低至122元/月，穩(wěn)定高性價(jià)比
- 開(kāi)春特惠，華納云香港云8H16G5M低至166元/月，雙E5香港CN2服務(wù)器限時(shí)搶購(gòu)
- 2025年華納云新年煥新季，香港云4H4G3M特惠696元/年，E5物理服務(wù)器688元/月起
