使用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.  
24. </ul>
25. 。。。 。。。

 

 

 

Javascript

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

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

 

 

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. }

 

 

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