整合營銷服務(wù)商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          CSS3實現(xiàn)可展開收縮的彈性動畫菜單

          SS3實現(xiàn)可展開收縮的彈性動畫菜單,可以用在pc端和移動端頁面。喜歡的朋友可以進(jìn)來看看!

          效果圖:

          未點擊菜單前

          點擊菜單標(biāo)識后

          點擊“菜單”圖標(biāo)后,導(dǎo)航文字會逐步顯示出來,然后菜單的標(biāo)識也會變回為交叉圖形

          代碼展示:

          html:

          css:

          面試官:同學(xué)考你一個簡單css內(nèi)容,寫一個可展開列表。

          我:笑出了聲。心想真的會出這么簡單的內(nèi)容哈哈哈!

          面試官:同學(xué)不能用js哦,如果可以用stylus編寫就更好啦!

          我:小腦剎那間萎縮了......

          Stylus 是一種 CSS 預(yù)處理器。預(yù)處理器是一種腳本語言,它擴(kuò)展了 CSS 的功能,使得編寫 CSS 更加高效、靈活和強大。Stylus 特別之處在于其簡潔而靈活的語法,它允許開發(fā)者使用變量、嵌套規(guī)則、混合(Mixins)、繼承、操作符、函數(shù)以及條件語句等高級功能來編寫樣式代碼。

          接下來,讓我們通過一個騰訊的面試題,來更加深層次認(rèn)識這個stylus語言帶給css的便捷。雖然考察的是純html+css內(nèi)容,要想純html+css達(dá)到完美可卻不簡單。

          效果

          有三個列表,并且可以展開和收縮,這題目看起來簡單,但是且聽我細(xì)細(xì)道來,你會發(fā)現(xiàn)里面有很多的秘密!

          html部分

          <!DOCTYPE html>
          <html lang="en">
          
          <head>
              <meta charset="UTF-8">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              <title>純css菜單</title>
              <link rel="stylesheet" href="1.css">
          </head>
          
          <body>
              <div class="accordion">
                  <input type="checkbox" id="collapse1" hidden>
                  <input type="checkbox" id="collapse2" hidden>
                  <input type="checkbox" id="collapse3" hidden>
                  <!-- div替代品 html5語義化標(biāo)簽 SEO比較重要 -->
                  <article>
                      <label for="collapse1">列表1</label>
                      <p>內(nèi)容1</p>
                      <p>內(nèi)容2</p>
                      <p>內(nèi)容3</p>
                      <p>內(nèi)容4</p>
                  </article>
                  <article>
                      <label for="collapse2">列表2</label>
                      <p>內(nèi)容1</p>
                      <p>內(nèi)容2</p>
                      <p>內(nèi)容3</p>
                      <p>內(nèi)容4</p>
                  </article>
                  <article>
                      <label for="collapse3">列表3</label>
                      <p>內(nèi)容1</p>
                      <p>內(nèi)容2</p>
                      <p>內(nèi)容3</p>
                      <p>內(nèi)容4</p>
                  </article>
              </div>
          </body>
          
          </html>
          


          首先我們要進(jìn)行stylus語言環(huán)境的配置,并引入其生成的css文件,配置好之后,我們先看看html部分。

          1. 我們設(shè)置了三個復(fù)選框,并且復(fù)選框的id與label標(biāo)簽的for相對應(yīng),可以方便用戶的操作。服務(wù)于用戶。
          2. 我們用article語義化標(biāo)簽,這有助于搜索引擎優(yōu)化(SEO)和屏幕閱讀器更好地理解頁面結(jié)構(gòu)。每個標(biāo)簽里面放入四段列表。

          到此我們html部分就結(jié)束啦,我們重點講解一下css部分。

          css部分

          * {
            margin: 0;
            padding: 0;
          }
          .accordion {
            width: 300px;
          }
          .accordion article {
            cursor: pointer;
          }
          .accordion article + article {
            margin-top: 5px;
          }
          .accordion label {
            display: block;
            height: 40px;
            padding: 0 20px;
            background-color: #f00;
            cursor: pointer;
            line-height: 40px;
            font-size: 16px;
            color: #fff;
          }
          .accordion p {
            overflow: hidden;
            padding: 0 20px;
            border: 1px solid #f66;
            border-top: none;
            border-bottom-width: 0;
            max-height: 0;
            line-height: 30px;
            transition: all 500ms;
          }
          .accordion input:nth-child(1):checked ~ article:nth-of-type(1) p,
          .accordion input:nth-child(2):checked ~ article:nth-of-type(2) p,
          .accordion input:nth-child(3):checked ~ article:nth-of-type(3) p {
            max-height: 600px;
          }
              <生成css>
          ---------------------------
              <書寫的stylus>
              
              *
              margin 0
              padding 0
          .accordion 
              width 300px
              article
                  cursor pointer
                  & + article
                      margin-top 5px
              label
                  display block
                  height 40px
                  padding 0 20px
                  background-color red
                  cursor pointer
                  line-height 40px
                  font-size 16px
                  color #fff
              p
                  overflow: hidden
                  padding: 0 20px
                  border: 1px solid #f66
                  border-top: none
                  border-bottom-width 0
                  max-height: 0
                  line-height 30px
                  transition: all 500ms
              input  
                  &:nth-child(1):checked ~ article:nth-of-type(1)  p , 
                  &:nth-child(2):checked ~ article:nth-of-type(2)  p ,
                  &:nth-child(3):checked ~ article:nth-of-type(3)  p 
                      max-height:  600px
          


          1. 我們首先清除默認(rèn)的內(nèi)外邊距。
          2. 對整體的accordion設(shè)置寬度。
          3. 對article標(biāo)簽設(shè)置鼠標(biāo)經(jīng)過變成小手。
          4. 通過相鄰兄弟選擇器我們設(shè)置第二個和第三個article的margin top 值。
          5. 對label標(biāo)簽我們設(shè)置一些基本的樣式。
          6. 接下來就是我們最重要的部分,我們這里運用了全體兄弟選擇器,我們以input下第一段為例子說明,后面都是一樣的,我們選中第一個被勾選的復(fù)選框,然后通過全體兄弟選擇器找到所有的article,并根據(jù)復(fù)選框的序號找到對應(yīng)article的位置,然后將里面的p顯現(xiàn)出來,這一段是我們的核心部分!所以也可以理解為nth-child搭配input,nth-of-type搭配article。


          作者:落雪遙夏
          鏈接:https://juejin.cn/post/7379873506543616010


          主站蜘蛛池模板: 一区 二区 三区 中文字幕| 精品女同一区二区三区在线| 国产一区二区三区精品久久呦| 国产精品乱码一区二区三区 | 国产乱码精品一区二区三区中 | 精品在线一区二区三区| 久久久久人妻一区精品性色av| 一区二区三区高清在线| 国产伦精品一区二区三区无广告 | 国产福利一区二区精品秒拍| 无码人妻精品一区二区三18禁| 久久亚洲色一区二区三区| 风流老熟女一区二区三区| 国产精品一区二区在线观看| 国产精品无码一区二区三区在| 午夜爽爽性刺激一区二区视频| 欧美日韩一区二区成人午夜电影| 中日韩精品无码一区二区三区| 亚欧免费视频一区二区三区| 亚洲av高清在线观看一区二区| 亚洲色精品VR一区区三区| 亚洲一区二区在线免费观看| 国产裸体歌舞一区二区| 亚洲一区二区三区在线观看精品中文| 中文字幕无码免费久久9一区9| 久久久99精品一区二区| 亚洲日韩精品无码一区二区三区| 成人区精品人妻一区二区不卡| 久久国产精品视频一区| 久久国产精品无码一区二区三区| 中文字幕AV无码一区二区三区| 99久久精品费精品国产一区二区 | 在线免费观看一区二区三区| 亚洲sm另类一区二区三区| 中文字幕无码不卡一区二区三区 | 变态拳头交视频一区二区| 国产自产V一区二区三区C| 无码免费一区二区三区免费播放| 精品一区精品二区制服| 午夜DV内射一区区| 精品人妻一区二区三区毛片 |