CSS 之可摺疊導航
阿新 • • 發佈：2018-11-04
<nav>標籤
定義和用法
<nav>標籤定義導航連結的部分
HTML4.0.1與HTML5之間的差異
<nav>標籤是HTML5中的新標籤。
<summary>標籤
定義和用法
<summary>標籤包含details元素的標題，”details”元素用於描述有關文件或文件片段的詳細資訊。
HTML4.01與HTML5之間的差異
<summary>
提示與註釋
提示：請與<details>標籤一起使用。標題是可見的，當用戶點選標題時會顯示出詳細資訊。
註釋：”summary”元素應該是”details”元素的第一個子元素。
原始碼
<!DOCTYPE html > <html> <head> <meta charset="utf-8"> <title>自學教程(如約智惠.com)</title> <style type='text/css'> nav a { display: block; } summary { cursor: pointer; } summary::-webkit-details-marker { display: none; } </style> </head> <body > <details> <summary>Heading 這是一個可摺疊的導航</summary> <nav> <a href="http://www.googto.com/">Googto</a> <a href="https://www.hao123.com/">hao123</a> <a href="https://blog.csdn.net/lengyuezuixue">冷月醉雪</a> </nav> </details> </body> </html>
解釋
display: block
可以將導航中的連結設定為塊級元素，元素前後會帶有換行符。
cursor: pointer
則可以將游標呈現為指示連結的指標（一隻手）。
為小三角新增CSS樣式
原本在標題前面會顯示一個可摺疊的三角，這裡我們沒有顯示，這個小三角符號可以新增樣式嗎？Webkit核心的瀏覽器使用偽元素來解決這個問題：::-webkit-details-marker。
通過這個偽元素，我們可以定製小三角的前景色，背景色和尺寸大小：
summary::-webkit-details-marker {
color: #fff;
background-color: #000;
} 但是，直接通過::-webkit-details-marker偽元素來修改小三角的樣式是行不通的。目前，我們只能通過::before和::after偽元素來替換它們。
summary:before {
content: "\2605"; /* 新圖示 */
color: #696f7c;
margin-right: 5px;
}其中2605屬於常用的HTML特殊字元大全(css3 content)。
