如何使用jQuery技术开发ios风格的页面导航菜单


Posted in Javascript onJuly 29, 2015

效果图:

如何使用jQuery技术开发ios风格的页面导航菜单

如何使用jQuery技术开发ios风格的页面导航菜单

目前市场上越来越流行IOS风格的操作系统和导航方式,在今天的jQuery教程中,我们介绍如何生成一个iphone风格的菜单导航。

HTML代码

我们使用镶嵌的<li>来生成菜单内容,并且包含在<nav>标签中,如下:

<nav>
<h1>导航菜单</h1>
<ul>
<li>
<h2>专题教程</h2>
<ul>
<li>
<h3>HTML专题教程</h3>
<ul>
<li><a href="http://www.gbin1.com/tutorials/html5-tutorial/html5-introduction">GBin1专题之HTML5教程 - 第一篇:HTML5介绍</a></li>
<li><a href="http://www.gbin1.com/tutorials/html5-tutorial/html5-new-elements">GBin1专题之HTML5教程 - 第二篇:HTML5元素</a></li>
<li><a href="http://www.gbin1.com/tutorials/html5-tutorial/html5-video">GBin1专题之HTML5教程 - 第三篇:HTML5 Video元素</a></li>
<li><a href="http://www.gbin1.com/tutorials/html5-tutorial/html5-video-doc">GBin1专题之HTML5教程 - 第四篇:HTML5 Video Doc</a></li>
<li><a href="http://www.gbin1.com/tutorials/html5-tutorial/html5-audio">GBin1专题之HTML5教程 - 第五篇:HTML5 Audio元素</a></li>
</ul>
<li>
<h3>GBin1热点秀</h3>
<ul>
<li><a href="http://www.gbin1.com/tutorials/hotspot/hotspot1/">GBin1专题之Web热点秀#1</a>
<li><a href="http://www.gbin1.com/tutorials/hotspot/hotspot2/">GBin1专题之Web热点秀#2</a>
<li><a href="http://www.gbin1.com/tutorials/hotspot/hotspot3/">GBin1专题之Web热点秀#3</a>
</ul>
 
</ul>

。。。 。。。
 
Javascript

使用jQuery来查询遍历li,并且生成菜单项目,如下:

$(function(){
 
var nav = $("nav"),
navTitle = nav.children().first(),
navTitleLabel = navTitle.text(),
mainList = navTitle.next(),
subLevels = mainList.find("ul"),
hiddenClass = "hidden";
 
nav.addClass("js");
mainList.find("a:last-child").addClass("files");
subLevels.addClass(hiddenClass);
 
navTitle.wrap($("<div/>")).before($("<a/>", {
href: "#",
className: hiddenClass,
click: function(e){
var $this = $(this),
activeList = subLevels.filter(":visible:last"),
activeListParents = activeList.parents("ul");
navTitle.text($this.text());
if(activeListParents.length > 2)
$this.text(activeListParents.eq(1).prev().text());
else if (activeListParents.length > 1)
$this.text(navTitleLabel)
else
$this.addClass(hiddenClass).empty();
setTimeout(
function(){
activeList.addClass(hiddenClass);
}, slideDuration - 100
);
mainList.css("left", parseInt(mainList.css("left")) + navWidth + "px");
e.preventDefault();
}
}));
 
subLevels.prev().wrap($("<a/>", {
href:"#",
click: function(e){
var $this = $(this);
backArrow.removeClass(hiddenClass).text(navTitle.text());
navTitle.text($this.text());
$this.next().removeClass(hiddenClass);
mainList.css("left", parseInt(mainList.css("left")) - navWidth + "px");
e.preventDefault();
}
}));
 
var backArrow = navTitle.prev(),
navWidth = nav.width(),
firstSubLevel = subLevels.eq(0),
docStyle = document.documentElement.style,
slideDuration = 0,
timingRatio = 1000;
 
if(docStyle.WebkitTransition !== undefined)
slideDuration = parseFloat(
firstSubLevel.css("-webkit-transition-duration")
) * timingRatio;
 
if(docStyle.MozTransition !== undefined)
slideDuration = parseFloat(
firstSubLevel.css("-moz-transition-duration")
) * timingRatio;
 
if(docStyle.OTransition !== undefined)
slideDuration = parseFloat(
firstSubLevel.css("-o-transition-duration")
) * timingRatio;
 
});

 
CSS

使用图片来生成页面顶端的按钮:

body {
font-size: 14px;
font-family: Arial;
background:#f5f5f8;
}
.js {
position:absolute;
width:320px;
height:480px;
top:50%;
left:50%;
margin:-280px 0 0 -160px;
overflow:hidden;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
background:#fff;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,.25);
-moz-box-shadow:0 1px 2px rgba(0,0,0,.25);
box-shadow:0 1px 2px rgba(0,0,0,.25);
}
.js .files {
background-image:none;
}
.js .hidden {
display:none;
}
.js * {
font-size:14px;
font-weight:400;
margin:0;
padding:0;
list-style:none;
}
.js > div {
position:relative;
z-index:1;
height:44px;
text-align:center;
font-size:14px;
line-height:44px;
color:#fff;
text-shadow:0 -1px 0 rgba(0,0,0,.4);
background:#7f94b0;
background:-webkit-gradient(
linear,
0 0,
0 100%,
color-stop(0,#b5c0ce),
color-stop(0.5,#889bb3),
color-stop(0.51,#7f94b0),
color-stop(1,#6d83a1)
);
background:-moz-linear-gradient(
top center,
#b5c0ce,
#889bb3 22px,
#7f94b0 23px,
#6d83a1
);
border-bottom:1px solid #2d3033;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
border-top-left-radius:5px;
border-top-right-radius:5px;
}
.js > div a {
height:31px;
top:7px;
left:20px;
font-size:14px;
line-height:31px;
color:#fff;
background:url('../images//center.png');
}
.js > div a, .js > div a:before, .js > div a:after {
position:absolute;
}
.js > div a:before {
left:-13px;
content:url('../images//left.png');
}
.js > div a:after {
right:-10px;
top:0;
content:url('../images//right.png');
}
.js > div a:active {
opacity:.65;
}
.js a {
text-decoration:none;
}
.js ul a {
display:block;
color:#000;
padding:.8em 18px;
border-bottom:1px solid #e0e0e0;
background:url('images/next.png') no-repeat 94% 50%;
}
.js ul a:hover {
background-color:#edf3fe;
}
.js a:focus {
outline:none;
}
.js ul {
position:absolute;
top:0;
padding-top:45px;
width:100%;
-webkit-transition:left .4s ease-out;
-moz-transition:left .4s ease-out;
-o-transition:left .4s ease-out;
}
.js ul {
left:0;
}
.js ul ul {
left:320px;
}

有效果图,有代码看起来非常明了,希望大家喜欢。

Javascript 相关文章推荐
JS 有名函数表达式全面解析
Mar 19 Javascript
jQuery中选择器小问题(新人难免遇到)
Mar 31 Javascript
javascript变量声明实例分析
Apr 25 Javascript
JavaScript中setMonth()方法的使用详解
Jun 11 Javascript
理解JavaScript事件对象
Jan 25 Javascript
JavaScript位移运算符(无符号) &gt;&gt;&gt; 三个大于号 的使用方法详解
Mar 31 Javascript
分分钟玩转Vue.js组件
Oct 25 Javascript
js拖拽功能实现代码解析
Nov 28 Javascript
angular仿支付宝密码框输入效果
Mar 25 Javascript
AngularJS 控制器 controller的详解
Oct 17 Javascript
vue 的 solt 子组件过滤过程解析
Sep 07 Javascript
Vue+Element自定义纵向表格表头教程
Oct 26 Javascript
如何用javascript计算文本框还能输入多少个字符
Jul 29 #Javascript
详解JavaScript的Polymer框架中的通知交互
Jul 29 #Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
Jul 29 #Javascript
浅谈JavaScript的Polymer框架中的事件绑定
Jul 29 #Javascript
探讨JavaScript中的Rest参数和参数默认值
Jul 29 #Javascript
JS的框架Polymer中的dom-if和is属性使用说明
Jul 29 #Javascript
js数组去重的方法汇总
Jul 29 #Javascript
You might like
实用函数2
2007/11/08 PHP
php设计模式 Delegation(委托模式)
2011/06/26 PHP
详解PHP序列化反序列化的方法
2015/10/27 PHP
PHP在弹框中获取foreach中遍历的id值并传递给地址栏
2017/06/13 PHP
ImageZoom 图片放大镜效果(多功能扩展篇)
2010/04/14 Javascript
Javascript四舍五入Math.round()与Math.pow()使用介绍
2013/12/27 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
2014/06/12 Javascript
如何通过js实现图片预览功能【附实例代码】
2016/03/30 Javascript
javascript和jquery实现用户登录验证
2016/05/04 Javascript
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
2017/10/20 jQuery
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
2018/10/25 Javascript
解决在Vue中使用axios用form表单出现的问题
2019/10/30 Javascript
js实现上传图片并显示图片名称
2019/12/18 Javascript
Vue路由守卫及页面登录权限控制的设置方法(两种)
2020/03/31 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
2020/07/22 Javascript
Vue + ts实现轮播插件的示例
2020/11/10 Javascript
element 动态合并表格的步骤
2020/12/31 Javascript
python实现问号表达式(?)的方法
2013/11/27 Python
linux下python抓屏实现方法
2015/05/22 Python
python3实现ftp服务功能(服务端 For Linux)
2017/03/24 Python
python实现本地图片转存并重命名的示例代码
2018/10/27 Python
python 字符串常用方法汇总详解
2019/09/16 Python
python tqdm 实现滚动条不上下滚动代码(保持一行内滚动)
2020/02/19 Python
FitFlop美国官网:英国符合人体工学的鞋类品牌
2018/10/05 全球购物
PHP如何去执行一个SQL语句
2016/03/05 面试题
会计专业毕业生推荐信
2013/11/05 职场文书
汽车专业人才自我鉴定范文
2013/12/29 职场文书
护士岗位求职应聘自荐书范文
2014/02/12 职场文书
《童年的发现》教学反思
2014/02/14 职场文书
跑操口号
2014/06/12 职场文书
三八妇女节超市活动方案
2014/08/18 职场文书
校园安全广播稿范文
2014/09/25 职场文书
晶体管来复再生式二管收音机
2021/04/22 无线电
解决MySQL存储时间出现不一致的问题
2021/04/28 MySQL
python中%格式表达式实例用法
2021/06/18 Python
MongoDB连接数据库并创建数据等使用方法
2021/11/27 MongoDB