Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
Menu Item
Menu Item
Menu Item
Menu Item
Menu Item
Menu Item
hover close to the menu
css
body, html { margin: 0; padding: 0; width: 100%; height: 100%; background-color:#26394E ; } #menu { height: 100%; position: fixed; background-color: #FED057; width: 300px; transition: 1000ms all cubic-bezier(0.19, 1, 0.22, 1); transform: translateX(-100%); left: 60px; } #menu.expanded { transform: translateX(0%); left: 0px; } .menu-inner { width: 100%; height: 100%; position: relative; } #blob { top: 0; z-index: -1; right: 60px; transform: translateX(100%); height: 100%; position: absolute; } #blob-path { height: 100%; fill: #FED057; } .hamburger { right: 20px; position: absolute; width: 20px; height: 20px; margin-top: -10px; } .hamburger .line { width: 100%; height: 4px; background-color: #fff; position: absolute; } .hamburger .line:nth-child(2) { top: 50%; margin-top: -2px; } .hamburger .line:nth-child(3) { bottom: 0; } h1 { position: fixed; right: 0; margin: 0; } ul { padding: 0; list-style: none; width: 80%; margin-left: 10%; position: absolute; top: 10px; } ul li { color: #fff; font-family: sans-serif; padding: 20px 0; } h2 { position: absolute; left: 50%; color: #fff; margin: 0; font-size: 16px; font-family: sans-serif; font-weight: 100; }
JavaScript
$(window).load(function(){ var height = window.innerHeight, x= 0, y= height/2, curveX = 10, curveY = 0, targetX = 0, xitteration = 0, yitteration = 0, menuExpanded = false; blob = $('#blob'), blobPath = $('#blob-path'), hamburger = $('.hamburger'); $(this).on('mousemove', function(e){ x = e.pageX; y = e.pageY; }); $('.hamburger, .menu-inner').on('mouseenter', function(){ $(this).parent().addClass('expanded'); menuExpanded = true; }); $('.menu-inner').on('mouseleave', function(){ menuExpanded = false; $(this).parent().removeClass('expanded'); }); function easeOutExpo(currentIteration, startValue, changeInValue, totalIterations) { return changeInValue * (-Math.pow(2, -10 * currentIteration / totalIterations) + 1) + startValue; } var hoverZone = 150; var expandAmount = 20; function svgCurve() { if ((curveX > x-1) && (curveX < x+1)) { xitteration = 0; } else { if (menuExpanded) { targetX = 0; } else { xitteration = 0; if (x > hoverZone) { targetX = 0; } else { targetX = -(((60+expandAmount)/100)*(x-hoverZone)); } } xitteration++; } if ((curveY > y-1) && (curveY < y+1)) { yitteration = 0; } else { yitteration = 0; yitteration++; } curveX = easeOutExpo(xitteration, curveX, targetX-curveX, 100); curveY = easeOutExpo(yitteration, curveY, y-curveY, 100); var anchorDistance = 200; var curviness = anchorDistance - 40; var newCurve2 = "M60,"+height+"H0V0h60v"+(curveY-anchorDistance)+"c0,"+curviness+","+curveX+","+curviness+","+curveX+","+anchorDistance+"S60,"+(curveY)+",60,"+(curveY+(anchorDistance*2))+"V"+height+"z"; blobPath.attr('d', newCurve2); blob.width(curveX+60); hamburger.css('transform', 'translate('+curveX+'px, '+curveY+'px)'); $('h2').css('transform', 'translateY('+curveY+'px)'); window.requestAnimationFrame(svgCurve); } window.requestAnimationFrame(svgCurve); });
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>SVG 粘性悬停菜单-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号