css + HTML 实现京东app左右拖动导航栏

css + HTML 实现京东app左右拖动导航栏
也可实现图片左右拖动（原理一样的）

京东app左右拖动导航栏效果：

图片左右拖动效果：

只写导航栏如下，因为图片原理一样

只需css定义两个盒子模型，一个父盒子showchose，一个子盒子showchose1

在父盒子中添加如下代码：

使盒子内溢出隐藏，块元素不能自动换行

overflow: hidden;position: relative;display: flex;flex-wrap: nowrap;overflow-x: auto;

子盒子被套在父盒子里即可

html引用：

<div class="showchose" id="showchose"><div  id="nav" ><div id="Chose1" class="showchose1"><b>精选配件</b></div><div id="Chose2" class="showchose1"><b>手机壳</b></div><div id="Chose4" class="showchose1"><b>充电器</b></div><div id="Chose3" class="showchose1"><b>耳机</b></div><div id="Chose3" class="showchose1"><b>手机贴膜</b></div><div id="Chose3" class="showchose1"><b>移动电源</b></div></div></div>

css + HTML 实现京东app左右拖动导航栏相关推荐

css+html模仿京东app底部导航栏
css+html模仿京东app底部导航栏完成效果如下: 上下滑动页面,底部导航栏一直存在,位置不变底部导航栏实现代码如下: 只需css写超简单代码重点是footer标签,其余标签是为和京东导航栏 ...
HBuilder开发旅游类APP(三) ----- 给APP添加底部导航栏(底部选项卡)
HBuilder开发旅游类APP(三) ----- 给APP添加底部导航栏(底部选项卡) 作者:班尼科本博文是本人原创,喜欢请给我点赞,转载请注明出处哦. 标签: 旅游 HBuilder H5+ M ...
uni app 手机端导航栏自定义
uni app 手机端导航栏自定义第一步:明确顶部导航栏的构成(手机自带的顶部菜单+开发的顶部菜单栏) 获取手机自带的顶部导航栏 <view class="navigation_ba ...
406day（京东案例顶部，导航栏练习）
<2018年11月14日>[连续406天] 标题:京东案例顶部,导航栏练习: 内容: <div class="J_event&qu ...
Android M App 永久隐藏导航栏的Solution
做项目,客户要求在App 中隐藏导航栏.这个比较简单,网上资料一大把. 现做下笔记. Android 隐藏导航栏, 有好几种办法: 1)修改系统级代码,使系统具有隐藏导航栏的功能: 这种实现方法可以参 ...
京东首页之nav导航栏、banner广告部分、footer备案号
项目回顾:上一篇博文主要讲了如何实现京东首页的页面顶部和Logo&搜索框部分: 里面主要知识:利用列表作划分鲜明的文字部分,相对定位和绝对定位去实现弹框效果. 今天我们这篇博文主要是简单介绍京 ...
Html 5/CSS 的学习（二） —— Bootstrap 导航栏
参考 Bootstrap 导航栏 0. 导航栏类别 (1)默认导航栏:class="navbar navbar-default": (2)响应式导航栏:要折叠的内容必须包裹在cla ...
android 自定义标签导航栏,自定义导航栏app下载-自定义导航栏（Custom Navigation Bar）安卓版v0.4.3-PC6安卓网...
自定义导航栏(Custom Navigation Bar)app是款非常好用的实用工具,自定义导航栏能让你自己设置个性的导航栏,再也不用为单调的导航栏而发愁,独特且唯一,感兴趣的朋友就来下载自定义导航 ...
uniapp实战项目（仿知识星球App) - - 自定义顶部导航栏和登录弹窗组件
实战项目名称:仿知识星球App 技术栈:前端 => uni-app ( 后端:Node.js + Mysql + Apollo + Graphql ) 已实现功能:微信登录,创建星球,内容管理, ...

css + HTML 实现京东app左右拖动导航栏

css + HTML 实现京东app左右拖动导航栏相关推荐

最新文章

热门文章