欢迎访问 如意编程网！
TAG聚合

如意编程网

当前位置： 首页 > 前端技术 > HTML >内容正文

HTML

HTML折叠菜单

发布时间：2022/11/16 HTML 30 老码农
如意编程网 收集整理的这篇文章主要介绍了 HTML折叠菜单 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

html代码：

<body>
<section ></section>
</section>
</body>

css代码：

<style>
* {
margin: 0;
padding: 0;
}

a {
text-decoration: none;
}

#conter {
width: 1000px;
margin: auto;
}

#help-left {
width: 200px;
font-family: 'microsoft YaHei';
float: left;
}

.menu {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}

.menu:last-child {
border-bottom: 1px solid #ccc;
}

.menu summary {
height: 40px;
line-height: 40px;
text-indent: 10px;
outline: none;
font-size: 14px;
font-weight: 700;
border-top: 1px solid #ddd;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FEFEFE), color-stop(1, #CCCCCC));
cursor: pointer;
}

.menu summary::-webkit-details-marker {
display: none;
}

/*可用图片或字符,如果使用图片，请把content的值设置成空字符*/
.menu summary:before {
content: "+";
/*background: url(../Images/right.png) no-repeat center center;*/ /*收起时的图片*/
/*vertical-align: middle;*/
display: inline-block;
width: 16px;
height: 16px;
margin-right: 10px;
font-size:18px;
font-weight:700;
}

.menu[open] summary:before {
content: "-";
/*background: url(../Images/down.png) no-repeat center center;*/ /*展开时的图片*/
}

.menu ul {
padding: 10px 0;
}

.menu ul li {
list-style: none;
text-indent: 25px;
font-size: 12px;
height: 30px;
line-height: 30px;
}

.menu ul li a {
display: block;
color: #666;
}

.menu ul li a:hover {
text-decoration: underline;
}
</style>

总结

以上是如意编程网为你收集整理的HTML折叠菜单的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得如意编程网网站内容还不错，欢迎将如意编程网推荐给好友。