本節示例演示：
請添加圖片描述

一、基本布局

一般來說，側邊欄的位置是在左側，咱們為了更好的展現側邊欄的效果，并且在本節中不涉及過多的內容，我們只需要直接給一個 div 寬度為 15即可，接著再到這個 div 中編寫對應的側邊欄。

給予一個 nav 樣式，設置寬度為 15%，并且給予一些基礎樣式，使其呈現有一定的對比度：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>accordion nav demo 1_bit CSS 動效課 </title><style>.nav {width: 20vw;background-color: white;margin: 4px;height: 100vh;}body {margin: 0;background-color: rgb(223, 224, 225);}</style>
</head><body><div class="nav"></div>
</body></html>

此時頁面效果如下：
在這里插入圖片描述

二、手風琴側邊欄 LOGO 部分編寫

有了基本布局后，開始著手編寫側邊欄。

從這個側邊欄我們可以明顯的知道，側邊欄頂部是 logo 區，或者你放其他的也行，logo 之下就是對應的菜單，那么側邊欄的內容就分為兩塊，一個上一個下，并且這一上一下的結果所屬于一個側邊欄，那么此時肯定需要一個 div 包裹其他兩個 div，此時側邊欄代碼編寫如下：

<body><div class="nav"><!--手風琴側邊欄--><div><!--logo--><div></div><!--菜單--><div></div></div></div>
</body>

此時我們編寫一個類樣式，咩咩咩為 accordion：

<style>
.accordion {width: 100%;border-right: #424243 solid 2px;
}
</style>

并且包裹手風琴內容的div 要調用這個類樣式：

<!--手風琴側邊欄-->
<div class="accordion">

在此我們只是給這個手風琴側邊欄定義了一個基礎的邊框和寬度，接下來創建 logo和 logo 下的 span 樣式：

<style>
.logo {border-bottom: #424243 solid 1px;display: flex;justify-content: center;
}.logo span {color: white;padding: 2rem 2rem;font-size: 2rem;font-weight: bolder;
}
</style>

因為要對文字設置一定的大小，對文字使用 span 標簽可以很好的進行控制；在 logo 樣式中，還設置了當前 div 為 flex 樣式，這樣就可以很好的控制其中的內容是否居中等操作了，接著我們設置了 logo 的 span 樣式，文本為白色，設置了padding 這樣使其大小可以撐大，這樣就不用設置該文本對于邊緣的空隙了，接著設置了字體大小和加粗。此時的html 代碼如下：

<body><div class="nav"><!--手風琴側邊欄--><div class="accordion"><!--logo--><div class="logo"><span>ePageTool</span></div><!--菜單--><div></div></div></div>
</body>

此時頁面效果如下：
在這里插入圖片描述

三、菜單部分內容編寫

接著完成了 logo 后開始編寫下面的菜單內容，我們可以從之前的演示圖看到，我們點擊對應的菜單欄可以對其進行選中并且展開其內部的選項，那么這個功能需要一個 html 元素實現，那就是 radio ；在其選中一個類型內容后，將會展開對應的內部選項，這些選項需要一個 div 統一對其進行管理，那么在選項的 div 之下應該還需要創建一個 div，并且 div 中需要有選項內容：

<!--菜單-->
<div><div><ul><li><a href="#">使用</a></li><li><a href="#">自定義</a></li></ul></div>
</div>

在此使用了 ul 表示對應的選項內容，那么外部還需要顯示該菜單的文本直接使用一個 label 表現即可：

<!--菜單-->
<div><label> 開始</label><div><ul><li><a href="#">使用</a></li><li><a href="#">自定義</a></li></ul></div>
</div>

之前說需要使用 radio 表示選中，那么此時在外部再加一個 input type 為 radio：

<!--菜單-->
<div><input type="radio"><label> 開始</label><div><ul><li><a href="#">使用</a></li><li><a href="#">自定義</a></li></ul></div>
</div>

此時頁面顯示如下：
在這里插入圖片描述
這明顯就不是我們想要的樣子，那么此時第一步，我們先把 radio 的選中圈圈取消，這個時候直接寫 accordion 下的 input 直接為 none，這樣就可以統一去掉所有 radio 的圈圈了：

<style>
.accordion input[type='radio'] {display: none;
} 
</style>

以上樣式表示 accordion 類下的 input 標簽屬性 type 值為 radio 的統一設置屬性 display: none;，那么此時頁面如下：

在這里插入圖片描述
由于 radio 是單選項，我們需要對其設置一個單選項組，直接使用 name 表示即可，多個不同的 radio 使用同一個 name 就表示同一個組的 radio：

<input name="menu" type="radio"  >

此時我們還需要做一件事，因為我們的 radio 的 display 已經是 none 了，那么我們需要有一個東西代替這個惡radio，此時我們直接給予 label 一個 for：

<label for="start"> 開始</label>

這個 for 可以對應所關聯的 radio，那么 radio 此時需要一個 id 對應這個 label 元素，我們只需要給予這個 radio 的 id 為 start 即可：

<input name="menu" type="radio" id="start" >

此時 body 代碼如下：

<body><div class="nav"><!--手風琴側邊欄--><div class="accordion"><!--logo--><div class="logo"><span>ePageTool</span></div><!--菜單--><div><input name="menu" type="radio" id="start"><label for="start"> 開始</label><div><ul><li><a href="#">使用</a></li><li><a href="#">自定義</a></li></ul></div></div></div></div>
</body>

接著我們直接給予這個菜單一個 item 樣式：

<!--菜單-->
<div class="item">

接著直接寫兩個樣式，item 樣式不寫都可以：

<style>
.accordion>.item label {color: white;background-color: #ff6f61;display: block;padding: 1rem 2rem;border-bottom: #931313 solid 1px;transition: color 0.3s, background-color 0.3s;
}.accordion>.item label:hover {background-color: #c30d0ddb;color: white;
}
</style>

首先 .accordion>.item label 表示 accordion 樣式下的 item 樣式下的 label 標簽樣式，顏色為白，給予背景色，設置 display 為 block，并且給予對應的 padding，以及下邊框（這樣每個 item 之間有間隔看得清楚）顏色，還定義了一個 transition 動畫，主要是顏色動畫和背景色動畫，隨后給予了一個同樣 label 的 hover 樣式，設置背景色會有一定的變化，并且設置了 color 字體顏色為白色，這樣整個 label 就會有顏色的改變，此時頁面效果如下：

請添加圖片描述

接著我們需要對這個菜單下的展開選項設置樣式：
在這里插入圖片描述
我們給予這個展開項的div 一個樣式 content：

<div class="content"><ul><li><a href="#">使用</a></li><li><a href="#">自定義</a></li></ul>
</div>

此時我們發現這個 ul 列有一定的距離：
在這里插入圖片描述
這是因為這時ul 自帶了padding 和 margin，我們需要消除，那么在 content 樣式中，我們就需要給予 padding 、margin 為 0：

<style>
.content ul {margin: 0;padding: 0;
}
</style>

此時頁面如下：
在這里插入圖片描述
接著給a標簽對應的樣式：

<style>
.content ul a {width: 100%;display: inline-block;color: white;font-size: 1rem;text-decoration: none;padding: 1rem 3rem;border-bottom: 1px solid #394c7f;
}
</style>

設置標簽 a 寬度為 100%，并且轉換元素類型，給予字體 size、去掉下劃線，給予 padding隨后得到的效果如下：
在這里插入圖片描述

我們此時發現下劃線超格了，那么需要設置 overflow，直接在content 上設置overflow即可：

<style>
.content ul {overflow: hidden;margin: 0;padding: 0;}
</style>

此時頁面將不會超格；接下來設置對應 a 標簽的 hover 標簽，這個標簽我們需要有一定的動畫效果，那么在 a 標簽的樣式中添加過渡動畫，并且添加 position: relative，因為接下來添加的效果需要脫離文檔流制作：

<style>
.content ul a {width: 100%;display: inline-block;color: white;font-size: 1rem;text-decoration: none;padding: 1rem 3rem;border-bottom: 1px solid #394c7f;position: relative;transition: all 0.5s;
}
</style>

接著添加 hover 效果，這個效果只是其一，接下來還有其他效果：

<style>
.content a:hover {display: block;background-color: #1e2546;}</style>

接下來給 a 標簽添加 before，在 before 上制作對應的動畫效果，當然，這里添加的是默認情況。當然是無效果狀態，在這里只是默認的把 before 的透明度 opacity 調為 0 ，內容是空白，添加了一個過渡動畫對其進行響應：

<style>
.content a:before {content: '';opacity: 0;transition: all 0.3s;
}
</style>

接著增加 before 的對應效果：

<style>
.content a:hover:before {position: absolute;left: 0;top: 0;opacity: 1;border-top: 24px solid transparent;border-left: 11px solid #ff6f61;border-bottom: 24px solid transparent;
}
</style>

在以上效果中，增加 before 為 position: absolute; 開始為期編寫對應的樣式，這個樣式距離左邊 0 個單位，距離頂部 0 個單位，透明度 opacity 為 1 表示課件，最關鍵的是以下樣式：

<style>
border-top: 24px solid transparent;
border-left: 11px solid #ff6f61;
border-bottom: 24px solid transparent;
</style>

我們之間設置顯示的效果給大家看，該代碼改成：

<style>
border-top: 24px solid #ff6161;
border-left: 24px solid #ffdf61;
border-right: 24px solid #616eff;
border-bottom: 24px solid #71ff61;
</style>

這 4 個代碼分別表示 border-top 為紅、橙、藍、綠：
在這里插入圖片描述
接著顯示時如下效果：

這個時候若我們只想要左側大小變小，例如 11：

<style>
border-top: 24px solid #ff6161;
border-left: 11px solid #ffdf61;
border-right: 24px solid #616eff;
border-bottom: 24px solid #71ff61;
</style>

效果如下：
在這里插入圖片描述
那么此時其它顏色為 transparent 為透明。那么代碼如下：

<style>
border-top: 24px solid transparent;
border-left: 11px solid #ffdf61;
border-right: 24px solid transparent;
border-bottom: 24px solid transparent;
</style>

效果如下：
在這里插入圖片描述
很明顯我們的右側代碼沒有存在必要，那么直接不寫就可以了，也就是刪掉這一條：border-right: 24px solid transparent;，并且其它 border 不同大小可以影響其結果，大家自行實驗即可，接下來我們添加第二個 item：

<div class="item"><input name="menu" type="radio" id="gradient"><label for="gradient"> 漸變</label><div class="content"><ul><li><a href="#">線性漸變</a></li><li><a href="#">徑向漸變</a></li></ul></div>
</div>

并且在 content ul 樣式中為其設置高度為 0，這樣內容就不會全部展開了：

<style>
.content ul {max-height: 0;overflow: hidden;margin: 0;padding: 0;
}
</style>

此時效果如下，點擊后展開不了內容：
在這里插入圖片描述

那此時如何點擊后展開內容呢？

我們只需要對 input 的效果監聽是否 checked 即可：

<style>
.accordion input:checked~.content ul {max-height: auto;transition: all 0.2s;background-color: #273057;
}
</style>

此時 .accordion input:checked~.content ul 的意思是為所有相同父元素中位于.accordion input:checked 之后的所有 content 下的 ul 元素設置CSS，其中波浪線之前表示什么什么之后，content ul 表示設置結果對象，作用范圍是當前響應對象的所有相同父元素的對象。那么此時直接設置了 ul 的高度為 auto，那么就可以展開了。

若自己試驗后可以看到此時感覺響應效果不好，沒有添加動畫，那么此時只需要在 content ul 中設置動畫即可：

<style>
.content ul {max-height: 0;overflow: hidden;margin: 0;padding: 0;transition: all 0.4s;
}
</style>

效果如下：
請添加圖片描述

此時完整代碼如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>accordion nav demo 1_bit CSS 動效課 </title><style>.nav {width: 20vw;background-color: white;margin: 4px;height: 100vh;}body {margin: 0;background-color: rgb(223, 224, 225);}.accordion {width: 100%;border-right: #424243 solid 2px;background-color: #ff6f61;}.logo {border-bottom: #424243 solid 1px;display: flex;justify-content: center;}.logo span {color: white;padding: 2rem 2rem;font-size: 2rem;font-weight: bolder;}.accordion input[type='radio'] {display: none;}.accordion>.item label {color: white;background-color: #ff6f61;display: block;padding: 1rem 2rem;border-bottom: #931313 solid 1px;transition: color 0.3s, background-color 0.3s;}.accordion>.item label:hover {background-color: #c30d0ddb;color: white;}.content ul {max-height: 0;overflow: hidden;margin: 0;padding: 0;transition: all 0.4s;}.content ul a {width: 100%;display: inline-block;color: white;font-size: 1rem;text-decoration: none;padding: 1rem 3rem;border-bottom: 1px solid #394c7f;position: relative;transition: all 0.5s;}.content a:hover {background-color: #1e2546;}.content a:before {content: '';opacity: 0;transition: all 0.3s;}.content a:hover:before {position: absolute;left: 0;top: 0;opacity: 1;border-top: 1.5rem solid transparent;border-left: 11px solid #ffdf61;border-bottom: 1.5rem solid transparent;}.accordion input:checked~.content ul {max-height: 20rem;transition: all 0.2s;background-color: #273057;}</style>
</head><body><div class="nav"><!--手風琴側邊欄--><div class="accordion"><!--logo--><div class="logo"><span>ePageTool</span></div><!--菜單--><div class="item"><input name="menu" type="radio" id="start"><label for="start"> 開始</label><div class="content"><ul><li><a href="#">使用</a></li><li><a href="#">自定義</a></li></ul></div></div><div class="item"><input name="menu" type="radio" id="gradient"><label for="gradient"> 漸變</label><div class="content"><ul><li><a href="#">線性漸變</a></li><li><a href="#">徑向漸變</a></li></ul></div></div></div></div>
</body></html>