如何使用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 相关文章推荐
jquery模拟按下回车实现代码
Sep 20 Javascript
jquery创建表格(自动增加表格)代码分享
Dec 25 Javascript
开源的javascript项目Kissy介绍
Nov 28 Javascript
JavaScript ES6的新特性使用新方法定义Class
Jun 28 Javascript
jquery 判断div show的状态实例
Dec 03 Javascript
prototype与__proto__区别详细介绍
Jan 09 Javascript
JS自动生成动态HTML验证码页面
Jun 14 Javascript
Vue axios 中提交表单数据(含上传文件)
Jul 06 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
Jul 31 Javascript
js实现简单选项卡制作
Aug 05 Javascript
通过实例解析json与jsonp原理及使用方法
Sep 27 Javascript
vue router返回到指定的路由的场景分析
Nov 10 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
php开发工具之vs2005图解
2008/01/12 PHP
php发送post请求函数分享
2014/03/06 PHP
thinkphp验证码显示不出来的解决方法
2014/03/29 PHP
php生成随机颜色方法汇总
2014/12/03 PHP
基于GD2图形库的PHP生成图片缩略图类代码分享
2015/02/08 PHP
学习php设计模式 php实现抽象工厂模式
2015/12/07 PHP
Yii框架使用PHPExcel导出Excel文件的方法分析【改进版】
2019/07/24 PHP
php+mysql实现的无限分类方法类定义与使用示例
2020/05/27 PHP
再谈javascript 动态添加样式规则 W3C校检
2009/12/25 Javascript
新老版本juqery获取radio对象的方法
2010/03/01 Javascript
纯js实现背景图片切换效果代码
2010/11/14 Javascript
解决jquery异步按一定的时间间隔刷新问题
2012/12/10 Javascript
javascript自动改变文字大小和颜色的效果的小例子
2013/08/02 Javascript
Node.js插件安装图文教程
2016/05/06 Javascript
vue.js声明式渲染和条件与循环基础知识
2017/07/31 Javascript
jQuery Datatables表头不对齐的解决办法
2017/11/27 jQuery
ReactNative实现Toast的示例
2017/12/31 Javascript
微信小程序实现点击图片放大预览
2019/10/21 Javascript
vue单应用在ios系统中实现微信分享功能操作
2020/09/07 Javascript
vue+iview实现文件上传
2020/11/17 Vue.js
python之import机制详解
2014/07/03 Python
安装dbus-python的简要教程
2015/05/05 Python
举例讲解Python的lambda语句声明匿名函数的用法
2016/07/01 Python
Python处理JSON数据并生成条形图
2016/08/05 Python
Python代码解决RenderView窗口not found问题
2016/08/28 Python
Python使用QQ邮箱发送Email的方法实例
2017/02/09 Python
关于反爬虫的一些简单总结
2017/12/13 Python
python实现嵌套列表平铺的两种方法
2018/11/08 Python
python 抓包保存为pcap文件并解析的实例
2019/07/23 Python
python里glob模块知识点总结
2021/01/05 Python
美国现代家具和家居商店:Apt2B
2016/08/29 全球购物
iHerb台湾:维生素、保健品和健康产品
2018/01/31 全球购物
乐高西班牙官方商店:LEGO Shop ES
2019/12/01 全球购物
六一儿童节主持开场白
2015/05/28 职场文书
《藏戏》教学反思
2016/02/23 职场文书
详解非极大值抑制算法之Python实现
2021/06/28 Python