目录
一、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> -->
<video
id="video-page1"
class="video-page1"
controls
preload="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>
//侧边栏打开时的width
var 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) {//如果侧边栏的宽度=我们设置的侧边栏的宽度leftbarWidth
leftbar.style.width = "0";//设置侧边栏width=0
leftbarbtn.innerHTML = '<img src="../../../img/beijing-open.png" alt="点击打开教程">'//切换按钮中的图片
leftbarbtn.style.left = "0";//移动按钮
video.pause();//实现视频暂停播放
} else {//打开侧边栏
leftbar.style.width = leftbarWidth;//设置侧边栏width=leftbarWidth
leftbarbtn.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> -->
<video
id="video-page1"
class="video-page1"
controls
preload="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>
//侧边栏打开时的width
var 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) {//如果侧边栏的宽度=我们设置的侧边栏的宽度leftbarWidth
leftbar.style.width = "0";//设置侧边栏width=0
leftbarbtn.innerHTML = '<img src="../../../img/beijing-open.png" alt="点击打开教程">'//切换按钮中的图片
leftbarbtn.style.left = "0";//移动按钮
video.pause();//实现视频暂停播放
} else {//打开侧边栏
leftbar.style.width = leftbarWidth;//设置侧边栏width=leftbarWidth
leftbarbtn.innerHTML = '<img src="../../../img/beijing-close.png" alt="点击关闭">'//切换按钮中的图片
leftbarbtn.style.left = leftbarWidth;//移动按钮
}
}
</script>
</html>五、效果展示
伸缩侧边栏
