折叠式侧边栏
折叠式侧边栏:主要使用HTML+CSS有些许的JS
先是效果图,点击图标
HTML部分:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>side menu</title>
<link rel="stylesheet" href="../CSS/style.css">
<script src="../js/js.js"></script>
</head>
<body><!--c查下nav元素-->
<nav class="navbar">
<span class="open-side">
<a href="#" onclick="opensidemenu()">
<!--svg 以下为图标的样式 实现动画绘画 绘制出来的是矢量图 不像是像素图放大会模糊-->
<svg width="30" height="30