zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    SSM整合初级 简单的增删改查
    初始SpringMVC
    初始Spring MVC
    Web Service简介
    Quartz框架 实现任务调度
    搭建james邮件服务器
    使用Jdbc Template的基本操作步骤
    spring AOP四种实现方式
    Struts2数据校验
    Struts2 与Servlet API解耦,耦合的访问方式
  • 原文地址:https://www.cnblogs.com/daochong/p/10278298.html
Copyright © 2011-2022 走看看