devbox
weixin_40725706
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

如何制作伸缩侧边栏？

作者：weixin_40725706 | 2024-04-01 20:07:35

赞

踩

如何制作伸缩侧边栏？

目录

一、html-body

二、CSS 

三、JS

四、完整代码

五、效果展示 

一、html-body

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

  1. <body>
  2.     <!-- 按钮，可以用文字、图片等作为事件源，我选用一张图片，你可以用简单的文字替换 -->
  3.     <button class="leftbar-btn" id="leftbar-btn" onclick="toggleNav()">
  4.         <img src="../../../img/beijing-open.png" alt="点击打开教程">
  5.     </button>
  6.  
  7.     <!-- 左侧侧边栏 -->
  8.     <div class="leftbar" id="leftbar">
  9.         <!-- 我这里放一个视频为例，你可以只放一个简单的<p></p> -->
  10.         <video
  11.         id="video-page1"
  12.         class="video-page1"
  13.         controls
  14.         preload="auto"
  15.         poster="../../../img/cover.png"
  16.         >
  17.         <source src="../../../img/video_test.webm" type="video/webm" />
  18.         <source src="../../../img/video_test.mp4" type="video/mp4" />
  19.         <p class="vjs-no-js">
  20.             请更新您的浏览器版本
  21.         </p>
  22.     </div>
  23. </body>

二、CSS 

  1. <style>
  2.     body {
  3.     font-family: 'Arial', sans-serif;
  4.     margin: 0;
  5.     padding: 0;
  6.     background-image: url("../../../img/beijing-background.png");
  7.     background-position: 50% 13%;
  8.     }
  9.     .leftbar-btn {
  10.         position: fixed; /*设置按钮位置可变 */
  11.         left: 0; top: 0; /*初始化按钮位置 */
  12.         border: none;
  13.         background: none;
  14.         padding: 6px;
  15.         transition: 1s; /*过渡效果，值需要与侧边栏的相同，以便紧挨移动*/
  16.     }
  17.     .leftbar-btn img { /*按钮中图片大小*/
  18.         width: 77px;
  19.         height: 77px;
  20.     }
  21.     .leftbar {
  22.         width: 0; /*由于是左侧侧边栏，所以width先初始化为0*/
  23.         height: 100%;
  24.         position: fixed; /*设置按钮位置可变 */
  25.         z-index: 1; /*设置堆叠顺序，侧边栏高于body*/
  26.         top: 0; left: 0; /*初始化侧边栏位置 */
  27.         background-color: rgba(255, 255, 255, 0.5);
  28.         border-radius: 0px 8px 8px 0px;
  29.         overflow-x: hidden; /*设置当内容溢出块级元素的左边缘和右边缘时显示的内容，溢出则隐藏*/
  30.         transition: 1s; /*值需要与按钮的相同*/
  31.     
  32.     }
  33.     .video-page1 {
  34.         width: 100%;
  35.         height: 50%;
  36.         position: absolute;
  37.         bottom: 10%;
  38.     }
  39. </style>

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

  1. position: relative;：

    • 当一个元素的 position 属性设置为 relative 时，它会相对于其正常位置进行定位。
    • 设置了 position: relative; 的元素仍然占据文档流中的位置，不会脱离文档流。
    • 如果对这个元素设置了 top、bottom、left、right 属性，则元素将相对于其自身的位置进行偏移，但不会影响其他元素的布局。

  2. position: absolute;：

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

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

三、JS

  1. <script>
  2.     //侧边栏打开时的width
  3.     var leftbarWidth = "50%";
  4.  
  5.     function toggleNav() {
  6.         //通过ID获取侧边栏、按钮、元素、视频元素
  7.         var leftbar = document.getElementById("leftbar")
  8.         var leftbarbtn = document.getElementById("leftbar-btn")
  9.         var video = document.getElementById("video-page1"); //获取视频元素是为了实现关闭侧边栏时停止播放做准备
  10.  
  11.         //关闭侧边栏
  12.         if (leftbar.style.width === leftbarWidth) {//如果侧边栏的宽度=我们设置的侧边栏的宽度leftbarWidth
  13.             leftbar.style.width = "0";//设置侧边栏width=0
  14.             leftbarbtn.innerHTML = '<img src="../../../img/beijing-open.png" alt="点击打开教程">'//切换按钮中的图片
  15.             leftbarbtn.style.left = "0";//移动按钮
  16.             video.pause();//实现视频暂停播放
  17.         } else {//打开侧边栏
  18.             leftbar.style.width = leftbarWidth;//设置侧边栏width=leftbarWidth
  19.             leftbarbtn.innerHTML = '<img src="../../../img/beijing-close.png" alt="点击关闭">'//切换按钮中的图片
  20.             leftbarbtn.style.left = leftbarWidth;//移动按钮
  21.         }
  22.     }
  23. </script>

四、完整代码

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>伸缩侧边栏</title>
  7. <style>
  8.     body {
  9.     font-family: 'Arial', sans-serif;
  10.     margin: 0;
  11.     padding: 0;
  12.     background-image: url("../../../img/beijing-background.png");
  13.     background-position: 50% 13%;
  14.     }
  15.     .leftbar-btn {
  16.         position: fixed; /*设置按钮位置可变 */
  17.         left: 0; top: 0; /*初始化按钮位置 */
  18.         border: none;
  19.         background: none;
  20.         padding: 6px;
  21.         transition: 1s; /*过渡效果，值需要与侧边栏的相同，以便紧挨移动*/
  22.     }
  23.     .leftbar-btn img { /*按钮中图片大小*/
  24.         width: 77px;
  25.         height: 77px;
  26.     }
  27.     .leftbar {
  28.         width: 0; /*由于是左侧侧边栏，所以width先初始化为0*/
  29.         height: 100%;
  30.         position: fixed; /*设置按钮位置可变 */
  31.         z-index: 1; /*设置堆叠顺序，侧边栏高于body*/
  32.         top: 0; left: 0; /*初始化侧边栏位置 */
  33.         background-color: rgba(255, 255, 255, 0.5);
  34.         border-radius: 0px 8px 8px 0px;
  35.         overflow-x: hidden; /*设置当内容溢出块级元素的左边缘和右边缘时显示的内容，溢出则隐藏*/
  36.         transition: 1s; /*值需要与按钮的相同*/
  37.     
  38.     }
  39.     .video-page1 {
  40.         width: 100%;
  41.         height: 50%;
  42.         position: absolute;
  43.         bottom: 10%;
  44.     }
  45. </style>
  46. </head>
  47. <body>
  48.     <!-- 按钮，可以用文字、图片等作为事件源，我选用一张图片，你可以用简单的文字替换 -->
  49.     <button class="leftbar-btn" id="leftbar-btn" onclick="toggleNav()">
  50.         <img src="../../../img/beijing-open.png" alt="点击打开教程">
  51.     </button>
  52.  
  53.     <!-- 左侧侧边栏 -->
  54.     <div class="leftbar" id="leftbar">
  55.         <!-- 我这里放一个视频为例，你可以只放一个简单的<p></p> -->
  56.         <video
  57.         id="video-page1"
  58.         class="video-page1"
  59.         controls
  60.         preload="auto"
  61.         poster="../../../img/cover.png"
  62.         >
  63.         <source src="../../../img/video_test.webm" type="video/webm" />
  64.         <source src="../../../img/video_test.mp4" type="video/mp4" />
  65.         <p class="vjs-no-js">
  66.             请更新您的浏览器版本
  67.         </p>
  68.     </div>
  69. </body>
  70. <script>
  71.     //侧边栏打开时的width
  72.     var leftbarWidth = "50%";
  73.  
  74.     function toggleNav() {
  75.         //通过ID获取侧边栏、按钮、元素、视频元素
  76.         var leftbar = document.getElementById("leftbar")
  77.         var leftbarbtn = document.getElementById("leftbar-btn")
  78.         var video = document.getElementById("video-page1"); //获取视频元素是为了实现关闭侧边栏时停止播放做准备
  79.  
  80.         //关闭侧边栏
  81.         if (leftbar.style.width === leftbarWidth) {//如果侧边栏的宽度=我们设置的侧边栏的宽度leftbarWidth
  82.             leftbar.style.width = "0";//设置侧边栏width=0
  83.             leftbarbtn.innerHTML = '<img src="../../../img/beijing-open.png" alt="点击打开教程">'//切换按钮中的图片
  84.             leftbarbtn.style.left = "0";//移动按钮
  85.             video.pause();//实现视频暂停播放
  86.         } else {//打开侧边栏
  87.             leftbar.style.width = leftbarWidth;//设置侧边栏width=leftbarWidth
  88.             leftbarbtn.innerHTML = '<img src="../../../img/beijing-close.png" alt="点击关闭">'//切换按钮中的图片
  89.             leftbarbtn.style.left = leftbarWidth;//移动按钮
  90.         }
  91.     }
  92. </script>
  93. </html>

五、效果展示 

伸缩侧边栏

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/349992
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号