本文主要是介绍如何制作伸缩侧边栏?,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
目录
一、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>
五、效果展示
伸缩侧边栏
这篇关于如何制作伸缩侧边栏?的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!