变形特效固定导航菜单

2018101917542125

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

HTML 结构:

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

<nav>
  <div id="drop">
    <div>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
</nav>

然后创建全屏导航菜单。

<ul>
  <li>Home</li>
  <li>Portfolio</li>
  <li>Jobs</li>
  <li>Contact</li>
  <li>About</li>
</ul>
CSS样式
 
为导航菜单添加下面的CSS样式。
#drop, nav { background-color: #f8f8f8 }
 
nav {
  width: 90%;
  height: 90px;
  padding: 0 5%;
  position: relative;
  justify-content: flex-start;
  align-items: center
}
 
nav~ul {
  position: absolute;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  left: 1%;
  right: 1%;
  opacity: 0;
  visibility: hidden;
  z-index: 2;
  list-style: none;
  transition: 0s
}
 
nav~ul>li {
  color: #70f;
  padding: 10px;
  cursor: pointer;
  font-size: 30px
}
 
nav~ul>li:hover { filter: brightness(200%) }
 
nav.open~ul {
  transition: .75s ease-in-out;
  visibility: visible;
  opacity: 1
}
 
#drop {
  cursor: pointer;
  position: fixed;
  width: 70px;
  height: 70px;
  border-radius: 0 50% 50%;
  transform: rotate(45deg);
  transition: border-radius .5s
}
 
nav.open>#drop {
  transition: .5s ease-in-out;
  box-shadow: 0 0 0 1000px #f8f8f8, inset 0 0 0 20px #f8f8f8;
  position: relative
}
 
#drop.active {
  border-radius: 50%;
  animation: drop .3s forwards
}
 
#drop>div {
  transform: rotate(-45deg);
  height: 100%;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center
}
 
#drop span {
  display: block;
  background-color: #70f;
  width: 40px;
  height: 3px;
  margin: 5px 0;
  transition: .5s
}
 
#drop span.open:nth-child(1) { transform: rotate(45deg) translate(5px, 5px) }
 
#drop span.open:nth-child(2) { transform: rotate(-45deg) translate(5px, -5px) }
 
#drop span.open:nth-child(3) { opacity: 0 }
 
@keyframes 
drop { 0% {
transform:translateY(0) rotate(45deg)
}
50% {
transform:translateY(30px) rotate(45deg)
}
100% {
transform:translateY(10px) rotate(45deg)
}
}

初始化插件

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

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

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

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

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

下载权限

查看
  • 免费下载
    评论并刷新后下载
    登录后下载

查看演示

  • {{attr.name}}:
您当前的等级为
登录后免费下载登录 小黑屋反思中,不准下载! 评论后刷新页面下载评论 支付以后下载 请先登录 您今天的下载次数(次)用完了,请明天再来 支付积分以后下载立即支付 支付以后下载立即支付 您当前的用户组不允许下载升级会员
您已获得下载权限 您可以每天下载资源次,今日剩余

给TA打赏
共{{data.count}}人
人已打赏
导航菜单

Bootstrap4滑动侧边栏特效

2022-2-28 15:48:02

导航菜单

Corenav多用途导航菜单插件

2022-2-28 15:59:18

重要声明

本站资源大多来自网络,如有侵犯你的权益请联系管理员-柒村长QQ21660010 我们会第一时间进行审核删除。站内资源为网友个人学习或测试研究使用,未经原版权作者许可,禁止用于任何商业途径!请在下载24小时内删除!


如果遇到付费才可观看的文章,建议升级终身VIP。全站所有资源任意下免费看”。本站资源少部分采用7z压缩,为防止有人压缩软件不支持7z格式,7z解压,建议下载7-zip,zip、rar解压,建议下载WinRAR

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索