zoukankan      html  css  js  c++  java
  • 使用jQuery开发iOS风格的页面导航菜单

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

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

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

     
  • 相关阅读:
    【python】opencv教程CV2模块——图片处理,裁剪缩放加边框
    【python】opencv教程CV2模块——画图,来左边跟我一起画星星在右边画彩虹
    【python】opencv教程CV2模块——图片处理,剪切缩放旋转
    【python】opencv教程CV2模块——批量视频截屏
    【python】opencv教程CV2模块——视频捕获,延时摄影视频、鬼畜表情包密集制作
    代码-JS之正则验证邮箱格式
    代码-JS之正则解决结巴程序
    代码-JS之IE+GOOGLE兼容函数
    代码-JS之正则replace函数
    代码-JS之下拉菜单
  • 原文地址:https://www.cnblogs.com/xiaochao12345/p/4684945.html
Copyright © 2011-2022 走看看