html页面左右滑动菜单效果的实现

最新推荐文章于 2024-04-28 14:57:52 发布
最新推荐文章于 2024-04-28 14:57:52 发布
阅读量587 收藏
点赞数 1
文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaoerbuyu1233/article/details/135999444
版权 

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: yellow; 
      padding: 0;
      margin: 0;
    }
    .container {
		padding:20px;
    }
    .left-menu {
      background-color: yellowgreen; 
      width: 0px; 
      position: absolute; 
      top: 0; 
      left: 0; 
      bottom: 0;
      transition: width .2s ease;
      overflow: auto;
      z-index: 1;
    }
    .content {
      position: absolute; 
      top: 0;
      bottom:0; 
      left:0; 
      right: 0;
      overflow: auto;
      /* z-index: 2; */
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

</head>
<body>
  Edit in JSFiddle Result JavaScript HTML CSS
<div class="container">
    <div class="left-menu">
      <p>做菜单内容</p>
      <p>做菜单内容</p>
      <p>做菜单内容</p>
      <p>做菜单内容</p>
      <p>做菜单内容</p>
      <p>做菜单内容</p>
      <p>做菜单内容</p>
      <p>做菜单内容</p>
      <p>做菜单内容</p>
      <p>做菜单内容</p>
      <p>做菜单内容</p>
      <p>做菜单内容</p>
      <p>做菜单内容</p>
      <p>做菜单内容</p>
      <p>做菜单内容</p>
      <p>做菜单内容</p>
      <p>做菜单内容</p>
      <p>做菜单内容</p>
      <p>做菜单内容</p>
      <p>做菜单内容</p>
    </div>
    <div class="content">
      <div style="margin-left: 20px;margin-top: 20px;">
        <p>正文12=========</p>
        <p>正文12=========</p>
        <p>正文12=========</p>
        <p>正文12=========</p>
        <p>正文12=========</p>
        <p>正文12=========</p>
        <p>正文12=========</p>
        <p>正文12=========</p>
        <p>正文内容===================</p>
        <p>正文内容===================</p>
        <p>正文内容===================</p>
        <p>正文内容===================</p>
        <p>正文内容===================</p>
        <p>正文内容===================</p>
        <p>正文内容===================</p>
        <p>正文内容===================</p>
        <p>正文内容===================</p>
        <p>正文内容===================</p>
        <p>正文内容===================</p>
        <p>正文内容===================</p>
        <p>正文内容===================</p>
        <p>正文内容===================</p>
        <p>正文内容===================</p>
      </div>
    </div>
  </div>
 
  <script>
    $(".content").on("click", function(e) {
	  if($(".left-menu").width() == 200) {
		$(".left-menu").width(0);
	  } else {
		$(".left-menu").width(200);
	  }
	});
  </script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: yellow; 
      padding: 0;
      margin: 0;
    }
    .container {

    }
    .left-menu {
      background-color: yellowgreen; 
      width: 200px; 
      position: absolute; 
      top: 0; 
      left: 0; 
      bottom: 0;
      right: auto;
      transition: width .2s ease;
      overflow: auto;
      z-index: 1;
    }
    .content {
      position: absolute; 
      top: 0;
      bottom:0; 
      left:0; 
      right: 0;
      overflow: auto;
      z-index: 2;
      transform: translate3d(0, 0, 0);
      width: auto;
      height: auto;
      background-color: yellow;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

</head>
<body>
  Edit in JSFiddle Result JavaScript HTML CSS
 <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.transit/0.9.12/jquery.transit.js'></script>
<div class="container">
    <div class="left-menu">
      <p>做菜单内容</p>
      <p>做菜单内容</p>
      <p>做菜单内容</p>
      <p>做菜单内容</p>
      <p>做菜单内容</p>
      <p>做菜单内容</p>
      <p>做菜单内容</p>
      <p>做菜单内容</p>
      <p>做菜单内容</p>
      <p>做菜单内容</p>
      <p>做菜单内容</p>
      <p>做菜单内容</p>
      <p>做菜单内容</p>
      <p>做菜单内容</p>
      <p>做菜单内容</p>
      <p>做菜单内容</p>
      <p>做菜单内容</p>
      <p>做菜单内容</p>
      <p>做菜单内容</p>
      <p>做菜单内容</p>
    </div>
    <div class="content">
      <div style="margin-top: 200px;">
        <p>正文内容===================</p>
        <p>正文内容===================</p>
        <p>正文内容===================</p>
        <p>正文内容===================</p>
        <p>正文内容===================</p>
        <p>正文内容===================</p>
        <p>正文内容===================</p>
        <p>正文内容===================</p>
        <p>正文内容===================</p>
        <p>正文内容===================</p>
        <p>正文内容===================</p>
        <p>正文内容===================</p>
        <p>正文内容===================</p>
        <p>正文内容===================</p>
        <p>正文内容===================</p>
      </div>
    </div>
  </div>
 
  <script>
    $(".content").on("click", function(e) {
  
  if($(".content").css("transform") == "matrix(1, 0, 0, 1, 0, 0)") {
    $(".content").transition({ 
      transform: 'translateX(200px)' 
    });  
  } else {
    $(".content").transition({ 
      transform: 'translateX(0px)' 
    });
  }

});
  </script>
</body>
</html>

https://fangjian0423.github.io/2015/10/29/html-left-right-menu/ 

感谢原作者

xiaoerbuyu1233
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
左侧菜单滑动效果html,jquery实现左右滑动菜单效果代码
weixin_36134871的博客
06-02 487
本文实例讲述了jquery实现左右滑动菜单效果代码。分享给大家供大家参考。具体如下：这里演示了三种背景颜色左右滑动jquery菜单导航效果，IE下有问题，本菜单使用了CSS3的部分属性，因此建议使用火狐或Chrome等浏览器获取最佳效果。当把鼠标移到菜单上的时候，对应菜单项的背景会变化，而且本菜单具有圆角的效果。运行效果截图如下：在线演示地址如下：具体代码如下：/p>"http://www....
html实现段落左右无缝滚动,javascript实现左右控制无缝滚动
weixin_42467533的博客
06-09 350
无缝滚动是项目中经常需要用到的一种特效，网上也有很多的示例代码，这里给大家分享的是一段比较简单实用的，而且兼容性也不错的代码，小伙伴们仔细研究下吧。html 代码：<html><head lang="en"><meta charset="UTF-8"><title>无缝滚动title><script src="js/0010.js"&gt...
html+css+JavaScript实现左右滑动区域添加自定义按钮实现移动
JackieDYH的博客
03-11 1065
选项可以使滚动动作更平滑，但这并不是在所有浏览器中都支持的。如果需要支持更多浏览器，可能需要使用polyfill或者自定义JavaScript动画来实现平滑滚动效果。要在一个左右可以滑动的容器中添加两个固定位置的按钮（左边一个、右边一个），你可以使用。，以便让按钮相对于该容器定位。这样，按钮就会随着容器一起滚动，但始终保持在容器的两侧。需要为按钮添加JavaScript来处理滚动动作。来定位按钮，同时为这个滑动容器设置。
学习使用html中table实现内容滚动下拉表头和左右滑动前四列固定不动的方法代码整理
最新发布
徊忆羽菲
04-28 1469
学习使用html中table实现内容滚动下拉表头和左右滑动前四列固定不动的方法代码整理
左右点击滚动
想飞的猪的博客
07-15 358
index.html &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&a
uni-app 加载长html文本 scroll-view 改上下滑动为左右翻页
qq_35638140的博客
02-06 840
uni-app 加载 长html文本 富文本 scroll-view 改上下滑动为左右翻页
走进移动端世界，实现左右菜单联动效果轻松上手（vue+better-scroll）
Shids_的博客
12-02 4637
走进移动端世界，实现左右菜单联动效果轻松上手（vue+better-scroll）
jquery实现左右滑动菜单效果代码
10-23
主要介绍了jquery实现左右滑动菜单效果代码,涉及jquery鼠标事件及页面元素动态变换的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
实现导航菜单左右滑动效果
04-03
实现导航菜单左右滑动效果，那么今天第一个示例我仍然使android-support-v4.jar来实现菜单左右滑动效果，关于这个包的信息，不再详述，大家可以查看官方文档。实现原理是使用android-support-v4.jar包中ViewPager...
html5手机端上下左右滑动菜单特效代码
03-20
HTML5手机端上下左右滑动菜单特效代码是针对移动设备设计的一种交互体验，它利用了HTML5的新特性以及JavaScript库jQuery的优势，结合CSS3的动画效果，为用户提供了一种便捷的导航方式。这种菜单通常被设计成侧边抽屉...
huadong.rar_导航菜单_左右滑动菜单_滑动菜单
09-22
这个菜单被描述为“导航菜单_左右滑动菜单_滑动菜单”，这意味着它是一种交互式设计，允许用户通过鼠标操作使菜单背景左右滑动，以展示不同的导航选项。这种效果常常用于网站的顶部，增强用户体验并提升网站的视觉...
手机左右滑动html
09-15
html页面左右互动的代码，随便写的，可能有些问题
HTML5全屏图文左右滑动切换特效.zip
07-04
HTML5全屏图文左右滑动切换特效是一款基于jQuery HTML5实现的全屏图文切换特效代码。本作品由【A5源码】收集整理，转载请注明出处！
html_html图片翻页_html实现翻页_html_
10-01
实现简单的web网页，支持图片翻页等功能，清晰明了。
QQ浏览器官网左右滑动效果菜单.zip
05-28
QQ浏览器官网的左右滑动效果菜单是一个典型的网页交互设计，主要利用了JavaScript库jQuery的高效功能来实现。这个效果使得用户在浏览网站时能够通过简单的手势操作，方便地查看和切换二级菜单的内容，提升了用户体验...
html如何去除左右滑条,移动端左右两边滑动，并且去除滚动条
weixin_42353258的博客
06-15 1825
html代码如下： 篮球 篮球 篮球 篮球CSS代码如下：.yyjx_row {width:100%;display: -webkit-box;justify-content: flex-start;align-items: center;white-space: nowrap;overflow-x: scro...
html商品左右滑动,利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
weixin_33982355的博客
06-07 1294
最近要做一个产品展示功能，由于产品比较多，一屏展示不完，所以想要做一个通过点击进行翻页的效果，在网上找了几个都不大好用，最后只能自己动手写了。效果如下所示：原理比较简单：将要滚动显示的区域的CSS的override设为hidden，宽度设成一个比较大的值，如4000px,然后每次点击上一页或下一页的按钮时，计算当前页数，如果已经到了最后一页，则回到第一页，滚动是通过控制div的left属性实现的，...
html5左右滑动页面效果实现
anai20010816的博客
05-04 2566
The Demo of h5 slider achiev by Myself 主要思路： 　　设置一个容器container，然后里面有几个page，获取到屏幕的宽度并将其赋值给page，然后container设置宽度为page.length*width; 　　这时所有的page将会一字排开，将body设置overflow:hidden; width:100%;这样的就只能显示一个...
html5左右滑动列表
weixin_34378922的博客
01-22 2321
<ul id="category"> <li>品牌团</li> <li>美体个护</li> <li>食品保健</li> <li>婴幼儿</li> <li>百货</li> <li>数码</li> </u...
html类似美团菜单滑动的效果左右联动
06-13
要实现类似美团菜单滑动的效果左右联动，可以使用一些现成的 JavaScript 插件或者自己编写 JavaScript 代码实现。 其中，比较常用的插件是 Swiper 和 Slick。这两个插件都支持左右联动，可以根据具体需求进行配置和使用。 如果你想自己编写 JavaScript 代码实现左右联动，可以通过监听滚动事件来实现。首先需要获取到左右两个滚动容器的 DOM 元素，并且监听它们的滚动事件。当其中一个滚动容器滚动时，计算它的滚动位置，然后将另一个滚动容器滚动到对应的位置即可。 具体实现方式可以参考以下示例代码： ```html <div class="container"> <div class="left-scroll"> <!-- 左侧滚动容器的内容 --> </div> <div class="right-scroll"> <!-- 右侧滚动容器的内容 --> </div> </div> <script> const container = document.querySelector('.container'); const leftScroll = document.querySelector('.left-scroll'); const rightScroll = document.querySelector('.right-scroll'); leftScroll.addEventListener('scroll', () => { const scrollLeft = leftScroll.scrollLeft; rightScroll.scrollTo(scrollLeft, 0); }); rightScroll.addEventListener('scroll', () => { const scrollLeft = rightScroll.scrollLeft; leftScroll.scrollTo(scrollLeft, 0); }); </script> ``` 以上代码中，通过监听左侧和右侧滚动容器的滚动事件，实现左右联动的效果。当左侧滚动容器滚动时，右侧滚动容器也会滚动到对应的位置；当右侧滚动容器滚动时，左侧滚动容器也会滚动到对应的位置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值