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

效果图：

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

超文本标记语言代码

我们使用镶嵌的里来生成菜单内容，并且包含在航行标签中，如下：

navh1导航菜单/h1ullih2专题教程/h2ullih3HTML专题教程/h3u lliagbi 1。com/教程/html 5-教程/html 5-简介' gbi 1专题之HTML5教程-第一篇：HTML5介绍/a/liliagbi 1。com/tutories/html 5-tutories/html 5-new-elements ' gbi 1专题之HTML5教程-第二篇：HTML5元素/a/liliagbi 1。com/教程/html 5-教程/html 5-视频' gbi 1专题之HTML5教程-第三篇：HTML5视频元素/a/liliagbi 1。com/tutories/html 5-tutories/html 5-video-doc ' gbi 1专题之HTML5教程-第四篇：html 5视频文档。gbi 1。com/教程/html 5-教程/html 5-音频' gbi 1专题之HTML5教程-第五篇：HTML5音频元素/a/Li/ulli 3g B1热点秀/h3u lliagbi 1。com/教程/热点1/' gbi 1专题之网热点秀# 1/alia href=' http://www .gbi 1。com/教程/热点2/' gbi 1专题之网热点秀# 2/aliagbi 1。com/教程/热点3/' gbi 1专题之网热点秀# 3/a/ul/ul……Javascript……

使用jQuery来查询遍历李，并且生成菜单项目，如下：

$(function(){ var nav=$('nav ')，navTitle=nav.children().first()，navTitleLabel=navTitle.text()，mainList=navTitle.next()，sub vels=主列表。find(' ul ')，hiddenClass=' hiddennav '。addCLaSS(' js ')；主列表。查找(' a :最后一个孩子').addClass(')文件');sublevels。addclass(隐藏类)；navTitle.wrap($('div/')).($('a/'，{href: '# '，className: hiddenClass，单击： function(e){ var $ this=$(this)，活动列表=子级别。筛选器(' :可见：最后')，活动列表父项=活动列表。父母(' ul ')；导航标题。文字($ this。text())；if(活动列表父项。长度2)$这个。文本(活动列表父项。方程式(1 ).prev().text())；else if(active listbrants。长度1)$这个。text(navtilabel)else $ this。addclass(隐藏类).empty()；setTimeout()函数(){ activelist。addclass(隐藏类))；}，幻灯片时长-100)；mainList.css('left ')、parseInt(主列表。CSS(' left ')(NavWidth ' px ')；e . PreventDefault()；}}));subLevels.prev().换行($('a/'，{href:'# '，点击：函数(e){ var $ this=$(this)；后退箭头。移除类(隐藏类).文本(NavTitle。text())；导航标题。文字($ this。text())；$this.next().移除类(HiddenClass)；mainList.css('left ')，parsent(主列表。CSS(' left ')-NavWidth ' px ')；e . PreventDefault()；}}));var backArrow=navTitle.prev()、navWidth=nav.width()、firstSubLevel=subLevels.eq(0)、docStyle=document。文档元素。style、slideDuration=0、timingRatio=1000if(docStyle .WebkitTransition！==未定义)幻灯片持续时间=parseFloat(第一个子级别。CSS('-web kit-transition-duration ')* TimingRatio；if(docStyle .蚊子。==未定义)幻灯片持续时间=parseFloat(第一个子级别。CSS('-moz-transition-duration ')* Timingrati；if(docStyle .翻译！==未定义)幻灯片持续时间=parseFloat(第一个子级别。CSS('-o-transition-duration ')* TimingRatio；});半铸钢钢性铸铁(铸造半钢)

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

正文{ font-size : 14pxfont-family : Arial背景： # f5f 5 F8；}.js { position:absolute绝对值宽度宽度：320像素高度：480 px前：50%；左侧：50%;边距：-280像素0-160像素；飞越：隐藏；-web套件-边框-半径：5 px-moz-边界-半径：5 px边界半径：5像素；背景# fff-web kit-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 .文件{背景图像：无；}.js .隐藏{ display:none}。js * { font-size :14 px字体粗细：400；余量：0划水：0;列表式：无；}.js div { position:relativez索引：1;高度：44px文本对齐：居中；font-size :14 px线高：44 pxcolor : # ffft ext-shadow :0-1px 0 rgba(0，0，0，4);背景： # 7f 94 B0背景：-网络套件-渐变（线性，0 0,0 100%,色停(0，#b5c0ce)，色停(0.5，#889bb3)，色停(0.51，#7f94b0)，色停(1，# 6d 83 a1))；背景：-moz-线性梯度(顶部中心、#b5c0ce、#889bb3 22px、#7f94b0 23px、# 6d 83 a1)；边框-底部：1px实心# 2d3033-web套件-边框-左上角-半径：5 px-web套件-边框-右上角-半径：5 px-moz-border-radius-topleft :5 px；-moz-border-radius-top right :5 px；边框-左上角-半径：5 px边框-右上角-半径：5 px}.js div a { height :31 pxtop :7 pxleft :20 pxfont-size :14 px；线高：31 pxcolor : # fffbackground : URL('./images//center。png '；}.js div，a .js div a:before .js div a :后{位置：绝对；}.{左：-13px前js div a :content:url('./images//左。png '；}.{右：-10px后js div a :top:0content:url('./images//对。png '；}.js div a :活动{ opa city 3360.65}.js a {装潢：无；}.js ul a { display : blockcolor : # 000 padd :8 em 18pxborder-bottom :1 px实心# e0e0e 0 background : URL(' images/next。png ')无重复94% 50%;}.js ul a :悬停{底色： # EDF 3fe}.js a :焦点{轮廓e :无；}.js ul { position : absolutetop :0填充-top :45 px；宽度：100%;-网络套件-左侧交通：4s简易版；-蚊子-左转：号公路。4s缓解版；-o-transit :左转。4s缓解；}.js ul { left:0}。js ul ul { left:320px}有效果图，有代码看起来非常明了，希望大家喜欢。