jQuery手机菜单-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

jQuery手机菜单

简介: 效果展示 http://hovertree.com/texiao/nav/4/手机扫描二维码查看效果:源码下载 http://hovertree.com/h/bjaf/kroft6c7.htm效果图如下:代码如下:<!doctype html> <html lang="zh"> <head>
效果展示 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

https://yq.aliyun.com/u/helejun


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章