手机移动端可滚动的导航代码--css解决方案
来源:互联网 发布:u盘数据恢复后打不开 编辑:程序博客网 时间:2024/05/21 08:00
<head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>手机移动端可滚动的导航代码</title><script type="text/javascript" src="jquery-1.9.1.min.js"></script><style type="text/css">/*滚动水平导航栏 start*/.lr_nb{border-bottom:1px solid #E8E8E8;border-top:1px solid #E8E8E8;height:40px;line-height:40px;width:100%;position:absolute;background:#fff;padding: 0px 10px;box-sizing:border-box;z-index:1;max-width:1080px;opacity:1;top:0;-webkit-transition:.3s all;transition:.3s all}.lr_nb .slider_wrap.line{overflow:hidden;overflow-x:scroll;width:100%;-webkit-overflow-scrolling:touch;}.lr_nb .slider_wrap.line .item_cell{display:inline-block;margin: 0px 10px;;overflow:hidden;position:relative;}.lr_nb .slider_wrap.box{overflow:hidden;width:100%}.lr_nb .slider_wrap::-webkit-scrollbar{display:none}.lr_nb .wx_items{white-space:nowrap}.lr_nb .wx_items span{color:#666;font-size: 15px; white-space:nowrap;display:block;-webkit-tap-highlight-color:rgba(0,0,0,0);text-align:center;cursor:pointer}.lr_nb .wx_items .current span,.lr_nb .wx_items .current a:visited,.lr_nb .wx_items .current a:link,.lr_nb .wx_items .current a:hover,.lr_nb .wx_items .current a:focus{color:#4fbeab;}.lr_nb_after{height:40px;display:block;clear:both;}/*滚动水平导航栏 end*/</style></head><body><!--滚动水平导航栏 start--> <div class="lr_nb"> <div class="slider_wrap line"> <div class="wx_items"> <div class="item_cell current"> <span>类型一</span> </div> <div class="item_cell"> <span>类型二</span> </div> <div class="item_cell"> <span>类型三</span> </div> <div class="item_cell"> <span>类型四</span> </div> <div class="item_cell"> <span>类型五</span> </div> <div class="item_cell"> <span>类型六</span> </div> <div class="item_cell"> <span>类型七</span> </div> <div class="item_cell"> <span>类型八</span> </div> </div> </div></div><div class="lr_nb_after"></div><!--滚动水平导航栏 end--><script>$(function(){$(".wx_items .item_cell").click(function(){$(this).addClass('current').siblings().removeClass('current');});});</script></body></html>
1 0
- 手机移动端可滚动的导航代码--css解决方案
- 移动端的导航栏联动(滚动监听)
- 可循环滚动的导航栏
- 移动端滚动穿透解决方案
- css 移动端1px的解决方案
- jquerymobile实现手机导航条的滚动
- 手机触摸滚动导航
- 导航跟随滚动条置顶移动示例代码
- 手机端HTML如何去掉滚动条的解决方案
- div+css中如何将层随着滚动条的移动的初始位置固定在导航栏左下方
- 兼容手机的CSS导航栏样式
- 手机移动端左右滚动特效
- 移动端苹果手机 input的readonly 不起效解决方案
- 移动端滚动穿透问题完美解决方案
- CSS在移动端隐藏滚动条/自定义滚动条(scrollbar的各种属性)
- 移动端微信h5下ul实现横向滚动css代码
- 鼠标移动到图标上滚动代码 CSS
- 基于JQuery的Swiper插件实现移动手机端幻灯片切换(可在每一张幻灯片div中插入自定义的元素,代码简介,扩展性好。)
- SolrCloud原理介绍
- LVS负载均衡群集之NAT模型&&DR模型
- html5中audio标签在不同平台下的问题
- tomcat配置出现问题
- Junit4 整合 Spring
- 手机移动端可滚动的导航代码--css解决方案
- 51nod1119 机器人走方格 组合数学
- Android Studio 下载&快捷键一览
- Maven配置和打包以及使用Eclipse构建Maven项目
- React Native控件之Switch开关与Picker选择器组件讲解以及使用
- iOS开发 ☞ 上架常见问题
- httperf下载
- 面试:数组:产生随机数
- ContentProvider实例详解