移动端可拖动导航菜单小demo

<!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的更多相关文章

前端框架bootstrap 表单和导航菜单的 Demo（第二篇）
表单: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <tit ...
Javascript导航菜单13则
来源:http://www.noupe.com/ajax/13-awesome-java-script-css-menu.html翻译:http://parandroid.com下面为你准备了13个利 ...
swiper嵌套小demo(移动端触摸滑动插件)
swiper(移动端触摸滑动插件) tip:自己敲得Swiper 的小demo,可以复制粘贴看看效果哦. swiper的js包css包下链接地址 : https://github.com/Clear ...
固定底部导航菜单-续集（BottomMenu-移动端V3.0）
固定底部导航菜单-续集(BottomMenu-移动端V3.0) 适应在客户端,点击弹出二级菜单.因为手机不支持hover.所以使用click点击实现弹出菜单,并且一级菜单聚焦变色,变化背景图片核心c ...
jquery小效果：新浪游戏右侧导航菜单（页面效果）
偷盗:新浪游戏右侧导航菜单 http://games.sina.com.cn 效果: 随着页面的滚动,左侧页面的内容,和右侧的导航菜单的按钮文字对应: 点击右侧的导航按钮,左侧页面滚动到相应的内容 2 ...
移动端页面弹幕小Demo实例说明
代码地址如下:http://www.demodashi.com/demo/11595.html 弹幕小Demo实例地址,点击看效果写在前面:尝试做了一下弹幕的实例,欢迎提出并指正问题问题说明: D ...
Flexible实现H5移动端适配小demo
前言看了宇哥关于移动端适配的分享后,加上目前公司项目也需要做移动端适配,今天就抽空搞了搞.目前业界还是比较推崇手淘使用"rem+viewport"的解决方案,今天自己模仿手淘fl ...
jQuery/CSS3类似阿里巴巴的商品导航菜单实现教程
有两天没发表文章了,今天来说说利用jQuery和CSS3制作一款类似阿里巴巴左侧商品菜单导航,这款菜单看起来非常大气,可以展示非常多的产品类目,如果你在设计电子商务网站,不妨可以拿来参考,一下是效果图 ...
Netsharp快速入门(之6) 基础档案(创建导航菜单)
作者:秋时杨昶时间:2014-02-15 转载须说明出处 1.1 创建导航菜单 1.在Demo节点下,录入路径名称,并在下方录入两个导航页签名 2.建立分类,只要填路径名 3.双击基 ...

随机推荐

[tensorflow] tf2.0 简单例子
tf2.0笔记感觉,都统一了,pytorch tensorflow mxnet,大家都差不多了 gan例子笔记 import tensorflow as tf from tensorflow.ker ...
javaweb基础(18)_jsp属性范围
所谓的属性范围就是一个属性设置之后,可以经过多少个其他页面后仍然可以访问的保存范围. 一.JSP属性范围 JSP中提供了四种属性范围,四种属性范围分别指以下四种: 当前页:一个属性只能在一个页面中取得 ...
orcle定时备份
orcle定时备份 (1)写个.bat文件例如: exp test/test@ORCL file=f:\back\test%date:~,%%date:~,%%date:~,%.dmp (2)开始, ...
空类生成对象输出的结果是什么？ toString()输出覆写Object toString()方法输出的结果是什么
空类生成对象输出的结果是什么? 输出的是对象在内存空间地址的哈希值 com.swift.P@1db9742 空类生成对象toString()输出的结果是什么? 输出的是对象在内存空间地址的哈希值的字符 ...
mysql EOF
mysql shell 执行脚本 #!/bin/bash export PATH=/sbin:/bin:/usr/sbin:/usr/bin:/usr/local/mysql-5.6/bin:/usr ...
input类型
由于我们学习一个新的知识,而以前的都差不多忘完了,下面来复习我们以前学习的input的类型: button 点击的按钮 date 年/月/日 CheckBo ...
在linux下安装并运行scrapyd
系统:centos7.4 安装scrapyd:pip isntall scrapyd 因为我腾讯云上是python2与python3并存的所以我执行的命令是:pip3 isntall scrapyd ...
python2与python3的bytes问题
>>> s = '编程' >>> print s 编程 >>> s '\xe7\xbc\x96\xe7\xa8\x8b' >>> ...
init_bootmem_node
初始化pg_data_t->bdtat结构体, /* * node_bootmem_map is a map pointer - the bits represent all physical ...
hihocoder1174 拓扑排序1
#1174 : 拓扑排序·一时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述由于今天上课的老师讲的特别无聊,小Hi和小Ho偷偷地聊了起来. 小Ho:小Hi,你这学期有选 ...

移动端可拖动导航菜单小demo

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

随机推荐

热门专题