1. 全栈程序员必看首页

jQuery手机菜单

全栈程序员-站长 • • 未分类 • 阅读 38

效果展示 http://hovertree.com/texiao/nav/4/手机扫描二维码查看效果：源码下载 http://hovertree.com/h/bjaf/kroft6

大家好，又见面了，我是全栈君，今天给大家准备了Idea注册码。

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

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


jQuery手机菜单

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

效果图如下：


jQuery手机菜单

代码如下： 

<!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

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/120320.html原文链接：https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长
0 0


相关推荐

  • acwing-最长上升公共子序列(动态规划)[通俗易懂]

    acwing-最长上升公共子序列(动态规划)[通俗易懂]

    acwing-最长上升公共子序列(动态规划)[通俗易懂]原题连接熊大妈的奶牛在小沐沐的熏陶下开始研究信息题目。小沐沐先让奶牛研究了最长上升子序列，再让他们研究了最长公共子序列，现在又让他们研究最长公共上升子序列了。小沐沐说，对于两个数列 A 和 B，如果它们都包含一段位置不一定连续的数，且数值是严格递增的，那么称这一段数是两个数列的公共上升子序列，而所有的公共上升子序列中最长的就是最长公共上升子序列了。奶牛半懂不懂，小沐沐要你来告诉奶牛什么是最长公共上升子序列。不过，只要告诉奶牛它的长度就可以了。数列 A 和 B 的长度均不超过 3000。输入格式

    全栈程序员-站长的头像 全栈程序员-站长
    2022年8月8日
    8
  • phpwind升级php7,【原创文章】升级phpwind为https「建议收藏」

    phpwind升级php7,【原创文章】升级phpwind为https「建议收藏」

    phpwind升级php7,【原创文章】升级phpwind为https「建议收藏」闲来无事，看到刀客城和金刀客博客还是http协议，浏览器总是提示不安全，对于有点强迫症的我来说，看不下去，正好今天有点时间，就整了一下。phpwind好像没多少人用了，但是对于一个简单的坛子来说够用了，升级为https也挺简单，只是一开始没有找到路。首先到https://cloud.baidu.com/申请免费ssl证书，一个地址可以申请3个免费Symantec域名型DV证书。然后传到服务器…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年9月20日
    0
  • 均方误差与方差的区别_平均数 方差 标准差

    均方误差与方差的区别_平均数 方差 标准差

    均方误差与方差的区别_平均数 方差 标准差一、百度百科上方差是这样定义的：看这么一段文字可能有些绕，那就先从公式入手，对于一组随机变量或者统计数据，其期望值我们由E(X)表示，即随机变量或统计数据的均值，然后对各个数据与均值的差的平方求和，最后对它们再求期望值就得到了方差公式。这个公式描述了随机变量或统计数据与均值的偏离程度。二、方差与标准差之间的关系就比较简单了根号里的内容就是我们刚提到的那么问题来了，

    全栈程序员-站长的头像 全栈程序员-站长
    2022年9月1日
    4
  • 面部表情还是面目表情(怎样调整面部表情)

    面部表情还是面目表情(怎样调整面部表情)

    目录概要：问题来源：论文对此比赛的说明：选择原因：实现与优化思路：前置：数据处理：原csv数据的读取与分割：csv数据转图片和tfrecord的存取：tfrecord接生产队列供模型训练：神经网络定义：损失函数：滑动平均（EMA）：训练与优化过程：基本设置：学习率：batch_size:训练次数：Dropout：BN：…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年4月11日
    79
  • Vue3 最长递增子序列详解

    Vue3 最长递增子序列详解

    Vue3 最长递增子序列详解Vue3最长递增子序列研究本文初衷彻底讲清楚Vue3源码中实现最长递增子序列的算法。概念名词**最长递增子序列：**在一个给定的数值序列中，找到一个子序列，使得这个子序列元素的数值依次递增，并且这个子序列的长度尽可能地大。最长递增子序列中的元素在原序列中不一定是连续的。比如：序列[10,9,2,5,3,7,101,18]的最长递增子序列是[2,3,7,101]或[2,3,7,18]。序列[3,2,8,9,5,6,7,11,15,4]

    全栈程序员-站长的头像 全栈程序员-站长
    2022年5月4日
    60
  • mac版本idea激活码2021（最新序列号破解） idea

    mac版本idea激活码2021（最新序列号破解）

    mac版本idea激活码2021（最新序列号破解），https://javaforall.net/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧！

    全栈程序员-站长的头像 全栈程序员-站长
    2022年3月19日
    224

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号