html折叠菜单, 折叠菜单的基本原理

HTML折叠菜单通常是经过HTML、CSS和JavaScript来完成的。下面是一个简略的折叠菜单的示例代码：

```html.sidenav { height: 100%; width: 0; position: fixed; zindex: 1; top: 0; left: 0; backgroundcolor: 111; overflowx: hidden; transition: 0.5s; paddingtop: 60px;}

.sidenav a { padding: 8px 15px; textdecoration: none; fontsize: 22px; color: 818181; display: block; transition: 0.3s;}

.sidenav a:hover { color: f1f1f1;}

.sidenav .closebtn { position: absolute; top: 0; right: 25px; fontsize: 36px; marginleft: 50px;}

@media screen and { .sidenav {paddingtop: 15px;} .sidenav a {fontsize: 18px;}}