导航菜单

变形特效固定导航菜单

阿里云

这是一款 jQuery 和 CSS3 带变形特效的固定导航菜单。该导航菜单开始时固定在页面左上角,当用户向下滚动时,导航菜单以水滴变形的方式转换为圆形菜单,然后固定在页面的左上角位置。

HTML 结构:

该导航菜单的主菜单 HTML 结构如下:

也想出现在这里?联系我们
创客主机
  1. <nav>
  2.   <div id="drop">
  3.     <div>
  4.       <span></span>
  5.       <span></span>
  6.       <span></span>
  7.     </div>
  8.   </div>
  9. </nav>

然后创建全屏导航菜单。

  1. <ul>
  2.   <li>Home</li>
  3.   <li>Portfolio</li>
  4.   <li>Jobs</li>
  5.   <li>Contact</li>
  6.   <li>About</li>
  7. </ul>
  8. CSS样式
  9.  
  10. 为导航菜单添加下面的CSS样式。
  11. #drop, nav { background-color: #f8f8f8 }
  12.  
  13. nav {
  14.   width: 90%;
  15.   height: 90px;
  16.   padding: 0 5%;
  17.   position: relative;
  18.   justify-content: flex-start;
  19.   align-items: center
  20. }
  21.  
  22. nav~ul {
  23.   position: absolute;
  24.   flex-direction: column;
  25.   justify-content: center;
  26.   align-items: center;
  27.   left: 1%;
  28.   right: 1%;
  29.   opacity: 0;
  30.   visibility: hidden;
  31.   z-index: 2;
  32.   list-style: none;
  33.   transition: 0s
  34. }
  35.  
  36. nav~ul>li {
  37.   color: #70f;
  38.   padding: 10px;
  39.   cursor: pointer;
  40.   font-size: 30px
  41. }
  42.  
  43. nav~ul>li:hover { filter: brightness(200%) }
  44.  
  45. nav.open~ul {
  46.   transition: .75s ease-in-out;
  47.   visibility: visible;
  48.   opacity: 1
  49. }
  50.  
  51. #drop {
  52.   cursor: pointer;
  53.   position: fixed;
  54.   width: 70px;
  55.   height: 70px;
  56.   border-radius: 0 50% 50%;
  57.   transform: rotate(45deg);
  58.   transition: border-radius .5s
  59. }
  60.  
  61. nav.open>#drop {
  62.   transition: .5s ease-in-out;
  63.   box-shadow: 0 0 0 1000px #f8f8f8, inset 0 0 0 20px #f8f8f8;
  64.   position: relative
  65. }
  66.  
  67. #drop.active {
  68.   border-radius: 50%;
  69.   animation: drop .3s forwards
  70. }
  71.  
  72. #drop>div {
  73.   transform: rotate(-45deg);
  74.   height: 100%;
  75.   width: 100%;
  76.   flex-direction: column;
  77.   justify-content: center;
  78.   align-items: center
  79. }
  80.  
  81. #drop span {
  82.   display: block;
  83.   background-color: #70f;
  84.   width: 40px;
  85.   height: 3px;
  86.   margin: 5px 0;
  87.   transition: .5s
  88. }
  89.  
  90. #drop span.open:nth-child(1) { transform: rotate(45deg) translate(5px, 5px) }
  91.  
  92. #drop span.open:nth-child(2) { transform: rotate(-45deg) translate(5px, -5px) }
  93.  
  94. #drop span.open:nth-child(3) { opacity: 0 }
  95.  
  96. @keyframes 
  97. drop { 0% {
  98. transform:translateY(0) rotate(45deg)
  99. }
  100. 50% {
  101. transform:translateY(30px) rotate(45deg)
  102. }
  103. 100% {
  104. transform:translateY(10px) rotate(45deg)
  105. }
  106. }

初始化插件:

在页面 DOM 元素加载完毕之后,通过下面的方法来完成页面向下滚动时菜单的变形效果。

  1. $(window).scroll(function() {
  2.   var scroll = $(window).scrollTop();
  3.   if (scroll > 100) $('#drop').addClass('active');
  4.   else if (scroll < 80) $('#drop').removeClass('active');
  5. });

通过下面的代码来激活全屏菜单。

  1. $('#drop, nav ~ ul li').click(function() {
  2.   $('nav, #drop span').toggleClass('open');
  3.   $('body').toggleClass('hidden');
  4.   $(window).scrollTop(0);
  5. });

该 jQuery 和 CSS3 带变形特效的固定导航菜单的 github 地址为:https://github.com/nodediggity/menu-droplet-animation

变形特效固定导航菜单

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

演示地址 下载地址
收藏
(0)

发表回复

热销模板

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

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