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部分。

我們設(shè)置了三個復(fù)選框，并且復(fù)選框的id與label標(biāo)簽的for相對應(yīng)，可以方便用戶的操作。服務(wù)于用戶。
我們用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

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

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

在線咨詢

上一篇：[6]Web編程-「5」HTML
下一篇：Web前端：20道非?；A(chǔ)的JavaScript測試題

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

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

言

效果

html部分

css部分

您的項目需求