jQuery和CSS3 多层变形汉堡菜单

  • 源码大小:7.46KB
  • 所需积分:1积分
  • 源码编号:19JP-3469
  • 浏览次数:559次
  • 最后更新:2023年06月16日
  • 所属栏目:其他
我要下载
加入收藏
本站默认解压密码:19jp.com 或 19jp_com

简介

jQuery和CSS3支持的多级汉堡导航,在关闭时将菜单项折叠到汉堡按钮的栏中,反之亦然。

如何使用它:

1.为多级汉堡导航编写HTML代码。

  1. <nav class="menu">
  2. <header>Menu <span>×</span></header>
  3. <ol>
  4. <li class="menu-item"><a href="#0">Home</a></li>
  5. <li class="menu-item"><a href="#0">About</a></li>
  6. <li class="menu-item">
  7. <a href="#0">JavaScript</a>
  8. <ol class="sub-menu">
  9. <li class="menu-item"><a href="#0">jQuery</a></li>
  10. <li class="menu-item"><a href="#0">React</a></li>
  11. <li class="menu-item"><a href="#0">Vue</a></li>
  12. </ol>
  13. </li>
  14. <li class="menu-item">
  15. <a href="#0">HTML</a>
  16. <ol class="sub-menu">
  17. <li class="menu-item"><a href="#0">XML</a></li>
  18. <li class="menu-item"><a href="#0">HTML5</a></li>
  19. <li class="menu-item"><a href="#0">XHTML</a></li>
  20. </ol>
  21. </li>
  22. <li class="menu-item"><a href="#0">Contact</a></li>
  23. </ol>
  24. <footer>
  25. <button aria-label="Toggle Menu">Toggle</button>
  26. </footer>
  27. </nav>

2.必要的CSS和CSS3样式。可以随意覆盖默认变量以自定义动画速度和放松功能。

  1. nav {
  2. --duration: 0.5s;
  3. --easing: ease-in-out;
  4. position: relative;
  5. width: 420px;
  6. margin: 20px;
  7. }
  8.  
  9. nav ol {
  10. list-style-type: none;
  11. margin: 0;
  12. padding: 0;
  13. }
  14.  
  15. nav li {
  16. margin: -4px 0 0 0;
  17. }
  18.  
  19. nav a {
  20. display: block;
  21. text-decoration: none;
  22. background: #fff;
  23. transform-origin: 0 0;
  24. transition: transform var(--duration) var(--easing), color var(--duration) var(--easing);
  25. transition-delay: var(--delay-out);
  26. border-radius: 4px;
  27. padding: 1em 1.52em;
  28. }
  29.  
  30. nav a:hover {
  31. background: #efefef;
  32. }
  33.  
  34. nav .sub-menu a {
  35. font-size: 0.9em;
  36. color: #666666;
  37. border-left: 2em solid white;
  38. padding: 0.75em;
  39. background: linear-gradient(to right, #ddd 2px, #fff 2px);
  40. }
  41.  
  42. nav .sub-menu a:hover {
  43. background: linear-gradient(to right, #ddd 2px, #efefef 2px);
  44. }
  45.  
  46. nav header {
  47. font-weight: 600;
  48. display: block;
  49. background: rgba(255, 255, 255, 0.5);
  50. transform-origin: 0 0;
  51. transition: transform var(--duration) var(--easing), color var(--duration) var(--easing);
  52. transition-delay: var(--delay-out);
  53. border-radius: 4px;
  54. padding: 1em 1.52em;
  55. }
  56.  
  57. nav header span {
  58. border: none;
  59. background: transparent;
  60. font-size: 1.5em;
  61. padding: 0;
  62. cursor: pointer;
  63. line-height: 1;
  64. float: right;
  65. }
  66.  
  67. nav footer button {
  68. position: absolute;
  69. top: 0;
  70. left: 0;
  71. border: none;
  72. padding: calc(1em - 2px);
  73. width: 100%;
  74. transform-origin: 0 0;
  75. transition: transform var(--duration) var(--easing);
  76. transition-delay: calc(var(--duration) + (.1s * (var(--count) / 2)));
  77. cursor: pointer;
  78. outline: none;
  79. background: #cdcdcd;
  80. opacity: 0;
  81. }
  82.  
  83. nav.closed a,
  84. nav.closed header {
  85. transform: translateY(calc(var(--top) * -1)) scaleY(0.1) scaleX(0.2);
  86. transition-delay: var(--delay-in);
  87. color: transparent;
  88. }
  89.  
  90. nav.closed footer button {
  91. transition-delay: 0s;
  92. transform: scaleY(0.7) scaleX(0.2);
  93. }

3.在文档末尾加载所需的jQuery库。

  1. <script src="/path/to/cdn/jquery.min.js"></script>

4.当您切换汉堡导航时,启用展开和折叠动画的主JavaScript。

  1. var $els = $('.menu a, .menu header');
  2. var count = $els.length;
  3. var grouplength = Math.ceil(count/3);
  4. var groupNumber = 0;
  5. var i = 1;
  6. $('.menu').css('--count',count+'');
  7. $els.each(function(j){
  8. if ( i > grouplength ) {
  9. groupNumber++;
  10. i=1;
  11. }
  12. $(this).attr('data-group',groupNumber);
  13. i++;
  14. });
  15.  
  16. $('.menu footer button').on('click',function(e){
  17. e.preventDefault();
  18. $els.each(function(j){
  19. $(this).css('--top',$(this)[0].getBoundingClientRect().top + ($(this).attr('data-group') * -15) - 20);
  20. $(this).css('--delay-in',j*.1+'s');
  21. $(this).css('--delay-out',(count-j)*.1+'s');
  22. });
  23. $('.menu').toggleClass('closed');
  24. e.stopPropagation();
  25. });

预览截图