CSS實現單選折疊菜單功能

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