swiper伸缩侧边菜单栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Swiper demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

    <!-- Link Swiper‘s CSS -->
    <link rel="stylesheet" href="../dist/css/swiper.min.css">

    <!-- Demo styles -->
    <style>
        html, body {
            position: relative;
            height: 100%;
        }
        body {
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }
        .swiper-container {
            width: 100%;
            height: 100%;
        }
        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;

            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }
        .menu {
            min-width: 100px;
            width: 70%;
            max-width: 320px;

            background-color: #2C8DFB;
            color: #fff;
        }
        .content {
            width: 100%;
        }

        .menu-button {
            position: absolute;
            top: 0px; left: 0px;

            padding: 15px;

            cursor: pointer;

            -webkit-transition: .3s;
            transition: .3s;

            background-color: #2C8DFB;

            /*margin: 14px;
            border-radius: 5px;*/
        }
        .menu-button .bar:nth-of-type(1) {
            margin-top: 0px;
        }
        .menu-button .bar:nth-of-type(3) {
            margin-bottom: 0px;
        }

        .bar {
            position: relative;
            display: block;

            width: 50px;
            height: 5px;

            margin: 10px auto;
            background-color: #fff;

            border-radius: 10px;

            -webkit-transition: .3s;
            transition: .3s;
        }

        .menu-button:hover .bar:nth-of-type(1) {
            -webkit-transform: translateY(1.5px) rotate(-4.5deg);
            -ms-transform: translateY(1.5px) rotate(-4.5deg);
            transform: translateY(1.5px) rotate(-4.5deg);
        }
        .menu-button:hover .bar:nth-of-type(2) {
            opacity: .9;
        }
        .menu-button:hover .bar:nth-of-type(3) {
            -webkit-transform: translateY(-1.5px) rotate(4.5deg);
            -ms-transform: translateY(-1.5px) rotate(4.5deg);
            transform: translateY(-1.5px) rotate(4.5deg);
        }

        .cross .bar:nth-of-type(1) {
            -webkit-transform: translateY(15px) rotate(-45deg);
            -ms-transform: translateY(15px) rotate(-45deg);
            transform: translateY(15px) rotate(-45deg);
        }
        .cross .bar:nth-of-type(2) {
            opacity: 0;
        }
        .cross .bar:nth-of-type(3) {
            -webkit-transform: translateY(-15px) rotate(45deg);
            -ms-transform: translateY(-15px) rotate(45deg);
            transform: translateY(-15px) rotate(45deg);
        }
        .cross:hover .bar:nth-of-type(1) {
            -webkit-transform: translateY(13.5px) rotate(-40.5deg);
            -ms-transform: translateY(13.5px) rotate(-40.5deg);
            transform: translateY(13.5px) rotate(-40.5deg);
        }
        .cross:hover .bar:nth-of-type(2) {
            opacity: .1;
        }
        .cross:hover .bar:nth-of-type(3) {
            -webkit-transform: translateY(-13.5px) rotate(40.5deg);
            -ms-transform: translateY(-13.5px) rotate(40.5deg);
            transform: translateY(-13.5px) rotate(40.5deg);
        }
    </style>
</head>
<body>
    <!-- Swiper -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide menu">Menu slide</div>
            <div class="swiper-slide content">
                <div class="menu-button">
                    <div class="bar"></div>
                    <div class="bar"></div>
                    <div class="bar"></div>
                </div>
                Content slide
            </div>
        </div>
    </div>

    <!-- Swiper JS -->
    <script src="../dist/js/swiper.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
        var toggleMenu = function(){
            if (swiper.previousIndex == 0)
                swiper.slidePrev()
        }
        , menuButton = document.getElementsByClassName(‘menu-button‘)[0]
        , swiper = new Swiper(‘.swiper-container‘, {
            slidesPerView: ‘auto‘
            , initialSlide: 1
            , resistanceRatio: .00000000000001
            , onSlideChangeStart: function(slider) {
                if (slider.activeIndex == 0) {
                    menuButton.classList.add(‘cross‘)
                    menuButton.removeEventListener(‘click‘, toggleMenu, false)
                } else
                    menuButton.classList.remove(‘cross‘)
            }
            , onSlideChangeEnd: function(slider) {
                if (slider.activeIndex == 0)
                    menuButton.removeEventListener(‘click‘, toggleMenu, false)
                else
                    menuButton.addEventListener(‘click‘, toggleMenu, false)
            }
            , slideToClickedSlide: true
        })
    </script>
</body>
</html>
时间: 2024-10-29 17:19:07

swiper伸缩侧边菜单栏的相关文章

iOS 两种方法实现左右滑动出现侧边菜单栏 slide view

现在很多的APP中都有slide view,左右滑动出现侧边菜单栏的功能,Weico这个应用就有. 网上有很多第三方的类库实现了这种效果,其实自己代码写的话也是很简单的,下面我将介绍两种方法实现slide view.---- 一种是用第三方类库IIViewDeckController这个类库实现的效果比起其他的都好,另一种是自己代码实现这种效果,效果还ok. 实现方法一(使用第三方库IIViewDeckController): https://github.com/Inferis/ViewDec

【转】 iOS 两种方法实现左右滑动出现侧边菜单栏 slide view

原文: http://blog.csdn.net/crayondeng/article/details/9057637 --- 关于评论中,很多网友都是需要这部分的相关源码,其实在我上传的新浪微博小程序中,就用到了这个内容,而且是采用自己代码实现的方式,有需要的朋友自己点击这个链接进行下载吧!点击打开链接  现在很多的APP中都有slide view,左右滑动出现侧边菜单栏的功能,Weico这个应用就有. 网 上有很多第三方的类库实现了这种效果,其实自己代码写的话也是很简单的,下面我将介绍两种方

侧边菜单栏android-menudrawer导入Eclipse的问题

这是GitHub上的开源项目android-menudrawer,效果如下: 效果非常好,不过在一开始的时候导入Eclipse时出现各种错误,现在总结一下问题和解决方案. 1.导入项目的问题 先把官网下载的zip文件解压,然后在Eclipse中File—>Import—>Android—>Existing Android Code Into Workspace, 把menudrawer和menudrawer-sample两个项目导入 2.项目依赖(Dependencies) (1)men

ViewDragHelper实践之仿Android官方侧滑菜单NavigationDrawer效果

相信经常使用移动应用的用户都很熟悉侧滑菜单栏, 下拉, 下弹, 上弹等应用场景, 几乎主流的移动应用无论IOS 还是Android都能看到. 2.3以前的时候, 很多第三方比如SlidingMenu, MenuDrawer, ActionbarSherlock等等都很大程度的丰富和深化了这种交互理念.能让小小的屏幕, 容纳更多的交互接口. 也是这种趋势, Android官方在v4终于推出了DrawerLayout. 表示对侧滑的重视与肯定. 唠叨到这了. 去看了DrawerLayout的源码和官

【名词】在前端开发中的“轮子”

最近在随便刷一些论坛,文档,常见一个名词"轮子". 自我理解:已封装完成的库.换个名词,组件.例如:图片轮播组建:swiper等,菜单栏组件. 在前端开发中,我们需要在满足条件下对于平台进行兼容,众所周知的IE系列,那么如果有一份已经写好的能够兼容各个浏览器的代码,进行封装以后直接引入使用显然会事半功倍. 作为练习,对于市场上主流的"轮子"进行仿造可以增加经验,也可以自己造轮子,只有自己动手做了才能够知道其中的知识点.

Ubuntu中Qt的安装

去官网下载qt-opensource-linux-x64-5.7.0.run,到"下载"目录 Ctrl+Alt+T打开终端 cd /home/jv/下载sudo mv qt-opensource-linux-x64-5.7.0.run /optcd /opt   个人习惯把软件安装到opt文件夹中sudo chmod +x qt-opensource-linux-x64-5.7.0.runsudo ./qt-opensource-linux-x64-5.7.0.run 弹出熟悉的GUI

教你轻松实现Material Design风格的知乎主页(详解多种控件的综合使用)

本文讲主要来说说Toolbar.RecyclerView.CardView.DrawerLayout.以及SwiperefreshLayout的综合使用,其中Toolbar和RecyclerView在前几篇博客已经详细讲述其用法了,有兴趣的可以去看看.现在利用这几个控件实现Material Design风格的知乎主页(Android v3.3版 知乎),在讲到相关控件的时候,我也会提及一下这个控件的用法.那么,让我们开始控件之旅吧. 示例效果 在动手写代码之前,我们先要看看最终的实现效果是什么:

iOS 7侧边栏菜单解决方案

虽然Facebook和Path在国内用户当中使用率并不是很高,但这两款应用对菜单的革新性设计已经被很多开发者和设计师采用.当用户点击"Hamburger"图标打开侧边栏目,主屏幕页面会滑向屏幕的右侧(有些应用会使用向左侧滑)来展示下首屏下面的页面. 很多设计师习惯于把Facebook和Path的菜单成为侧滑菜单或者侧边栏菜单,这一设计在iOS 6和以前的系统版本中非常适用,状态栏存在于20pt高且与app其他部分隔离的区域.在iOS 7中,状态栏被覆盖在屏幕之下.换句话说,app和状态

Android 开源项目 eoe 社区 Android 客户端(转)

本文内容 环境 开源项目 eoe 社区 Android 客户端 本文介绍 eoe 社区 Android 客户端.它是一个开源项目,功能相对简单,采用侧边菜单栏.可以学习一下.点击此处查看 GitHub 上的项目. 今天调试几个开源的 Andriod 项目,像什么 oschina,apolloMod 等等,都跑不起来,nnd 郁闷了,不是这有问题,就是那有问题.尤其是 apolloMod,用了很多三方库,完全跑不起来嘛,最无奈的是 oschina,必须将 API 降到 15,也就是 Android