欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS實現單選折疊菜單功能

  發(fā)布時間:2021-10-26 15:04:22   作者:xosg   我要評論
今天教大家用純css實現一個單選的折疊菜單,不需要JavaScript就能用。折疊菜單和標簽頁差不多,邏輯上都是一種單選面板,只不過折疊菜單一般是垂直堆疊的,標簽頁是橫著排列,對實現代碼感興趣的朋友跟隨小編一起看看吧

不到萬不得已的時候千萬別引入前端UI框架,因為HTML5和CSS3已經能實現絕大多數的功能,比如上期的《CSS實現最簡潔的開關》

dca0a8cfcb26d3cd87aed4ceeceee3b4.png

而很多人的思維還停留在web2.0時代,用各種庫來做UI,導致網頁臃腫。今天教大家用純css實現一個單選的折疊菜單,不需要JavaScript就能用。折疊菜單和標簽頁差不多,邏輯上都是一種單選面板,只不過折疊菜單一般是垂直堆疊的,標簽頁是橫著排列。

873ecdccbd4a9eda8905fa3dda8a95f3.gif

標簽頁:

6af435a8d5daf3680c52d09d86cf2254.gif

既然是單選的,就可以用<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>默認是這樣的:

3734ce405520be5e763445ce517388d4.gif

還是先用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;
}

以上就是基本布局,再加上一點其他樣式,就成了:

192e7d623a0ddedcc4811c5fab7db066.png

但是由于<radio>的特性,無法反選,菜單展開后想要折疊只能點別的菜單項,當然這也沒什么,如果非要實現反選菜單的功能,需要記錄上次展開的菜單項,每次發(fā)生點擊事件時,判斷是否重復點擊:

// for every <radio>
radio.onclick = () => {
  if (window.radio === radio) {
    input.checked = false;
    window.radio = null;
  } else window.radio = radio;
};

這樣就實現了單選折疊菜單的反選能力:

a92c5f3b16fb6ea25513791832948417.gif

對了,圖中混亂的文字是原來文字被打亂的結果(隱私需要),可以通過下面的代碼將一個字符串打亂:

string.split('').sort(() => Math.random() - 0.5).join('')

到此這篇關于CSS實現單選折疊菜單功能的文章就介紹到這了,更多相關CSS單選折疊菜單內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章,希望大家以后多多支持腳本之家!

相關文章

  • CSS 實現 圖片鼠標懸停折疊效果

    這篇文章主要介紹了CSS 實現 圖片鼠標懸停折疊效果,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-09-21
  • 詳解CSS外邊距折疊引發(fā)的問題

    這篇文章主要介紹了詳解CSS外邊距折疊引發(fā)的問題的相關資料,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-02-27
  • 詳解css外邊距折疊(margin collapsing)

    外邊距折疊指的是毗鄰的兩個或多個外邊距 (margin) 會合并成一個外邊距,本文詳細的介紹了一下css外邊距折疊的實現,分為3種情況,非常具有實用價值,需要的朋友可以參考下
    2018-10-30
  • 純CSS實現可折疊樹狀菜單

    這篇文章主要介紹了純CSS實現可折疊樹狀菜單,不用js讓你體會到css的強大,需要的朋友可以參考下
    2018-04-17
  • 通過HTML+CSS實現折疊樣式完整代碼

    這篇文章主要介紹了通過HTML+CSS實現折疊樣式完整代碼,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-04-03

最新評論