How to use jquery technology to develop iOS-style page navigation menu _jquery

Effect Chart:

With the increasingly popular iOS-style operating system and navigation in the marketplace, today's jquery tutorial introduces how to generate an iphone-style menu navigation.

HTML code

We use mosaic <li> to generate menu content and include it in <nav> tags as follows:

<nav>  

。。。 。。。

Javascript

Use jquery to query Traverse Li and Generate menu items as follows:

$ (function () {var nav = $ ("nav"), Navtitle = Nav.children (). A (), Navtitlelabel = Navtitle.text (), mainlist = Navtit
 
Le.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.documentelem
 
Ent.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

Use a picture to generate a button at the top of the page:

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; p
adding:0;
List-style:none; }. js > div {position:relative; z-index:1; height:44px; text-align:center; font-size:14px; line-height:44px; color: #f
ff
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; c Ontent: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:.8e
M 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-to
p: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;}

The

has the effect chart, the code looks very clear, hoped everybody likes.