<!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. 【Orange Pi Lite2】 ——1《如何开始使用开源硬件》

    [Orange Pi Lite2] --1<如何开始使用开源硬件> 本文只在博客园发布 在开始前你需要准备的材料与软件 用户手册_Orange Pi Lite2 OrangePi_Lite ...

  2. [dp][uestc oj][最长上升子序列] LIS N - 导弹拦截

    N - 导弹拦截 Time Limit: 3000/1000MS (Java/Others)     Memory Limit: 65535/65535KB (Java/Others) Submit  ...

  3. destoon登录后跳转到指定网址

    打开module\member\register.inc.php文件搜索:<input type="hidden" name="forward" valu ...

  4. 项目中遇到的bug

    1. babel编译转换时发生了报错: BabelLoaderError: SyntaxError: Unexpected token babel预置的转换器是 babel-preset-es2015 ...

  5. 几种排序算法的比较转自http://blog.csdn.net/keenweiwei/article/details/3697452

    1冒泡排序: 已知一组无需数据a[1],a[2],a[3],a[4],a[5][a[n],将其按升序排列,首先找出这组数据中最大值,将a[1]与a[2]比较,若a[1]大,则交换两者的值,否则不变,在 ...

  6. Java中的==和equals的区别详解

    1.基础知识 (1)String x = "hello"; (2)String x = new String ("hello"); 第1种方式的工作机制是,首先 ...

  7. Vue基础指令集锦

    v-model双向绑定数据 <input type="text" v-model="msg"> {{msg}} ###v-on 事件 <div ...

  8. 《Java并发编程实战》读书笔记一 -- 简介

    <Java并发编程实战>读书笔记一 -- 简介 并发的历史 并发的历史,也是人类利用有限的资源去提高生产效率的一个的例子. 设想现在有台计算机,这台计算机具有以下的资源: 单核CPU一个 ...

  9. python爬虫基础11-selenium大全5/8-动作链

    Selenium笔记(5)动作链 本文集链接:https://www.jianshu.com/nb/25338984 简介 一般来说我们与页面的交互可以使用Webelement的方法来进行点击等操作. ...

  10. Python语言程序设计之一--for循环中累加变量是否要清零

    最近学到了Pyhton中循环这一章.之前也断断续续学过,但都只是到了函数这一章就停下来了,写过的代码虽然保存了下来,但是当时的思路和总结都没有记录下来,很可惜.这次我开通了博客,就是要把这些珍贵的学习 ...