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

前端技术 2023/09/01 JavaScript

效果图：

目前市场上越来越流行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;
}

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

本文地址：https://www.stayed.cn/item/2515

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案