CSS實(shí)現(xiàn)單選折疊菜單功能

不到萬不得已的時(shí)候千萬別引入前端UI框架,因?yàn)镠TML5和CSS3已經(jīng)能實(shí)現(xiàn)絕大多數(shù)的功能,比如上期的《CSS實(shí)現(xiàn)最簡(jiǎn)潔的開關(guān)》
而很多人的思維還停留在web2.0時(shí)代,用各種庫來做UI,導(dǎo)致網(wǎng)頁臃腫。今天教大家用純css實(shí)現(xiàn)一個(gè)單選的折疊菜單,不需要JavaScript就能用。折疊菜單和標(biāo)簽頁差不多,邏輯上都是一種單選面板,只不過折疊菜單一般是垂直堆疊的,標(biāo)簽頁是橫著排列。
標(biāo)簽頁:
既然是單選的,就可以用<input type="radio">單選按鈕來實(shí)現(xiàn)。首先這些單選按鈕組的父元素用<form>,因?yàn)?lt;form>可以監(jiān)聽按鈕組的變化,同時(shí)還能通過name屬性直接得到RadioNodeList列表和變化值,非常方便,不用設(shè)置其他的css選擇器了。所以這個(gè)折疊菜單的html如下:
<form id="form"> <input type="radio" name="collapse"> <div></div> <input type="radio" name="collapse"> <div></div> <input type="radio" name="collapse"> <div></div> </form>
給<form>設(shè)置id,這樣可以直接通過window[id]找到它,每個(gè)<radio>的name屬性要一致,然后通過form[name]得到單選組,form[name].value就是當(dāng)前選中的按鈕的value,也就是折疊按鈕的標(biāo)題,每個(gè)<radio>后面跟著一個(gè)<div>就是菜單展開的內(nèi)容。但是<radio>默認(rèn)是這樣的:
還是先用appearance: none禁用如上圖的默認(rèn)樣式,然后利用::before作為按鈕左側(cè)的名稱(讀取value屬性),::after作為右側(cè)的小箭頭(字符>和v),通過:checked屬性表示折疊狀態(tài)。
input[type="radio"] { cursor: pointer; appearance: none; display: block; } input[type="radio"]::before { content: attr(value); } input[type="radio"]::after { float: right; content: ">"; } input[type="radio"]:checked::after { content: "v"; }
對(duì)于<div>,默認(rèn)是隱藏的,只有被選中的<radio>后面的<div>才顯示。至于折疊動(dòng)畫的話,就看需求了,對(duì)我來說,沒有動(dòng)畫會(huì)更清爽一點(diǎn)。
input[type="radio"] + div { display: none; } input[type="radio"]:checked + div { display: block; }
以上就是基本布局,再加上一點(diǎn)其他樣式,就成了:
但是由于<radio>的特性,無法反選,菜單展開后想要折疊只能點(diǎn)別的菜單項(xiàng),當(dāng)然這也沒什么,如果非要實(shí)現(xiàn)反選菜單的功能,需要記錄上次展開的菜單項(xiàng),每次發(fā)生點(diǎn)擊事件時(shí),判斷是否重復(fù)點(diǎn)擊:
// for every <radio> radio.onclick = () => { if (window.radio === radio) { input.checked = false; window.radio = null; } else window.radio = radio; };
這樣就實(shí)現(xiàn)了單選折疊菜單的反選能力:
對(duì)了,圖中混亂的文字是原來文字被打亂的結(jié)果(隱私需要),可以通過下面的代碼將一個(gè)字符串打亂:
string.split('').sort(() => Math.random() - 0.5).join('')
到此這篇關(guān)于CSS實(shí)現(xiàn)單選折疊菜單功能的文章就介紹到這了,更多相關(guān)CSS單選折疊菜單內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
CSS 實(shí)現(xiàn) 圖片鼠標(biāo)懸停折疊效果
這篇文章主要介紹了CSS 實(shí)現(xiàn) 圖片鼠標(biāo)懸停折疊效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-09-21- 這篇文章主要介紹了詳解CSS外邊距折疊引發(fā)的問題的相關(guān)資料,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-27
- 外邊距折疊指的是毗鄰的兩個(gè)或多個(gè)外邊距 (margin) 會(huì)合并成一個(gè)外邊距,本文詳細(xì)的介紹了一下css外邊距折疊的實(shí)現(xiàn),分為3種情況,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2018-10-30
- 這篇文章主要介紹了純CSS實(shí)現(xiàn)可折疊樹狀菜單,不用js讓你體會(huì)到css的強(qiáng)大,需要的朋友可以參考下2018-04-17
通過HTML+CSS實(shí)現(xiàn)折疊樣式完整代碼
這篇文章主要介紹了通過HTML+CSS實(shí)現(xiàn)折疊樣式完整代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-03