如何制作伸缩侧边栏？

最新推荐文章于 2024-05-13 09:58:18 发布
最新推荐文章于 2024-05-13 09:58:18 发布
阅读量738 收藏 8
点赞数 8
分类专栏： Web 文章标签： 前端 javascript html css 侧边伸缩栏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/naozibuok/article/details/137207480
版权

目录

一、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> -->
        <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 中两种不同的定位属性，它们在元素定位和布局上有着不同的作用。

  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

<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>

五、效果展示 

伸缩侧边栏

脑子不好真君
关注
  • 8
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
html侧边栏如何shubie,div+css侧边栏怎么写
weixin_42297519的博客
06-27 1895
div+css侧边栏怎么写网页中侧边栏是很常用的功能，尤其是移动端的使用，更是很频繁，今天就来介绍一下如何使用纯div+css实现侧边栏效果。实现思路如下：1、使用input和label标签，将input隐藏，用css美化label标签实现打开关闭侧边栏按钮。2、当input选中时使用伪类选择器:checked选择它的兄弟元素aside将它显示出来即可。(相关课程推荐：css视频教程)/*隐藏ch...
前端开发实习（三）侧边可伸缩导航栏的实现
孙霸天的专栏
07-23 8206
上一次讲了表单和地图联动的效果，这一次老板要求做一个侧边的导航栏，要看上去高大上！！！OK咱们继续，毕竟老板的要求是最高的指令。 首先分析一下怎么做： 1.侧边的导航栏需要可伸缩、隐藏（用Jquery实现是最快的） 2.需要在导航栏里面添加按钮实现onclick事件（编写相关方法） 3.标题需要在侧边栏里 这么一想其实还是比较简单的，前端学习就我现在的感受是，必须要有扎实的基础和还不错的...
HTML侧边导航栏
热门推荐
jakelihua
10-19 1万+
本文用最简洁的语言，来教会读者，如果用html+css来制作，侧边导航栏，本案例以手机商城中的部分为例子来制作。
推荐使用 React Sidebar：一款高效响应式的侧边栏组件
最新发布
gitblog_00019的博客
05-13 548
推荐使用 React Sidebar：一款高效响应式的侧边栏组件 项目地址:https://gitcode.com/balloob/react-sidebar React Sidebar 是一个专为 React 0.14+ 设计的侧边栏组件，它提供了丰富且实用的功能，适用于各种网页和移动应用开发。 项目介绍 React Sidebar 具有滑动和固定两种模式，能够像原生移动应用那样通过触摸操作来开...
基于html和CSS3制作简单侧边导航栏
09-24
本篇文章给大家分享基于html和CSS3制作简单侧边导航栏，效果简单大方，需要的朋友可以从参考下
侧边栏php,侧边栏可伸缩效果
weixin_32637935的博客
03-11 374
这次给大家带来侧边栏可伸缩效果，实现侧边栏可伸缩效果的注意事项有哪些，下面就是实战案例，一起来看一下。jquery实现点击侧边栏伸缩效果。点击收缩，侧边栏向左收缩，显示按钮显示；点击显示按钮，显示按钮向左收缩，侧边栏显示。具体代码如下：*{margin: 0;padding: 0;}#box{width: 100%;height: 100%;}#left{width: 200px;float: l...
html及css实现侧边栏效果
qq_45429152的博客
02-10 7028
html及css实现侧边栏效果
【前端WEB】2、使用HTML+CSS+JS实现网页侧边导航栏效果（原创含源码）
weixin_52938153的博客
12-23 5463
侧边导航栏是现代网页设计中常用的一种元素，它通过优化页面结构，使用户能够轻松访问网站的不同部分。我们将通过具体的例子来展示如何创建一个具有良好用户界面和交互体验的侧边导航栏。以上就是今天要讲的内容，本文仅仅简单介绍了HTML前端页面的侧边栏的使用，而CSS提供了具体的样式，可以自己进行调节，JS实现了当用户点击侧边按钮即跳转。如需其他示例或有问题欢迎评论！！本人看到都会回复。
jquery实现侧边栏左右伸缩效果的示例
10-18
下面小编就为大家分享一篇jquery实现侧边栏左右伸缩效果的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
html+css侧边伸缩导航栏
01-26
最后，对于移动设备，我们可能需要将侧边栏在默认状态下隐藏，只在用户点击按钮时显示。这可以通过在媒体查询中设置 `display: none` 并在按钮被点击时切换显示状态来实现。 总结起来，创建一个 HTML+CSS 侧边伸缩...
仿VS的伸缩侧边栏
05-17
【仿VS的伸缩侧边栏】是一种设计模式，它借鉴了Visual Studio（VS）的界面布局特性，尤其是其可扩展和收缩的侧边栏功能。这种设计在许多开发工具和应用程序中非常常见，因为它提供了灵活的工作空间管理，让用户可以...
9种html5+css3隐藏侧边栏导航菜单动画效果
12-03
9种html5+css3隐藏侧边栏导航菜单动画效果
wpf 侧边栏
12-19
在Windows Presentation Foundation (WPF) 中，侧边栏是一种常见的用户界面元素，它通常用于放置导航菜单、工具栏或者设置选项。"wpf 侧边栏" 的实现可以通过多种方式，但根据描述中的 "使用ExpandPanel"，我们将...
jQuery手机侧边栏展开收缩菜单代码
06-24
在移动设备上，为了优化用户体验，侧边栏菜单已经成为一种常见的设计模式。"jQuery手机侧边栏展开收缩菜单代码"就是一个专门为手机端设计的交互组件，利用jQuery库和CSS3技术来实现。这个代码实现了一个功能完备的侧...
侧边栏(HTML+CSS+JS)
xiangxiongfly
04-04 1052
侧边栏(HTML+CSS+JS)
HTML+CSS系列实战之侧边栏的实现
m0_48375854的博客
11-04 4932
这里要实现一个：当鼠标经过某个位置时，其具体位置发生变化的效果。（仿小米侧边栏） 代码实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-wid
HTML+CSS系列实战之侧边栏的实现，2024前端大厂面试知识分享
2401_84166836的博客
04-07 244
T行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！指出JS的宿主对象和原生对象的区别，为什么扩展JS内置对象不是好的做法？有哪些内置对象和内置函数？引用类型和基本类型有什么区别？哪个是存在堆哪一个是存在栈上面的？跟C,Java中的this有什么区别？如何改变this的值？js的基本类型有哪些？事件委托（手写例子），事件冒泡和捕获，如何阻止冒泡？显示原型和隐式原型，手绘原型链，原型链是什么？实现继承的多种方式和优缺点。
html中关于侧边导航栏和导航栏的编写
xxxmou的博客
02-04 7572
关于侧边导航栏和下拉菜单纯css编写
可伸缩式侧边栏 vue2
04-12
可伸缩式侧边栏是一种常见的UI组件，它可以在网页或应用程序中提供一个侧边栏，用户可以通过点击按钮或拖动手柄来展开或收起。在Vue2中，可以使用Vue组件和一些CSS样式来实现可伸缩式侧边栏。 以下是一个简单的实现可伸缩式侧边栏的Vue2组件的示例： ```vue <template> <div class="sidebar-container"> <div class="sidebar" :class="{ 'sidebar-expanded': isExpanded }"> <!-- 侧边栏内容 --> </div> <button class="toggle-button" @click="toggleSidebar"> <!-- 切换按钮 --> </button> </div> </template> <script> export default { data() { return { isExpanded: false, // 控制侧边栏展开与收起的状态 }; }, methods: { toggleSidebar() { this.isExpanded = !this.isExpanded; }, }, }; </script> <style> .sidebar-container { display: flex; } .sidebar { width: 200px; /* 侧边栏的宽度 */ transition: width 0.3s ease; /* 添加过渡效果 */ } .sidebar-expanded { width: 300px; /* 展开状态下的宽度 */ } .toggle-button { /* 切换按钮的样式 */ } </style> ``` 在上述示例中，我们使用了一个`isExpanded`变量来控制侧边栏的展开与收起状态。点击切换按钮时，会调用`toggleSidebar`方法来改变`isExpanded`的值，从而实现侧边栏的展开与收起。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

脑子不好真君

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值