<!DOCTYPE html>

<html lang="en">

<head>

    <title>移动端滑动导航菜单</title>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

    <style>

        /*nav*/

        .m-nav{

            position: relative;

            height:3rem;

        }

        .frame{margin: 0 10px; height:100%;    padding-right:50px;background-color: #00a0e9}

        .nav-box{

            position: relative;

            height:100%;

            overflow: hidden;

        }

        .m-nav ul{

            position: relative;

            left:0;

            margin: 0.5rem;padding: 0;

            list-style: none;

            width:9999px;

            height:100%;

        }

        .m-nav li{

            float:left;

            margin:0;

            padding-right: 10px;

        }

        .m-nav li a{

            text-decoration: none;

            color:#000;

            display: inline-block;

        }

        .menu-btn{

            position: absolute;

            top:0px;

            right:10px;

            width:40px;

            float:left;

            margin-left: 2%;

            display:block;

            height: 3rem;

            text-align: center;

            background-color:red;

        }

    </style>

</head>

<body>

<!--菜单-->

<div class="m-nav">

    <div class="frame">

        <div class="nav-box" id="nav-box">

            <ul class="nav-list" id="nav-list">

                <li><a href="" class="list-item">111一级建造师</a></li>

                <li><a href="" class="list-item">222一级建造师</a></li>

                <li><a href="" class="list-item">333一级建造师</a></li>

                <li><a href="" class="list-item">444一级建</a></li>

                <li><a href="" class="list-item">5555一级建造师</a></li>

                <li><a href="" class="list-item">6666一级建造师</a></li>

                <li><a href="" class="list-item">7777一级建造师</a></li>

                <li><a href="" class="list-item">8888一级建造师</a></li>

                <li><a href="" class="list-item">9999一级建造师</a></li>

                <li><a href="" class="list-item">100000建造师</a></li>

            </ul>

        </div>

        <a href="javascript:void(0);" class="menu-btn" id="menu-btn" ></a>

    </div>

</div>

<script>

    window.onload = function(){

        var isdrag = false;//是否允许再拖动

        var leftDis,curPage;//ul的left值,当前拖动开始时坐标

        var list = document.getElementById("nav-list");

        var finalLeft;//拖动结束时ul的left

        var liPadding = 10;//li的间距

        var items = document.getElementsByClassName("list-item");//li内a标签集合

        var totalWidth = 0;//ul的实际宽度

        var navBox = document.getElementById("nav-box");//ul外div

        var boxWidth;

        var isShow = false;

        //获取ul外div的宽度

        boxWidth = parseInt(window.getComputedStyle(navBox,null).width);

        //计算ul的实际宽度

        for(var i = 0;i<items.length;i++){

            totalWidth += parseInt(window.getComputedStyle(items[i],null).width);

        }

        totalWidth = totalWidth+items.length*liPadding;

        //设置ul的宽度值,否则li将会换行

        list.style.width = totalWidth+10+'px';

        //绑定事件

        list.addEventListener('touchstart',startMouse);

        list.addEventListener('touchmove',moveMouse);

        list.addEventListener('touchend',function(){

            isdrag = false;

        });

        function startMouse(e){

            isdrag = true;

            leftDis = parseInt(list.style.left+0);//ul的left值

            curPage = e.touches[0].pageX;//手指触摸开始时的坐标

            return false;

        }

        function moveMouse(e){

            if (isdrag){

                finalLeft = leftDis + e.touches[0].pageX - curPage;//触摸结束时ul的left值

                console.log(finalLeft);

                if(finalLeft<=-(totalWidth-boxWidth)||finalLeft>=0){//滑到最末一页时

                    return false;

                }

                else{

                    list.style.left = finalLeft +'px';

                }

            }

        }

        //点击菜单按钮显示全部

        var menuBtn = document.getElementById("menu-btn");

        menuBtn.onclick = function(){

            if(!isShow){

                list.removeEventListener('touchstart',startMouse);

                list.removeEventListener('touchmove',moveMouse);

                list.style.width = boxWidth+'px';

                list.style.left = '0px';

                navBox.style.overflow = 'visible';

                navBox.style.height = 'auto';

                isShow = true;

            } else{

                list.addEventListener('touchstart',startMouse);

                list.addEventListener('touchmove',moveMouse);

                list.style.width = totalWidth+10+'px';

                navBox.style.overflow = 'hidden';

                navBox.style.height = '100%';

                isShow = false;

            }

        }

    };

</script>

</body>

</html>

放在手机上,滑动快了会有抖动,还不知道什么原因

移动端可拖动导航菜单小demo的更多相关文章

  1. 前端框架bootstrap 表单和导航菜单的 Demo（第二篇）

    表单: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <tit ...

  2. Javascript导航菜单13则

    来源:http://www.noupe.com/ajax/13-awesome-java-script-css-menu.html翻译:http://parandroid.com下面为你准备了13个利 ...

  3. swiper嵌套小demo(移动端触摸滑动插件)

    swiper(移动端触摸滑动插件) tip:自己敲得Swiper 的小demo,可以复制粘贴看看效果哦. swiper的js包css包下链接地址 :  https://github.com/Clear ...

  4. 固定底部导航菜单-续集（BottomMenu-移动端V3.0）

    固定底部导航菜单-续集(BottomMenu-移动端V3.0) 适应在客户端,点击弹出二级菜单.因为手机不支持hover.所以使用click点击实现弹出菜单,并且一级菜单聚焦变色,变化背景图片 核心c ...

  5. jquery小效果：新浪游戏右侧导航菜单 （页面效果）

    偷盗:新浪游戏右侧导航菜单 http://games.sina.com.cn 效果: 随着页面的滚动,左侧页面的内容,和右侧的导航菜单的按钮文字对应: 点击右侧的导航按钮,左侧页面滚动到相应的内容 2 ...

  6. 移动端页面弹幕小Demo实例说明

    代码地址如下:http://www.demodashi.com/demo/11595.html 弹幕小Demo实例地址,点击看效果 写在前面:尝试做了一下弹幕的实例,欢迎提出并指正问题 问题说明: D ...

  7. Flexible实现H5移动端适配小demo

    前言 看了宇哥关于移动端适配的分享后,加上目前公司项目也需要做移动端适配,今天就抽空搞了搞.目前业界还是比较推崇手淘使用"rem+viewport"的解决方案,今天自己模仿手淘fl ...

  8. jQuery/CSS3类似阿里巴巴的商品导航菜单实现教程

    有两天没发表文章了,今天来说说利用jQuery和CSS3制作一款类似阿里巴巴左侧商品菜单导航,这款菜单看起来非常大气,可以展示非常多的产品类目,如果你在设计电子商务网站,不妨可以拿来参考,一下是效果图 ...

  9. Netsharp快速入门(之6) 基础档案(创建导航菜单)

    作者:秋时 杨昶   时间:2014-02-15  转载须说明出处 1.1     创建导航菜单 1.在Demo节点下,录入路径名称,并在下方录入两个导航页签名 2.建立分类,只要填路径名 3.双击基 ...

随机推荐

  1. SAP C4C Opportunity和SAP ERP Sales流程的集成

    首先在C4C里创建一个新的Opportunity: 给这个Opportunity添加一个新的产品: 点按钮:Request Pricing, 从ERP抓取pricing数据,点按钮之前Negotiat ...

  2. 个人作业-Alpha项目测试

    姓名 蒋东航 学号 201731062328 这个作业属于哪个课程 课程链接 这个作业要求在哪里 作业要求链接 团队名称 机你太美(团队博客链接) 这个作业的目标 了解其他团队项目,学习其他团队优秀方 ...

  3. Beta版本发布

    这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/SoftwareEngineeringClass1/?page=2 这个作业要求在哪里 <作业要求的 ...

  4. HTML之基本语法（段落标签、标题标签、空格标签、换行标签、图片标签和图片的基本属性）

    一.HTML标签 所谓的HTML的标签就是发明者认为定义好的一些单词,就相当于我们汉语中的字 二.HTML的语法 语法就是用来定义这些“字”应该如何解析或者书写的规则 三.常见标签及基本语法 1.人为 ...

  5. python_102_属性方法

    # 属性方法:把一个方法变成一个静态属性 #1 class Dog(object): def __init__(self,name): self.name=name @property#属性 def ...

  6. ajax的序列化表单提交

    通过传统的 form 表单提交的方式上传文件 ? 1 2 3 4 <form id="uploadForm" action="" method=" ...

  7. 如何用纯 CSS 和 D3 创作一只扭动的蠕虫

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/QBQJMg 可交互视频 ...

  8. 使用el-checkbox实现全选，点击失效没有反应

    最近在公司接收到了一个需求,给收藏夹的书籍添加批量.全选删除实现思路:点击全选改变item的checked,改变item的checked,重新便利一下所有item的checked来改变全选的selec ...

  9. 18/07/2017 R matrix

    矩阵:二维数组,元素拥有相同模式(数值型,字符型或者逻辑型) mymatrix <- matrix (vector, nrow_num_of_rows, ncol_num_of_columns, ...

  10. writing a usb driver（在国外的网站上复制下来的）

    Writing a Simple USB Driver   From Issue #120April 2004 Apr 01, 2004  By Greg Kroah-Hartman  in Soft ...