<!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. python爬虫之路——构造URL集

    例某网站的URL集是这样的 https://www.555zw.com/book/40/40934/10334793.html https://www.555zw.com/book/40/40934/ ...

  2. 01_2_Servlet简介

    01_2_Servlet简介 1. Servlet简介 Servlet是服务器小应用程序 用来完成B/S架构下,客户端请求的响应处理 平台独立,性能优良,能以线程方式运行 Servlet API为Se ...

  3. Java中如果把构造方法也私有化，如何创建对象？Java的单例设计模式——饿汉式和懒汉式区别

    Java的单例模式——饿汉式 package com.swift; //Java单例设计模式——恶汉式 public class SinglePerson { private String name= ...

  4. (转发)IOS动画中的枚举UIViewAnimationOptions

    若本帖转自(博客园·小八究):http://www.cnblogs.com/xiaobajiu/p/4084747.html 可怜目前天朝搜不到什么有价值的东西方便学习,在这里方便初学者. 首先这个枚 ...

  5. iOS 资源大全整理

    这是个精心编排的列表,它包含了优秀的 iOS 框架.库.教程.XCode 插件.组件等等. 这个列表分为以下几个部分:框架( Frameworks ).组件( Components ).测试( Tes ...

  6. cesium底图加载底图切换 基于天地图服务

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 【线段树 扫描线 二维数点】loj#6276. 果树

    路径计数转成二维数点很妙啊 题目描述 NiroBC 姐姐是个活泼的少女,她十分喜欢爬树,而她家门口正好有一棵果树,正好满足了她爬树的需求. 这颗果树有 $N$ 个节点,标号 $1 \ldots N$ ...

  8. 【状压dp】cf906C. Party

    需要稍加分析结论:还有一些小细节 Arseny likes to organize parties and invite people to it. However, not only friends ...

  9. 【交互 细节题 思维题】cf1064E. Dwarves, Hats and Extrasensory Abilities

    第一次做交互真有趣……:挺好的细节思维题 This is an interactive problem. In good old times dwarves tried to develop extr ...

  10. 优酷项目之 ORM(数据库对象关系映射）代码重写

    前言: 我们在操作数据库时候一般都是通过sql代码来操作mysql数据库中相关数据,这就需要懂得sql语句,那么怎么样才能在不懂sql语句的情况下通过我们所学的python代码来实现对mysql数据库 ...