要创建可折叠的导航栏,可以使用HTML5中的<details>
和<summary>
元素。<summary>
元素用于定义折叠块的标题,<details>
元素用于包含折叠块的内容。下面是一个简单的示例:
<details>
<summary>导航栏标题</summary>
<ul>
<li><a href="#">链接1</a></li>
<li><a href="#">链接2</a></li>
<li><a href="#">链接3</a></li>
</ul>
</details>
在浏览器中显示时,这个导航栏将会首先显示标题。当用户点击标题时,导航栏内容会展开或折叠。