手机端带二级菜单滑动导航的实现

最新推荐文章于 2024-08-05 15:27:15 发布

BeautyBeier

最新推荐文章于 2024-08-05 15:27:15 发布

阅读量4.5k

点赞数 1

分类专栏：手机端文章标签：滑动导航 swiper插件

本文链接：https://blog.csdn.net/BeautyBeier/article/details/53434185

版权

本文介绍了如何使用Swiper插件在手机端实现带二级菜单的滑动导航。通过CSS布局和JS交互，实现了在freemode模式下，点击或滑动一级导航时二级导航的显示和隐藏，利用Swiper的回调函数接口添加了相应的动效。

摘要由CSDN通过智能技术生成

手机端带二级菜单滑动导航的实现

实现的效果图：
手机端滑动导航
Swiper插件是开源、免费、强大的移动端触摸滑动插件。Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。这个效果是freemode模式。
默认的这种模式下只能够实现一级导航，但是如果二级导航的话该如何实现呢？
下面这段代码是布局加样式的代码：

 <div class="swiper-head">

        <!-- Swiper -->
        <div class="swiper-container-head">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <a href="index.html">首页</a>
                </div>
                <div class="swiper-slide">
                    <a href="product.html">产品中心</a>
                </div>
                <div class="swiper-slide">
                    <a href="service.html">客户服务</a>
                </div>
                <div class="swiper-slide swiper-menu">
                    <a href="javascript:void(0);" class='slide-down'>合作加盟</a>
                </div>
                <div class="swiper-slide swiper-menu">
                    <a href="javascript:void(0);" class='slide-down'>关于我们</a>
                </div>
            </div>
            <!-- Add Pagination -->
        </div>
    </div>
    <div class="swiper-list">
        <ul class="swiper-list-content swiper-list-content-1 cf">
            <li>
                <a href="cooperate.html">了解加盟</a>
            </li>