使用jQuery开发iOS风格的页面导航菜单

• 在线演示1
• 本地下载

 

 

申请达人，去除赞助商链接

iOS风格的操作系统和导航方式现在越来越流行，在今天的jQuery教程中，我们将介绍如何生成一个iphone风格的菜单导航。

HTML代码

我们使用镶嵌的<li>来生成菜单内容，并且包含在<nav>标签中，如下：

1. <nav>
2. <h1>导航菜单</h1>
3. <ul>
4. <li>
5. <h2>专题教程</h2>
6. <ul>
7. <li>
8. <h3>HTML专题教程</h3>
9. <ul>
10. <li><a href="http://www.gbin1.com/tutorials/html5-tutorial/html5-introduction">GBin1专题之HTML5教程 - 第一篇：HTML5介绍</a></li>
11. <li><a href="http://www.gbin1.com/tutorials/html5-tutorial/html5-new-elements">GBin1专题之HTML5教程 - 第二篇：HTML5元素</a></li>
12. <li><a href="http://www.gbin1.com/tutorials/html5-tutorial/html5-video">GBin1专题之HTML5教程 - 第三篇：HTML5 Video元素</a></li>
13. <li><a href="http://www.gbin1.com/tutorials/html5-tutorial/html5-video-doc">GBin1专题之HTML5教程 - 第四篇：HTML5 Video Doc</a></li>
14. <li><a href="http://www.gbin1.com/tutorials/html5-tutorial/html5-audio">GBin1专题之HTML5教程 - 第五篇：HTML5 Audio元素</a></li>
15. </ul>
16. <li>
17. <h3>GBin1热点秀</h3>
18. <ul>
19. <li><a href="http://www.gbin1.com/tutorials/hotspot/hotspot1/">GBin1专题之Web热点秀#1</a>
20. <li><a href="http://www.gbin1.com/tutorials/hotspot/hotspot2/">GBin1专题之Web热点秀#2</a>
21. <li><a href="http://www.gbin1.com/tutorials/hotspot/hotspot3/">GBin1专题之Web热点秀#3</a>
22. </ul>
23. </ul>
24. 。。。 。。。

 

 

Javascript

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

1. $(function(){
2. var nav = $("nav"),
3. navTitle = nav.children().first(),
4. navTitleLabel = navTitle.text(),
5. mainList = navTitle.next(),
6. subLevels = mainList.find("ul"),
7. hiddenClass = "hidden";
8. nav.addClass("js");
9. mainList.find("a:last-child").addClass("files");
10. subLevels.addClass(hiddenClass);
11. navTitle.wrap($("<div/>")).before($("<a/>", {
12. href: "#",
13. className: hiddenClass,
14. click: function(e){
15. var $this = $(this),
16. activeList = subLevels.filter(":visible:last"),
17. activeListParents = activeList.parents("ul");
18. navTitle.text($this.text());
19. if(activeListParents.length > 2)
20. $this.text(activeListParents.eq(1).prev().text());
21. else if (activeListParents.length > 1)
22. $this.text(navTitleLabel)
23. else
24. $this.addClass(hiddenClass).empty();
25. setTimeout(
26. function(){
27. activeList.addClass(hiddenClass);
28. }, slideDuration - 100
29. );
30. mainList.css("left", parseInt(mainList.css("left")) + navWidth + "px");
31. e.preventDefault();
32. }
33. }));
34. subLevels.prev().wrap($("<a/>", {
35. href:"#",
36. click: function(e){
37. var $this = $(this);
38. backArrow.removeClass(hiddenClass).text(navTitle.text());
39. navTitle.text($this.text());
40. $this.next().removeClass(hiddenClass);
41. mainList.css("left", parseInt(mainList.css("left")) - navWidth + "px");
42. e.preventDefault();
43. }
44. }));
45. var backArrow = navTitle.prev(),
46. navWidth = nav.width(),
47. firstSubLevel = subLevels.eq(0),
48. docStyle = document.documentElement.style,
49. slideDuration = 0,
50. timingRatio = 1000;
51. if(docStyle.WebkitTransition !== undefined)
52. slideDuration = parseFloat(
53. firstSubLevel.css("-webkit-transition-duration")
54. ) * timingRatio;
55. if(docStyle.MozTransition !== undefined)
56. slideDuration = parseFloat(
57. firstSubLevel.css("-moz-transition-duration")
58. ) * timingRatio;
59. if(docStyle.OTransition !== undefined)
60. slideDuration = parseFloat(
61. firstSubLevel.css("-o-transition-duration")
62. ) * timingRatio;
63. });

 

CSS

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

1. body {
2. font-size: 14px;
3. font-family: Arial;
4. background:#f5f5f8;
5. }
6. .js {
7. position:absolute;
8. width:320px;
9. height:480px;
10. top:50%;
11. left:50%;
12. margin:-280px 0 0 -160px;
13. overflow:hidden;
14. -webkit-border-radius:5px;
15. -moz-border-radius:5px;
16. border-radius:5px;
17. background:#fff;
18. -webkit-box-shadow:0 1px 2px rgba(0,0,0,.25);
19. -moz-box-shadow:0 1px 2px rgba(0,0,0,.25);
20. box-shadow:0 1px 2px rgba(0,0,0,.25);
21. }
22. .js .files {
23. background-image:none;
24. }
25. .js .hidden {
26. display:none;
27. }
28. .js * {
29. font-size:14px;
30. font-weight:400;
31. margin:0;
32. padding:0;
33. list-style:none;
34. }
35. .js > div {
36. position:relative;
37. z-index:1;
38. height:44px;
39. text-align:center;
40. font-size:14px;
41. line-height:44px;
42. color:#fff;
43. text-shadow:0 -1px 0 rgba(0,0,0,.4);
44. background:#7f94b0;
45. background:-webkit-gradient(
46. linear,
47. 0 0,
48. 0 100%,
49. color-stop(0,#b5c0ce),
50. color-stop(0.5,#889bb3),
51. color-stop(0.51,#7f94b0),
52. color-stop(1,#6d83a1)
53. );
54. background:-moz-linear-gradient(
55. top center,
56. #b5c0ce,
57. #889bb3 22px,
58. #7f94b0 23px,
59. #6d83a1
60. );
61. border-bottom:1px solid #2d3033;
62. -webkit-border-top-left-radius:5px;
63. -webkit-border-top-right-radius:5px;
64. -moz-border-radius-topleft:5px;
65. -moz-border-radius-topright:5px;
66. border-top-left-radius:5px;
67. border-top-right-radius:5px;
68. }
69. .js > div a {
70. height:31px;
71. top:7px;
72. left:20px;
73. font-size:14px;
74. line-height:31px;
75. color:#fff;
76. background:url('../images//center.png');
77. }
78. .js > div a, .js > div a:before, .js > div a:after {
79. position:absolute;
80. }
81. .js > div a:before {
82. left:-13px;
83. content:url('../images//left.png');
84. }
85. .js > div a:after {
86. right:-10px;
87. top:0;
88. content:url('../images//right.png');
89. }
90. .js > div a:active {
91. opacity:.65;
92. }
93. .js a {
94. text-decoration:none;
95. }
96. .js ul a {
97. display:block;
98. color:#000;
99. padding:.8em 18px;
100. border-bottom:1px solid #e0e0e0;
101. background:url('images/next.png') no-repeat 94% 50%;
102. }
103. .js ul a:hover {
104. background-color:#edf3fe;
105. }
106. .js a:focus {
107. outline:none;
108. }
109. .js ul {
110. position:absolute;
111. top:0;
112. padding-top:45px;
113. width:100%;
114. -webkit-transition:left .4s ease-out;
115. -moz-transition:left .4s ease-out;
116. -o-transition:left .4s ease-out;
117. }
118. .js ul {
119. left:0;
120. }
121. .js ul ul {
122. left:320px;
123. }

 

搞定！ 请参考在线演示查看效果，希望大家喜欢这个简单的效果！