纯css制作的一个可折叠的(accordion )菜单

时间:2016-07-30
可折叠菜单在WEB网站开发中经常要使用到,折叠菜单可以使用JS来实现,也可以使用纯css来实现,本文章向大家介绍纯css如何制作手风琴菜单,需要的朋友可以参考一下。

纯css折叠的菜单源代码如下:

<!DOCTYPE html>
<html>
<title>http://www.manongjc.com/article/1274.html </title>
<head>
<style type='text/css'>
nav a {
  display: block;
}
summary {
  cursor: pointer;
}
summary::-webkit-details-marker {
  display: none;
}
</style>
</head>
<body>
  <details>
    <summary>Heading #1</summary>
    <nav>
      <a href="#">Link A</a> <a href="#">Link B</a> <a href="#">Link C</a>
    </nav>
  </details>
</body>
</html>

在线运行