<!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. UVA11212 EditingaBook （ IDA*搜索）

    首先说说IDS,就DFS限定一个层数上限maxd,如果在maxd范围内没有找到解,就增加maxd,继续搜索. 当访问到当前结点u时,估计还要搜索h(u)层,如果h(u)+当前层数d>maxd的时 ...

  2. HTML5中的Web Workers

    https://www.cnblogs.com/yanan-boke/p/6954390.html https://segmentfault.com/a/1190000014938305 HTML5 ...

  3. Spark集锦

    1 Spark官网  http://spark.apache.org/ 2 Spark书籍 http://down.51cto.com/tag-spark%E4%B9%A6%E7%B1%8D.html

  4. 用Python计算最长公共子序列和最长公共子串

    如何用Python计算最长公共子序列和最长公共子串 1. 什么是最长公共子序列?什么是最长公共子串? 1.1. 最长公共子序列(Longest-Common-Subsequences,LCS) 最长公 ...

  5. ios基础学习

    action中调用函数方法别忘了冒号1. 各个视图之间的关系要分辨清楚 2. MVC (Model-View-Controller). In this pattern, models keep tra ...

  6. NOIP模拟赛 麻将

    [题目描述] 众所周知,麻将是我们国家的国粹.这段时间,小D也迷上了麻将这个老少皆宜的游戏. 小D觉得这些不同规则的麻将太麻烦了,所以他集合了很多种麻将规则创造出了一套D麻将.下面是D麻将的几个特点: ...

  7. OI算法复习

    搜集一些算法,赛前背一背有好处的 转自各大网站 前排感谢:hzwer.风了咕凉 前辈...Orz 快速读入: int read() { ,f=;char ch=getchar(); ;ch=getch ...

  8. kali添加更新源

    /etc/apt/sources.list 具体方法参考: http://blog.csdn.net/gmnet/article/details/14471835 http://blog.sina.c ...

  9. Java-JFrame窗体美化

    Java-JFrame窗体美化 JFrame默认的窗体比较土,可以通过一定的美化,让窗体表现的比较漂亮,具体要根据设计的设计图进行美化: JFrame美化的大致思路:先将JFrame去除默认美化效果, ...

  10. ccf 201712-2 游戏(Python实现)

    一.原题 问题描述 试题编号: 201712-2 试题名称: 游戏 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 有n个小朋友围成一圈玩游戏,小朋友从1至n编号,2号小朋友坐 ...