导航菜单

带动画特效圆形导航菜单jQuery特效

PetitQPetitQ 导航菜单 2018-12-21 1.97K 0
收藏
阿里云


这是一款 jQuery 带动画特效的圆形导航菜单特效。该导航菜单在被点击时，会以动画的方式移动到屏幕中间，并展开为一个圆形菜单，效果非常炫酷。

使用方法

在页面中引入 jquery 和 TweenMax.js 的文件。

也想出现在这里？联系我们吧
创客主机
  1. <script src="assets/js/jquery.min.js"></script>
  2. <script src="assets/js/TweenMax.min.js"></script>

HTML 结构

该圆形导航菜单的 HTML 结构如下。

  1. <header style="background: URL(path/to/image.jpg) no-repeat center center fixed;">
  2.   <ul class="navigation">
  3.  
  4.     <!-- navigation START -->
  5.     <li data-width="420" data-height="420">
  6.       <a href="#">Home</a>
  7.     </li>
  8.     ...
  9.     <!-- navigation END -->
  10.  
  11.     <!-- navigation:background-helper START -->
  12.     <div class="header-transparent"></div>
  13.     <!-- navigation:background-helper END -->
  14.  
  15.     <!-- navigation:trigger START -->
  16.     <div id="menu-trigger">
  17.       <div id="hamburger">
  18.         <span></span>
  19.         <span></span>
  20.         <span></span>
  21.       </div>
  22.       <div id="close">
  23.         <span></span>
  24.         <span></span>
  25.       </div>
  26.     </div>
  27.     <!-- navigation:trigger END -->
  28.  
  29.   </ul>
  30. </header>

CSS 样式

然后为该圆形导航菜单添加下面的 CSS 样式。

  1. #menu-trigger {
  2. width: 100px;
  3. height: 100px;
  4. top: -34px; left: 50%;
  5. margin-left: -50px;
  6. position: absolute;
  7. cursor: pointer;
  8. background: rgba(255, 255, 255, 1);
  9. border-radius: 50%;
  10. z-index: 1000;
  11. #hamburger {
  12.   position: absolute;
  13.   height: 100%;
  14.   width: 100%;
  15.   span {
  16.     transition: .25s ease-in-out;
  17.     width: 48px;
  18.     height: 4px;
  19.     position: relative;
  20.     top: 24px;
  21.     left: 26px;
  22.     margin: 10px 0;
  23.     &:nth-child(1) {
  24.       transition-delay: .5s;
  25.     }
  26.     &:nth-child(2) {
  27.       transition-delay: .625s;
  28.     }
  29.     &:nth-child(3) {
  30.       transition-delay: .75s;
  31.     }
  32.   }
  33. }
  34. #close {
  35.   position: absolute;
  36.   height: 100%;
  37.   width: 100%;
  38.   transform: rotate(45deg);
  39.   span {
  40.     transition: .25s ease-in-out;
  41.     &:nth-child(1) {
  42.       height: 0%;
  43.       width: 4px;
  44.       position: absolute;
  45.       top: 25%;
  46.       left: 48px;
  47.       transition-delay: 0s;
  48.     }
  49.     &:nth-child(2) {
  50.       width: 0%;
  51.       height: 4px;
  52.       position: absolute;
  53.       left: 25%;
  54.       top: 48px;
  55.       transition-delay: .25s;
  56.     }
  57.   }
  58. }
  59. &.open {
  60.   box-shadow: 0 15px 31px rgba(0,0,0,0.08), 0 7px 15px rgba(0,0,0,0.04);
  61.   #hamburger {
  62.     span {
  63.       width: 0%;
  64.       &:nth-child(1) {
  65.         transition-delay: 0s;
  66.       }
  67.       &:nth-child(2) {
  68.         transition-delay: .125s;
  69.       }
  70.       &:nth-child(3) {
  71.         transition-delay: .25s;
  72.       }
  73.     }
  74.   }
  75.   #close {
  76.     span {
  77.       &:nth-child(1) {
  78.         height: 50%;
  79.         transition-delay: .625s;
  80.       }
  81.     }
  82.     span {
  83.       &:nth-child(2) {
  84.         width: 50%;
  85.         transition-delay: .375s;
  86.       }
  87.     }
  88.   }
  89. }
  90. }

官方网址：https://coidea.website/categories/challenges/creative-radial-menu-with-tweenmax/

带动画特效圆形导航菜单 jQuery 特效

已有 493 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址

查看演示 咨询客服

专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！

创客主机
收藏
赞(1)

相关文章

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务！

登录