效果展示 http://hovertree.com/texiao/nav/4/

手机扫描二维码查看效果：

源码下载 http://hovertree.com/h/bjaf/kroft6c7.htm

效果图如下：

代码如下：

<!doctype html>

<html lang="zh">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>jQuery+CSS3移动手机菜单代码 - 何问起</title><base target="_blank" />

<link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/nav/4/css/default.css">

<!--<link href='http://fonts.useso.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>-->

<link rel="stylesheet" type="text/css" href="css/demo-1.css">

<!--[if IE]>

    <script src="http://hovertree.com/texiao/html5/4/html5shiv.min.js"></script>

<![endif]-->

</head>

<body>

    <div class="htmleaf-container">

        <div id="wrapper">

            <div class="menu">

                <img id="menu-bg" src="http://hovertree.com/texiao/nav/4/img/golden-gate-lights.jpg" />

                <ul>

                    <li><a href="http://hovertree.com/about/">About</a></li>

                    <li><a href="http://hovertree.com/h/bjaf/f34s9wqj.htm">Share</a></li>

                    <li><a href="http://hovertree.com/tiku/bjaf/iaf4sqdx.htm">Activity</a></li>

                    <li><a href="http://hovertree.com/hovertreescj/">Settings</a></li>

                    <li><a href="http://hovertree.com/menu/webfront/">Contact</a></li>

                </ul>

            </div>

            <div class="screen">

                <div class="navbar"></div>

                <div class="list">

                    <div class="item">

                        <div class="img"></div>

                        <span></span>

                        <span></span>

                        <span><a href="http://hovertree.com/h/bjaf/v8ykv2u9.htm">原文</a></span>

                    </div>

                    <div class="item">

                        <div class="img"></div>

                        <span><a href="http://hovertree.com">何问起</a></span>

                        <span><a href="http://hovertree.com/menu/texiao/">特效</a></span>

                        <span></span>

                    </div>

                    <div class="item">

                        <div class="img"></div>

                        <span></span>

                        <span></span>

                        <span></span>

                    </div>

                    <div class="item">

                        <div class="img"></div>

                        <span></span>

                        <span></span>

                        <span></span>

                    </div>

                </div>

                <div class="burger">

                    <div class="x"></div>

                    <div class="y"></div>

                    <div class="z"></div>

                </div>

            </div>

        </div>

    </div>

<script src="http://hovertree.com/texiao/nav/4/js/stopExecutionOnTimeout.js?t=1"></script>

<script src="http://hovertree.com/texiao/nav/4/js/jquery-2.1.1.min.js" type="text/javascript"></script>

<script>

  if ('ontouchstart' in window) {

        var click = 'touchstart';

    } else {

        var click = 'click';

    }

    $('div.burger').on(click, function () {

        if (!$(this).hasClass('open')) {

            openMenu();

        } else {

            closeMenu();

        }

    });

    $('div.menu ul li a').on(click, function (e) {

        e.preventDefault();

        closeMenu();

    });

    function openMenu() {

        $('div.burger').addClass('open');

        $('div.y').fadeOut(100);

        $('div.screen').addClass('animate');

        setTimeout(function () {

            $('div.x').addClass('rotate30');

            $('div.z').addClass('rotate150');

            $('.menu').addClass('animate');

            setTimeout(function () {

                $('div.x').addClass('rotate45');

                $('div.z').addClass('rotate135');

            }, 100);

        }, 10);

    }

    function closeMenu() {

        $('div.screen, .menu').removeClass('animate');

        $('div.y').fadeIn(150);

        $('div.burger').removeClass('open');

        $('div.x').removeClass('rotate45').addClass('rotate30');

        $('div.z').removeClass('rotate135').addClass('rotate150');

        setTimeout(function () {

            $('div.x').removeClass('rotate30');

            $('div.z').removeClass('rotate150');

        }, 50);

        setTimeout(function () {

            $('div.x, div.z').removeClass('collapse');

        }, 70);

    }

</script>

<!--<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff">

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>

<p>来源：<a href="http://hovertree.com/" target="_blank">何问起</a></p>

</div>-->

</body>

</html>

转自：http://hovertree.com/h/bjaf/v8ykv2u9.htm

特效汇总：http://www.cnblogs.com/roucheng/p/texiao.html

jQuery手机菜单的更多相关文章

  1. jquery右键菜单

    点击这里体验效果 如果要屏蔽页面原来的右键菜单,请设置disable_native_context_menu:true 以下是源代码: <!DOCTYPE html> <html&g ...

  2. Smint – 用于单页网站制作的 jQuery 导航菜单插件

    Smint 是一款用于实现单页风格网站的 jQuery 导航插件,包含两部分:固定在页面顶部的精美导航条和能够在你点击的时候自动滚动到对应内容的菜单按钮.Smint 使用非常简单,只有一个参数用于设置 ...

  3. jQuery实现菜单点击隐藏（上下左右）

    canrun <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  4. jquery实现菜单功能（单击展开或者关闭）-一般应用于后台

    <!doctype html> <html> <head> <meta charset="gb2312"> <title> ...

  5. Jquery多级菜单插件Slimmenu使用说明

    Jquery多级菜单插件Slimmenu使用说明 现在扁平化设计逐渐的成为了趋势,不管是pc web,还是移动互联网的应用开发,都在研究和设计Flat ui, 这里有一篇文章说明扁平化的设计的一些想法 ...

  6. jQuery手风琴菜单！！！！

    jQuery手风琴菜单 第一次发博客也不知道说点什么好,以前敲得一个手风琴菜单刚刚整理出来了,就来分享个大家 手风琴的排版 排版完事了,接下来就写样式吧,把自己喜欢的颜色或者是图片添加进来,就会变成你 ...

  7. 【转载】jQuery手机移动端触屏日历日期选择

    文章转载自 科e互联 http://www.internetke.com/ 原文链接:http://www.internetke.com/effects/css3/2015/0120/1222.htm ...

  8. jQuery手机触屏拖动滑块验证跳转插件

    HTML: <!DOCTYPE html> <html lang="en"> <head> <title>jQuery手机触屏拖动滑 ...

  9. jQuery 二级菜单，一次显示一个小类 鼠标点击显示小类

    jQuery 二级菜单,一次显示一个小类 鼠标点击显示小类 本例有另外2个关联案例,演示地址分别为2.php,3.php 演示 XML/HTML Code <div class="ar ...

随机推荐

  1. 如何在没有域的环境中搭建AlwaysOn（二）

    对DBA而言,不需要域就可以搭建SQL Server AlwaysOn是Windows Server 2016中最令人兴奋的功能了,它不仅可以降低搭建的成本,而且还减少了部署和运维的工作量. 上篇博客 ...

  2. Android APK是否需要预解压

    今天在逛论坛的时候,发现有一个朋友问的问题.其主要目的,是想实现 玩家首次进入游戏的时候,或者新安装了版本的时候,对APK进行解压,写入SD卡.这样游戏运行过程中,将不会再从APK中读取资源. 以提高 ...

  3. SQL Azure (15) SQL Azure 新的规格

    <Windows Azure Platform 系列文章目录> 在以前的文章中,笔者给大家介绍了Microsoft Azure SQL Database (以前被称为SQL Azure)的 ...

  4. Wakatime 测试工作时间

    Wakatime – 现在几点了,你在做什么呢 前面提到了一个用来QS自己的工具Clarify.这次介绍一个专门给程序员用的工具.大家都知道一万小时定律,但我究竟写java写了多久了呢?WakaTim ...

  5. 修改windows自带的Ctrl+Space输入法切换快捷键

    使用场景: 多为我等码农使用一些编辑器时,编辑器的默认代码提示热键为 ctrl+space ,但这个热键被系统的输入法开关占用.如果遇到可以设置快捷键的编辑器还好,要是不能设置的话(比如火狐浏览器的代 ...

  6. KnockoutJS 3.X API 第七章 其他技术(5) 使用其他事件处理程序

    在大多数情况下,数据绑定属性提供了一种干净和简洁的方式来绑定到视图模型. 然而,事件处理是一个常常会导致详细数据绑定属性的领域,因为匿名函数通常是传递参数的推荐技术. 例如: <a href=& ...

  7. C#设计模式系列：策略模式（Strategy）

    1.策略模式简介 1.1>.定义 策略是为达到某一目的而采取的手段或方法,策略模式的本质是目标与手段的分离,手段不同而最终达成的目标一致.客户只关心目标而不在意具体的实现方法,实现方法要根据具体 ...

  8. Cookie/Session机制详解

    会话(Session)跟踪是Web程序中常用的技术,用来跟踪用户的整个会话.常用的会话跟踪技术是Cookie与Session.Cookie通过在客户端记录信息确定用户身份,Session通过在服务器端 ...

  9. DDD 领域驱动设计－“臆想”中的实体和值对象

    其他博文: DDD 领域驱动设计-三个问题思考实体和值对象 DDD 领域驱动设计-三个问题思考实体和值对象(续) 以下内容属于博主"臆想",如有不当,请别当真. 扯淡开始: 诺兰的 ...

  10. 初探和实现websocket心跳重连

    心跳重连缘由 在使用websocket过程中,可能会出现网络断开的情况,比如信号不好,或者网络临时性关闭,这时候websocket的连接已经断开, 而浏览器不会执行websocket 的 onclos ...