如何制作伸缩侧边栏？

一、html-body

二、CSS

三、JS

四、完整代码

五、效果展示

一、html-body

侧边栏的伸缩需要用户触发事件，这里使用button为例，用户点击按钮实现侧边栏的打开和关闭。

<body><!-- 按钮，可以用文字、图片等作为事件源，我选用一张图片，你可以用简单的文字替换 --><button class="leftbar-btn" id="leftbar-btn" onclick="toggleNav()"><img src="../../../img/beijing-open.png" alt="点击打开教程"></button><!-- 左侧侧边栏 --><div class="leftbar" id="leftbar"><!-- 我这里放一个视频为例，你可以只放一个简单的<p></p> --><videoid="video-page1"class="video-page1"controlspreload="auto"poster="../../../img/cover.png"><source src="../../../img/video_test.webm" type="video/webm" /><source src="../../../img/video_test.mp4" type="video/mp4" /><p class="vjs-no-js">请更新您的浏览器版本</p></div>
</body>

二、CSS

<style>body {font-family: 'Arial', sans-serif;margin: 0;padding: 0;background-image: url("../../../img/beijing-background.png");background-position: 50% 13%;}.leftbar-btn {position: fixed; /*设置按钮位置可变 */left: 0; top: 0; /*初始化按钮位置 */border: none;background: none;padding: 6px;transition: 1s; /*过渡效果，值需要与侧边栏的相同，以便紧挨移动*/}.leftbar-btn img { /*按钮中图片大小*/width: 77px;height: 77px;}.leftbar {width: 0; /*由于是左侧侧边栏，所以width先初始化为0*/height: 100%;position: fixed; /*设置按钮位置可变 */z-index: 1; /*设置堆叠顺序，侧边栏高于body*/top: 0; left: 0; /*初始化侧边栏位置 */background-color: rgba(255, 255, 255, 0.5);border-radius: 0px 8px 8px 0px;overflow-x: hidden; /*设置当内容溢出块级元素的左边缘和右边缘时显示的内容，溢出则隐藏*/transition: 1s; /*值需要与按钮的相同*/}.video-page1 {width: 100%;height: 50%;position: absolute;bottom: 10%;}
</style>

position: relative; 和 position: absolute; 是 CSS 中两种不同的定位属性，它们在元素定位和布局上有着不同的作用。

position: relative;：
- 当一个元素的 position 属性设置为 relative 时，它会相对于其正常位置进行定位。
- 设置了 position: relative; 的元素仍然占据文档流中的位置，不会脱离文档流。
- 如果对这个元素设置了 top、bottom、left、right 属性，则元素将相对于其自身的位置进行偏移，但不会影响其他元素的布局。
position: absolute;：
- 当一个元素的 position 属性设置为 absolute 时，它会相对于最近的已定位祖先元素进行定位，如果没有已定位的祖先元素，则相对于最初的包含块（通常是 <html> 元素）进行定位。
- 设置了 position: absolute; 的元素会脱离文档流，不再占据原来的位置，因此不会对其他元素的布局产生影响。
- 对于 position: absolute; 元素，可以通过设置 top、bottom、left、right 属性来确定其在包含块中的位置，这些属性是相对于最近的已定位祖先元素的。

总的来说，position: relative; 会相对于自身的原始位置进行定位，而 position: absolute; 则会相对于最近的已定位祖先元素进行定位，如果没有已定位的祖先元素，则相对于最初的包含块进行定位。

三、JS

<script>//侧边栏打开时的widthvar leftbarWidth = "50%";function toggleNav() {//通过ID获取侧边栏、按钮、元素、视频元素var leftbar = document.getElementById("leftbar")var leftbarbtn = document.getElementById("leftbar-btn")var video = document.getElementById("video-page1"); //获取视频元素是为了实现关闭侧边栏时停止播放做准备//关闭侧边栏if (leftbar.style.width === leftbarWidth) {//如果侧边栏的宽度=我们设置的侧边栏的宽度leftbarWidthleftbar.style.width = "0";//设置侧边栏width=0leftbarbtn.innerHTML = '<img src="../../../img/beijing-open.png" alt="点击打开教程">'//切换按钮中的图片leftbarbtn.style.left = "0";//移动按钮video.pause();//实现视频暂停播放} else {//打开侧边栏leftbar.style.width = leftbarWidth;//设置侧边栏width=leftbarWidthleftbarbtn.innerHTML = '<img src="../../../img/beijing-close.png" alt="点击关闭">'//切换按钮中的图片leftbarbtn.style.left = leftbarWidth;//移动按钮}}
</script>

四、完整代码

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>伸缩侧边栏</title>
<style>body {font-family: 'Arial', sans-serif;margin: 0;padding: 0;background-image: url("../../../img/beijing-background.png");background-position: 50% 13%;}.leftbar-btn {position: fixed; /*设置按钮位置可变 */left: 0; top: 0; /*初始化按钮位置 */border: none;background: none;padding: 6px;transition: 1s; /*过渡效果，值需要与侧边栏的相同，以便紧挨移动*/}.leftbar-btn img { /*按钮中图片大小*/width: 77px;height: 77px;}.leftbar {width: 0; /*由于是左侧侧边栏，所以width先初始化为0*/height: 100%;position: fixed; /*设置按钮位置可变 */z-index: 1; /*设置堆叠顺序，侧边栏高于body*/top: 0; left: 0; /*初始化侧边栏位置 */background-color: rgba(255, 255, 255, 0.5);border-radius: 0px 8px 8px 0px;overflow-x: hidden; /*设置当内容溢出块级元素的左边缘和右边缘时显示的内容，溢出则隐藏*/transition: 1s; /*值需要与按钮的相同*/}.video-page1 {width: 100%;height: 50%;position: absolute;bottom: 10%;}
</style>
</head>
<body><!-- 按钮，可以用文字、图片等作为事件源，我选用一张图片，你可以用简单的文字替换 --><button class="leftbar-btn" id="leftbar-btn" onclick="toggleNav()"><img src="../../../img/beijing-open.png" alt="点击打开教程"></button><!-- 左侧侧边栏 --><div class="leftbar" id="leftbar"><!-- 我这里放一个视频为例，你可以只放一个简单的<p></p> --><videoid="video-page1"class="video-page1"controlspreload="auto"poster="../../../img/cover.png"><source src="../../../img/video_test.webm" type="video/webm" /><source src="../../../img/video_test.mp4" type="video/mp4" /><p class="vjs-no-js">请更新您的浏览器版本</p></div>
</body>
<script>//侧边栏打开时的widthvar leftbarWidth = "50%";function toggleNav() {//通过ID获取侧边栏、按钮、元素、视频元素var leftbar = document.getElementById("leftbar")var leftbarbtn = document.getElementById("leftbar-btn")var video = document.getElementById("video-page1"); //获取视频元素是为了实现关闭侧边栏时停止播放做准备//关闭侧边栏if (leftbar.style.width === leftbarWidth) {//如果侧边栏的宽度=我们设置的侧边栏的宽度leftbarWidthleftbar.style.width = "0";//设置侧边栏width=0leftbarbtn.innerHTML = '<img src="../../../img/beijing-open.png" alt="点击打开教程">'//切换按钮中的图片leftbarbtn.style.left = "0";//移动按钮video.pause();//实现视频暂停播放} else {//打开侧边栏leftbar.style.width = leftbarWidth;//设置侧边栏width=leftbarWidthleftbarbtn.innerHTML = '<img src="../../../img/beijing-close.png" alt="点击关闭">'//切换按钮中的图片leftbarbtn.style.left = leftbarWidth;//移动按钮}}
</script>
</html>