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 ...
随机推荐
- Appium自动化测试教程-自学网-安卓模拟器
安卓模拟器: 夜神模拟器安装配置 下载地址:https://www.yeshen.com 开启VT VT是什么?为什么要开启VT? VT,全称是Virtualization Technology,即是 ...
- 【题解】间隔排列-C++
题目Description小Q是班长.在校运动会上,小Q班要进行队列表演.小Q要选出2*N名同学编队,每人都被编上一个号,每一个从1到N的自然数都被某2名同学佩戴,现在要求将他们排成一列,使两个编号为 ...
- 51nod 1412
考虑到只与深度和点的个数有关$f[n][d]$ 表示 $n$ 个点,深度为 $d$ 的 $AVL$ 树有多少种 枚举左子树大小为 $i$, 进行转移并且深度为 $logn$ 级别 $f[n][d] = ...
- python3 操作ppt
# pip install pywin32com# ppt太大会读取失败import win32com from win32com.client import Dispatch, constants ...
- cdh版hbase构建Phoenix 遇到的坑
Phoenix 构建cdh版hbase遇到的坑 1. 安装phoenix 下载:在github上下载对应版本https://github.com/apache/phoenix 解压:略 编译: 修改根 ...
- Smali基础知识
Smali是用于Dalvik(Android虚拟机)的反汇编程序实现 汇编工具(将Smali代码汇编为dex文件)为smali.jar baksmali.jar则是反汇编程序 地址:https://b ...
- Redis集群都有哪些模式
前言: 一,为什么要使用redis 1,解决应用服务器的cpu和内存压力 2,减少io的读操作,减轻io的压力 3,关系型数据库扩展性不强,难以改变表的结构 二,优点 1,nosql数据库没有关联关系 ...
- csp-s模拟测试112 & csp-s模拟测试113
考前两天模拟. Day1直接炸飞,T1浪费的时间太长,对拍+调试了一个多小时但复杂度还不能过,最后5分钟想出来了解决方案但是已经打不出来了.T2读入出了事故RE0.T3打了假贪心. Day2心态几乎也 ...
- Python: 根据利润计算奖金
简述:企业发放的奖金根据利润提成.利润(I)低于或等于10万元时,奖金可提10%: 利润高于10万元,低于20万元时,低于10万元的部分按10%提成,高于10万元的部分,可提成7.5%: 20万到40 ...
- Docker 版本的更新和安装
涉及到网址:1.https://docs.docker.com/engine/installation/linux/docker-ce/ubuntu/#prerequisites (官网) ...