Home  >  Article  >  Web Front-end  >  How to use jQuery technology to develop ios-style page navigation menu_jquery

How to use jQuery technology to develop ios-style page navigation menu_jquery

WBOY
WBOYOriginal
2016-05-16 15:48:13947browse

Rendering:

IOS-style operating systems and navigation methods are becoming more and more popular on the market. In today’s jQuery tutorial, we introduce how to generate an iPhone-style menu navigation.

HTML code

We use embedded 25edfb22a4f469ecb59f1190150159c6 to generate menu content and include it in c787b9a589a3ece771e842a6176cf8e9 tags, as follows:

<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

Use jQuery to query and traverse li and generate menu items, as follows:

$(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

Use an image to generate the 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;
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;
}

There are renderings and code that look very clear. I hope you like it.

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn