这是一款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
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!