侧边栏滑动动画是通过javascript函数实现的动画效果，
    而侧边栏的样式则由CSS来做。

    JS部分：
    实现点击滑动的动画效果

    1. <script type="text/javascript"> 
    2. <%--侧边栏滑动动画是通过js函数实现的动画效果--%>
    3.     let arrow = document.querySelectorAll(".arrow");
    4.     for (var i = 0; i < arrow.length; i++) {
    5.         arrow[i].addEventListener("click", (e)=>{
    6.             let arrowParent = e.target.parentElement.parentElement;
    7.             arrowParent.classList.toggle("showMenu");
    8.         });
    9.     }
    11.     let sidebar = document.querySelector(".sidebar");
    12.     let sidebarBtn = document.querySelector(".bx-menu");
    13.     console.log(sidebarBtn);
    14.     sidebarBtn.addEventListener("click", ()=>{
    15.         sidebar.classList.toggle("close");
    16.     });
    17. </script>

    HTML部分：其中可以滑动的内容放在

    标签中，我已经将section之前的公共内容单独提取到了这个html文件中，实现重用，用动作导入。

    1. <html>
    2. <head>
    3.     <meta name="viewport" content="width=device-width, initial-scale=1">
    4.     <!-- 包含 bootstrap 样式表 -->
    5.     <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css">
    6.     <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
    7.     <link rel="stylesheet" href="/css/style.css">
    8.     <!-- Boxiocns CDN Link -->
    9.     <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
    10.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    11.     <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css">
    12.     <link rel="stylesheet" href="/css/button.css">
    13.     <style type="text/css">
    14.         button {
    15.             width: 56px;
    16.             height: 37px;
    17.             padding: 7px;
    18.             background-color: #255072;
    19.             border-color: #357ebd;
    20.             color: #fff;
    21.             border-radius: 28px;
    22.             text-align: center;
    23.             vertical-align: middle;
    24.             border: 0px solid transparent;
    25.             font-weight: 900;
    26.             font-size: 115%;
    27.         }
    28.     </style>
    29. </head>
    30. <body>
    31. <div class="sidebar">
    32.     <div class="logo-details">
    33.         <i class='bx bxl-c-plus-plus'></i>
    34.         <span class="logo_name">你好,用户</span>
    35.     </div>
    36.     <ul class="nav-links">
    37.         <li>
    38.             <a href="/ListStudentServlet?index=1">
    39.                 <i class='bx bx-grid-alt' ></i>
    40.                 <span class="link_name">UserSystem</span>
    41.             </a>
    42.             <ul class="sub-menu blank">
    43.                 <li><a class="link_name" href="#">Category</a></li>
    44.             </ul>
    45.         </li>
    46.         <li>
    47.             <div class="iocn-link">
    48.                 <a href="#">
    49.                     <i class='bx bx-collection' ></i>
    50.                     <span class="link_name">FileSystem</span>
    51.                 </a>
    52.                 <i class='bx bxs-chevron-down arrow' ></i>
    53.             </div>
    54.             <ul class="sub-menu">
    55.                 <li><a class="link_name" href="#">FileSystem</a></li>
    56.                 <li><a href="/ListFileServlet?index=1">MyFile</a></li>
    57.             </ul>
    58.         </li>
    59.         <li>
    60.             <div class="iocn-link">
    61.                 <a href="#">
    62.                     <i class='bx bx-book-alt' ></i>
    63.                     <span class="link_name">TaskSystem</span>
    64.                 </a>
    65.                 <i class='bx bxs-chevron-down arrow' ></i>
    66.             </div>
    67.             <ul class="sub-menu">
    68.                 <li><a class="link_name" href="#">Posts</a></li>
    69.                 <li><a href="/querymenu.jsp">MyTask</a></li>
    70.                 <li><a href="#">Login Form</a></li>
    71.                 <li><a href="#">Card Design</a></li>
    72.             </ul>
    73.         </li>
    74.         <li>
    75.             <a href="#">
    76.                 <i class='bx bx-pie-chart-alt-2' ></i>
    77.                 <span class="link_name">Analytics</span>
    78.             </a>
    79.             <ul class="sub-menu blank">
    80.                 <li><a class="link_name" href="#">Analytics</a></li>
    81.             </ul>
    82.         </li>
    83.         <li>
    84.             <a href="#">
    85.                 <i class='bx bx-line-chart' ></i>
    86.                 <span class="link_name">Chart</span>
    87.             </a>
    88.             <ul class="sub-menu blank">
    89.                 <li><a class="link_name" href="#">Chart</a></li>
    90.             </ul>
    91.         </li>
    92.         <li>
    93.             <div class="iocn-link">
    94.                 <a href="#">
    95.                     <i class='bx bx-plug' ></i>
    96.                     <span class="link_name">Plugins</span>
    97.                 </a>
    98.                 <i class='bx bxs-chevron-down arrow' ></i>
    99.             </div>
    100.             <ul class="sub-menu">
    101.                 <li><a class="link_name" href="#">Plugins</a></li>
    102.                 <li><a href="#">UI Face</a></li>
    103.                 <li><a href="#">Pigments</a></li>
    104.                 <li><a href="#">Box Icons</a></li>
    105.             </ul>
    106.         </li>
    107.         <li>
    108.             <a href="#">
    109.                 <i class='bx bx-compass' ></i>
    110.                 <span class="link_name">Explore</span>
    111.             </a>
    112.             <ul class="sub-menu blank">
    113.                 <li><a class="link_name" href="#">Explore</a></li>
    114.             </ul>
    115.         </li>
    116.         <li>
    117.             <a href="#">
    118.                 <i class='bx bx-history'></i>
    119.                 <span class="link_name">History</span>
    120.             </a>
    121.             <ul class="sub-menu blank">
    122.                 <li><a class="link_name" href="#">History</a></li>
    123.             </ul>
    124.         </li>
    125.         <li>
    126.             <a href="#">
    127.                 <i class='bx bx-cog' ></i>
    128.                 <span class="link_name">Setting</span>
    129.             </a>
    130.             <ul class="sub-menu blank">
    131.                 <li><a class="link_name" href="#">Setting</a></li>
    132.             </ul>
    133.         </li>
    134.         <li>
    135.             <div class="profile-details">
    136.                 <div class="profile-content">
    137.                     <img src="images/22.png" alt="profile">
    138.                 </div>
    139.                 <div class="name-job">
    140.                     <div class="profile_name">Prem Shahi</div>
    141.                     <div class="job">Web Desginer</div>
    142.                 </div>
    143.                 <i class='bx bx-log-out' ></i>
    144.             </div>
    145.         </li>
    146.     </ul>
    147. </div>
    148.   <section class="home-section">
    149.     <div class="home-content">
    150.         <i class='bx bx-menu' ></i>
    151.         <span class="text">
    152.         <div class="div-style">
    153.          这里是标题，随动画一起滑动
    154.       </div>
    155.       </span>
    156.     </div>
    158.     需要滑动的内容请放在这里
    159. </section>
    160. </body>
    161. </html>

    实现重用后的html文件：

    1. <jsp:include page="../../demo.jsp" flush="true"/>
    3. <section class="home-section">
    4.     <div class="home-content">
    5.         <i class='bx bx-menu' ></i>
    6.         <span class="text">
    7.         <div class="div-style">
    8.          这里是标题
    9.       </div>
    10.       </span>
    11.     </div>
    13. 需要滑动的内容请放在这里
    14. </section>

    CSS部分：
    还需要在html中导入：https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css

    1. /* Google Fonts Import Link */
    2. @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
    3. *{
    4.   margin: 0;
    5.   padding: 0;
    6.   box-sizing: border-box;
    7.   font-family: 'Poppins', sans-serif;
    8. }
    9. .white{
    10.   background-color: #e4e9f7;
    11. }
    12. p input{
    13.   width: 50px;
    14. }
    15. .div-style{
    16.   background: #11101d;
    17.   height: 59px;
    18.   width: 2000px;
    19.   padding: 25px;
    20.   margin: -8px 0 -1px;
    21. }
    22. .p-style{
    23.   color: rgb(255,238,0);font-size: 15px;font-size: 15px;margin: -3px 0 10px;
    24. }
    25. .sidebar{
    26.   position: fixed;
    27.   top: 0;
    28.   left: 0;
    29.   height: 100%;
    30.   width: 260px;
    31.   background: #11101d;
    32.   z-index: 100;
    33.   transition: all 0.5s ease;
    34. }
    35. .sidebar.close{
    36.   width: 78px;
    37. }
    38. .sidebar .logo-details{
    39.   height: 60px;
    40.   width: 100%;
    41.   display: flex;
    42.   align-items: center;
    43. }
    44. .sidebar .logo-details i{
    45.   font-size: 30px;
    46.   color: #fff;
    47.   height: 50px;
    48.   min-width: 78px;
    49.   text-align: center;
    50.   line-height: 50px;
    51. }
    52. .sidebar .logo-details .logo_name{
    53.   font-size: 22px;
    54.   color: #fff;
    55.   font-weight: 600;
    56.   transition: 0.3s ease;
    57.   transition-delay: 0.1s;
    58. }
    59. .sidebar.close .logo-details .logo_name{
    60.   transition-delay: 0s;
    61.   opacity: 0;
    62.   pointer-events: none;
    63. }
    64. .sidebar .nav-links{
    65.   height: 100%;
    66.   padding: 30px 0 150px 0;
    67.   overflow: auto;
    68. }
    69. .sidebar.close .nav-links{
    70.   overflow: visible;
    71. }
    72. .sidebar .nav-links::-webkit-scrollbar{
    73.   display: none;
    74. }
    75. .sidebar .nav-links li{
    76.   position: relative;
    77.   list-style: none;
    78.   transition: all 0.4s ease;
    79. }
    80. .sidebar .nav-links li:hover{
    81.   background: #1d1b31;
    82. }
    83. .sidebar .nav-links li .iocn-link{
    84.   display: flex;
    85.   align-items: center;
    86.   justify-content: space-between;
    87. }
    88. .sidebar.close .nav-links li .iocn-link{
    89.   display: block
    90. }
    91. .sidebar .nav-links li i{
    92.   height: 50px;
    93.   min-width: 78px;
    94.   text-align: center;
    95.   line-height: 50px;
    96.   color: #fff;
    97.   font-size: 20px;
    98.   cursor: pointer;
    99.   transition: all 0.3s ease;
    100. }
    101. .sidebar .nav-links li.showMenu i.arrow{
    102.   transform: rotate(-180deg);
    103. }
    104. .sidebar.close .nav-links i.arrow{
    105.   display: none;
    106. }
    107. .sidebar .nav-links li a{
    108.   display: flex;
    109.   align-items: center;
    110.   text-decoration: none;
    111. }
    112. .sidebar .nav-links li a .link_name{
    113.   font-size: 18px;
    114.   font-weight: 400;
    115.   color: #fff;
    116.   transition: all 0.4s ease;
    117. }
    118. .sidebar.close .nav-links li a .link_name{
    119.   opacity: 0;
    120.   pointer-events: none;
    121. }
    122. .sidebar .nav-links li .sub-menu{
    123.   padding: 6px 6px 14px 80px;
    124.   margin-top: -10px;
    125.   background: #1d1b31;
    126.   display: none;
    127. }
    128. .sidebar .nav-links li.showMenu .sub-menu{
    129.   display: block;
    130. }
    131. .sidebar .nav-links li .sub-menu a{
    132.   color: #fff;
    133.   font-size: 15px;
    134.   padding: 5px 0;
    135.   white-space: nowrap;
    136.   opacity: 0.6;
    137.   transition: all 0.3s ease;
    138. }
    139. .sidebar .nav-links li .sub-menu a:hover{
    140.   opacity: 1;
    141. }
    142. .sidebar.close .nav-links li .sub-menu{
    143.   position: absolute;
    144.   left: 100%;
    145.   top: -10px;
    146.   margin-top: 0;
    147.   padding: 10px 20px;
    148.   border-radius: 0 6px 6px 0;
    149.   opacity: 0;
    150.   display: block;
    151.   pointer-events: none;
    152.   transition: 0s;
    153. }
    154. .sidebar.close .nav-links li:hover .sub-menu{
    155.   top: 0;
    156.   opacity: 1;
    157.   pointer-events: auto;
    158.   transition: all 0.4s ease;
    159. }
    160. .sidebar .nav-links li .sub-menu .link_name{
    161.   display: none;
    162. }
    163. .sidebar.close .nav-links li .sub-menu .link_name{
    164.   font-size: 18px;
    165.   opacity: 1;
    166.   display: block;
    167. }
    168. .sidebar .nav-links li .sub-menu.blank{
    169.   opacity: 1;
    170.   pointer-events: auto;
    171.   padding: 3px 20px 6px 16px;
    172.   opacity: 0;
    173.   pointer-events: none;
    174. }
    175. .sidebar .nav-links li:hover .sub-menu.blank{
    176.   top: 50%;
    177.   transform: translateY(-50%);
    178. }
    179. .sidebar .profile-details{
    180.   position: fixed;
    181.   bottom: 0;
    182.   width: 260px;
    183.   display: flex;
    184.   align-items: center;
    185.   justify-content: space-between;
    186.   background: #1d1b31;
    187.   padding: 6px 0;
    188.   transition: all 0.5s ease;
    189. }
    190. .sidebar.close .profile-details{
    191.   background: none;
    192. }
    193. .sidebar.close .profile-details{
    194.   width: 78px;
    195. }
    196. .sidebar .profile-details .profile-content{
    197.   display: flex;
    198.   align-items: center;
    199. }
    200. .sidebar .profile-details img{
    201.   height: 52px;
    202.   width: 52px;
    203.   object-fit: cover;
    204.   border-radius: 16px;
    205.   margin: 0 14px 0 12px;
    206.   background: #1d1b31;
    207.   transition: all 0.5s ease;
    208. }
    209. .sidebar.close .profile-details img{
    210.   padding: 10px;
    211. }
    212. .sidebar .profile-details .profile_name,
    213. .sidebar .profile-details .job{
    214.   color: #fff;
    215.   font-size: 18px;
    216.   font-weight: 500;
    217.   white-space: nowrap;
    218. }
    219. .sidebar.close .profile-details i,
    220. .sidebar.close .profile-details .profile_name,
    221. .sidebar.close .profile-details .job{
    222.   display: none;
    223. }
    224. .sidebar .profile-details .job{
    225.   font-size: 12px;
    226. }
    227. .home-section{
    228.   position: fixed;
    229.   background: #E4E9F7;
    230.   height: 100vh;
    231.   left: 260px;
    232.   width: calc(100% - 260px);
    233.   transition: all 0.5s ease;
    234. }
    235. .sidebar.close ~ .home-section{
    236.   left: 78px;
    237.   width: calc(100% - 78px);
    238. }
    239. .home-section .home-content{
    240.   height: 60px;
    241.   display: flex;
    242.   align-items: center;
    243. }
    244. .home-section .home-content .bx-menu,
    245. .home-section .home-content .text{
    246.   color: #11101d;
    247.   font-size: 35px;
    248. }
    249. .home-section .home-content .bx-menu{
    250.   margin: 0 15px;
    251.   cursor: pointer;
    252. }
    253. .home-section .home-content .text{
    254.   font-size: 26px;
    255.   font-weight: 600;
    256. }

    遇到的问题
    css部分中的.home-section部分是用来控制section标签的样式的，其中的position属性用来规定标签内容的位置，原本是设定为relative的，（生成相对定位的元素，相对于其正常位置进行定位。因此，”left:20” 会向元素的 LEFT 位置添加 20 像素。），但在实际使用中会使得整个页面的外边框变宽导致浏览器页面出现左右滑动蓝，最后导致在侧边栏缩回的时候刷新浏览器，侧边栏会挡住原本的滑动按钮：1.png
    正常应该为：2.png
    因为外轮廓太大，底部出现滑动栏：
    3.png
    解决方法：
    position:fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。
    定死元素相对浏览器窗口的位置，不会随着画面的滚动而改变。
    元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
    将position的属性该为fixed后问题解决，同时左右滑动栏也消失了，画面边框宽度也正常了：

    3.png
    原因分析：relative是用相对位置进行定位的，原本设定中的left可能太大导致右边界面溢出，浏览器刷新时无法回到正常位置，通过fixed属性规定定死标签块相对浏览器窗口的位置，元素不会随着画面的滚动而改变，可以在一定程度上解决这个问题，但缺点可能fixed没有relative那么灵活。