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

 
使用jQuery开发iOS风格的页面导航菜单_第2张图片
申请达人,去除赞助商链接

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

 

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

 

 

你可能感兴趣的:(使用jQuery开发iOS风格的页面导航菜单)