mui横向滑动菜单
<style>
.mui-bar a {
color: #E02D26;
}
#topItem {
background: white;
border-bottom: 1px solid #EEEEEE;
}
.mui-slider .mui-segmented-control.mui-scroll-wrapper {
height: 40px;
}
.mui-slider .mui-segmented-control .mui-control-item {
line-height: 37px;
}
.mui-segmented-control.mui-scroll-wrapper .mui-control-item {
padding: 0 12px
}
.mui-slider .mui-segmented-control.mui-segmented-control-inverted .mui-control-item {
border-bottom: 2px solid white;
color: black;
}
.mui-slider .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
border-bottom: 2px solid #E02D26;
color: #E02D26;
font-weight: bold;
}
.mui-slider-group .mui-slider-item {
height: 0px;
}
</style>
<div id="slider" class="mui-slider">
<div id="topItem" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<div class="mui-scroll" id="top-scroll">
<a class='mui-control-item mui-active' href="#item1mobile">男装</a>
<a class='mui-control-item' href="#item2mobile">女装</a>
<a class='mui-control-item' href="#item3mobile">手机</a>
<a class='mui-control-item' href="#item4mobile">护肤</a>
<a class='mui-control-item' href="#item5mobile">护发</a>
<a class='mui-control-item' href="#item6mobile">电脑</a>
<a class='mui-control-item' href="#item7mobile">家具</a>
<a class='mui-control-item' href="#item8mobile">护理</a>
<a class='mui-control-item' href="#item9mobile">厨房</a>
<a class='mui-control-item' href="#item10mobile">卫浴</a>
<a class='mui-control-item' href="#item11mobile">幼儿</a>
<a class='mui-control-item' href="#item12mobile">童装</a>
<a class='mui-control-item' href="#item13mobile">零食</a>
<a class='mui-control-item' href="#item14mobile">运动</a>
<a class='mui-control-item' href="#item15mobile">手表</a>
<a class='mui-control-item' href="#item16mobile">内衣</a>
<a class='mui-control-item' href="#item17mobile">箱包</a>
<a class='mui-control-item' href="#item18mobile">书籍</a>
<a class='mui-control-item' href="#item19mobile">茶酒</a>
<a class='mui-control-item' href="#item20mobile">配件</a>
</div>
</div>
<!--勿删除以下代码,作用是保证顶部菜单动画-->
<div class="mui-slider-group" style="height: 0px;">
<div id="item1mobile" class="mui-slider-item mui-control-content mui-active"></div>
<div id="item2mobile" class="mui-slider-item mui-control-content"></div>
<div id="item3mobile" class="mui-slider-item mui-control-content"></div>
<div id="item4mobile" class="mui-slider-item mui-control-content"></div>
<div id="item5mobile" class="mui-slider-item mui-control-content"></div>
<div id="item6mobile" class="mui-slider-item mui-control-content"></div>
<div id="item7mobile" class="mui-slider-item mui-control-content"></div>
<div id="item8mobile" class="mui-slider-item mui-control-content"></div>
<div id="item9mobile" class="mui-slider-item mui-control-content"></div>
<div id="item10mobile" class="mui-slider-item mui-control-content"></div>
<div id="item11mobile" class="mui-slider-item mui-control-content"></div>
<div id="item12mobile" class="mui-slider-item mui-control-content"></div>
<div id="item13mobile" class="mui-slider-item mui-control-content"></div>
<div id="item14mobile" class="mui-slider-item mui-control-content"></div>
<div id="item15mobile" class="mui-slider-item mui-control-content"></div>
<div id="item16mobile" class="mui-slider-item mui-control-content"></div>
<div id="item17mobile" class="mui-slider-item mui-control-content"></div>
<div id="item18mobile" class="mui-slider-item mui-control-content"></div>
<div id="item19mobile" class="mui-slider-item mui-control-content"></div>
<div id="item20mobile" class="mui-slider-item mui-control-content"></div>
</div>
</div>
mui横向滑动菜单的更多相关文章
- Android 滑动菜单框架--SwipeMenuListView框架完全解析
SwipeMenuListView(滑动菜单) A swipe menu for ListView.--一个非常好的滑动菜单开源项目. Demo 一.简介 看了挺长时间的自定义View和事件分发,想找 ...
- bootstrap-简单实用的垂直手风琴滑动菜单列表特效
前端: <html lang="zh"> <head> <meta charset="UTF-8"> <meta ht ...
- html5手机端的点击弹出侧边滑动菜单代码
效果预览:http://hovertree.com/texiao/html5/19/ 本效果适用于移动设备,可以使用手机等浏览效果. 源码下载:http://hovertree.com/h/bjaf/ ...
- ionic教程之Win10环境下ionic+angular实现滑动菜单及列表
写博客,不容易,你们的评论和转载,就是我的动力,但请注明出处,隔壁老王的开发园:http://www.cnblogs.com/titibili/p/5124940.html 2016年1月11日 21 ...
- 横向滑动的HorizontalListView滑动指定位置的解决方法
项目中用到了自定义横向滑动的控件:HorizontalListView,点击其中一项,跳转到另外一个大图界面,大图界面也是HorizontalListView,想使用setSelection方法设定 ...
- UICollectionView 图片横向滑动居中偏移量的解决
1.在使用UICollectionView 来显示横向滑动图片的时候,cell与cell之间有间隙,每次滑动后cell都会向左偏移,在使用过这两个方法才解决每次向左偏移的部分. 2.使用方法前不要开启 ...
- Android 3D滑动菜单完全解析,实现推拉门式的立体特效
转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/10471245 在上一篇文章中,我们学习了Camera的基本用法,并借助它们编写了一 ...
- Android双向滑动菜单完全解析,教你如何一分钟实现双向滑动特效
转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/9671609 记得在很早之前,我写了一篇关于Android滑动菜单的文章,其中有一个 ...
- Android 学习笔记之AndBase框架学习(七) SlidingMenu滑动菜单的实现
PS:努力的往前飞..再累也无所谓.. 学习内容: 1.使用SlidingMenu实现滑动菜单.. SlidingMenu滑动菜单..滑动菜单在绝大多数app中也是存在的..非常的实用..Gith ...
随机推荐
- pycharm 头模板
#!/usr/local/bin/python3 # -*- coding: utf-8 -*- """ @author: Ray @contact: raylively ...
- 001_项目开源之_STM32激光雕刻机
我是标题:STM32激光雕刻机(开源免费) (一)首先感谢将离九歌 https://github.com/MaxwellXyao 提供的C8T6/GRBL的源码 (二)本设计开源(免费),请忽倒 ...
- 迭代加深 A* IDA* 初探
并没有有用的东西, 只是用来水的. 今天看搜索,想起来了A*和IDA* 看A*去了.... 啥玩意啊这是,他们代码为啥这么长??.... 看完了,...代码怎么写啊?? .....算了,直接看题吧 找 ...
- 【概率论】4-5:均值和中值(The Mean and the Median)
title: [概率论]4-5:均值和中值(The Mean and the Median) categories: - Mathematic - Probability keywords: - Me ...
- 系统信息的管理函数API
1.Windows系统信息 1.1获取系统版本: BOOL WINAPI GetVersionEx( __in_out LPOSVERSIONINFO lpVersionInfo ); lpVer ...
- Java并发指南8:AQS中的公平锁与非公平锁,Condtion
一行一行源码分析清楚 AbstractQueuedSynchronizer (二) 转自https://www.javadoop.com/post/AbstractQueuedSynchronizer ...
- pwn学习日记Day8 基础知识积累
知识杂项 aslr:是一种针对缓冲区溢出的安全保护技术,通过对堆.栈.共享库映射等线性区布局的随机化,通过增加攻击者预测目的地址的难度,防止攻击者直接定位攻击代码位置,达到阻止溢出攻击的目的的一种技术 ...
- ELK日志解决方案
1.方案整体设计 FileBeats+Logstash+ElasticSearch+Kibana 1)ElasticSearch 简称ES,用来做日志数据的存储,当然也可以存储其他数据, ES是互联网 ...
- windows下安装node.js及环境配置、部署项目
windows下安装node.js及环境配置.部署项目 一.总结 一句话总结: 安装nodejs软件:就像普普通通的的软件那样安装 配置nodejs安装的全局模块的环境变量 并且安装cnpm(比如cn ...
- legend3---13、vue是真的好用
legend3---13.vue是真的好用 一.总结 一句话总结: 下次前端所有的交互页面都可以用vue 1.chrome查看post请求携带的参数? 请求的Headers里面的Form Data里面 ...