• 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>

  • 相关阅读:
    HTML直接引用vue.min.js,bootstrap-vue.min.js,axios.min.js等开发一个页面(2)
    HTML直接引用vue.min.js,bootstrap-vue.min.js,axios.min.js等开发一个页面
    [Vue+Element UI]不知道总页码数时如何实现翻页
    [Vue] 报错: Uncaught (in promise)
    [Vue + Element UI] 单选框
    [Lombok] Lombok的使用和常用注解使用示例
    Eclipse的Web项目开发:Maven插件jetty服务器的关闭
    [Python] 电脑同时安装python2和python3, 如何实现切换使用
    [Yaml] YAML 入门教程
    k8s ha的安装
  • 原文地址:https://www.cnblogs.com/daochong/p/10278298.html
Copyright © 2020-2023  润新知