jQuery手机菜单
手机扫描二维码查看效果：
源码下载 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
jQuery手机菜单相关推荐
- 36个引人注目JQuery导航菜单
1.jQuery 选项卡界面 / 选项卡结构菜单教程 这种类型的菜单在网页设计与开发中非常著名的.此片教程是向大家展示如何使用jQuery的向下滑动/向上滑动效果创建属于你自己的选项卡菜单.要非常留心 ...
- jquery右键菜单
点击这里体验效果 如果要屏蔽页面原来的右键菜单,请设置disable_native_context_menu:true 以下是源代码: 1 <!DOCTYPE html> 2 <ht ...
- Java折叠_[Java教程]Jquery中菜单的展开和折叠
[Java教程]Jquery中菜单的展开和折叠 0 2018-08-15 16:03:38 标签内容 您好:alee 宿舍管理员 密码管理 修改密码 宿舍管理 学生宿舍查询 学生宿舍新增 学生宿舍分配 ...
- 10 个非常酷的基于jQuery的菜单效果插件
除了直观的界面效果外,炫酷的网站导航菜单或右键菜单也能为访问者带来眼前一亮的感觉.本文为你带来10个非常酷的基于jQuery的菜单效果插件. 1. 右击菜单 一个创建右击菜单的插件,简洁且易用. 源 ...
- jquery toggle_响应式WordPress主题教程–第6部分– jQuery Toggle菜单
jquery toggle 视频教程详细信息 名称 响应式WordPress主题教程–第6部分– jQuery Toggle菜单 描述 我们将继续在导航菜单上进行操作. 在这一部分中,我们写了一口jQ ...
- jQuery手机触屏拖动滑块验证跳转插件
HTML: <!DOCTYPE html> <html lang="en"> <head> <title>jQuery手机触屏拖动滑 ...
- php 微信 活动 抽奖,jQuery手机微信活动抽奖代码
jQuery手机微信活动抽奖代码 代码片段: var valueJson = { 'wheelBody' : $('.big-border'), //转盘主体 'wheelSmall' : $('.s ...
- 娃娃机微信php源码,jQuery手机微信夹娃娃机游戏代码
jQuery手机微信夹娃娃机游戏代码 js代码 window.οnlοad=function(){ var k=0;//可以点击 var c=0;//娃娃的 scrollLeft();//娃娃滚动 v ...
- 娃娃机微信php源码,CSS3+jQuery手机微信夹娃娃机游戏代码
CSS3+jQuery手机微信夹娃娃机游戏代码 js代码 window.οnlοad=function(){ var k=0;//可以点击 var c=0;//娃娃的 scrollLeft();//娃 ...
最新文章
- angularjs post 跨域
- redis链表link命令
- 通过完整示例来理解如何使用 epoll
- Grunt教程——安装Grunt
- Beetlex服务网关1.8发布
- 【线程】线程基本函数
- 【CVPR2019】论文完整列表一
- Jira项目导入，被导入项目与目的系统数据类型不一致导入不成功的解决方案
- 佳能g2810提示5b00_佳能G2810 3800系列出现5B00如何解决
- 51nod 1534 棋子游戏（博弈）
- Java调用aliyun OCR图文识别
- Android persist类property 知识点
- quartz的schedulerFactory实现解析
- 浅析MOS管串联并联的驱动应用
- Wordpress 所有 hook 钩子
- 今天睡眠质量记录67
- 祖传代码，是如何变成一堆屎山的？
- linux 音频文件切割_linux下通过CUE分割APE、FLAC、WAV无损音频
- Navicat使用教程：所有实例的运行状况和性能概述
- html、css画太阳