我正在浏览一些设计灵感网站,很久以前就发现了一个菜单,并从中获得了灵感。
当我点击黑色背景的产品时,菜单项应该从左侧显示。 我使用GSAP实现了动画部分。 我希望菜单项可以包裹到红色圆圈的圆角和可见红色区域的中心。 问题是菜单项没有从圆圈的中心计算,而是被等距地放置在圆圈的边缘上。有没有一种动态的方式来计算它或者我应该通过静态的边距和填充来放置它们。并且,您可以看到,如果菜单项有两个或更多单词,它应该换行并将自己对齐到本身的中心。 我使用断点只是为了实现布局。
有人能指点我正确的方向,并帮助我达到我的目标吗?谢谢。
这里是灵感图片:https://i.ibb.co/QJFmsXJ/Untitled.png
jQuery(document).ready(function($) {
var $mainmenu = $('.menu');
var $menuItemsWrap = $(".sub-menu");
var $MenuItems = $(".sub-menu li");
$('.menu').click(function() {
$('.menu-dummy').css({
"display": "block",
"z-index": "5"
});
$('.menu').css({
"display": "none"
});
TweenMax.to($menuItemsWrap, 0.6, {
width: 400,
height: 400,
ease: Power1.easeIn
});
TweenMax.staggerTo($MenuItems, 0.5, {
x: 80,
opacity: 1,
ease: Power1.easeOut,
delay: 0.6
}, 0.1);
});
$('.menu-dummy').click(function() {
$('.menu-dummy').css({
"display": "none",
});
$('.menu').css({
"display": "block"
});
TweenMax.staggerTo($MenuItems, 0.5, {
x: -80,
autoAlpha: 1,
ease: Power1.easeOut
}, 0.05);
TweenMax.to($menuItemsWrap, 0.6, {
width: 0,
height: 0,
ease: Power1.easeIn,
delay: 1
});
});
});
body {
margin: 0;
padding: 0;
}
.bubble-menu {
position: relative;
width: 600px;
height: 600px;
background: grey;
}
.menu.menu-style1 {
z-index: 4;
}
.menu.menu-style1,
.menu-dummy.menu-style1 {
color: #fff;
position: relative;
width: 150px;
height: 150px;
position: absolute;
top: 50%;
left: 0;
transform: translate(-50%, -50%);
}
.menu-wrap {
background-color: black;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
position: relative;
z-index: 3;
cursor: pointer;
}
.menu-wrap h3 {
font-size: 20px;
font-family: sans-serif;
user-select: none;
transform: rotate(-90deg) translateY(25px);
}
.menu-wrap i {
font-size: 25px;
line-height: 25px;
}
a {
color: black;
}
.sub-menu {
position: absolute;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
top: 50%;
left: 0;
width: 0;
height: 0;
background: red;
display: flex;
flex-direction: column;
transform: translate(-50%, -50%);
z-index: 3;
}
.sub-menu ul {
display: flex;
flex-direction: column;
justify-content: space-evenly;
width: 100%;
height: 100%;
text-align: center;
list-style: none;
padding: 0;
border-radius: 50%;
}
.sub-menu li {
transform: translate(-80px);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/a2e210f715.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<div class="bubble-menu">
<div class="menu menu-style1">
<div class="menu-wrap">
<h3>Products</h3>
<i class="fa fa-angle-right" aria-hidden="true"></i>
</div>
</div>
<div class="menu-dummy menu-style1">
<div class="menu-wrap">
<h3>Products</h3>
<i class="fa fa-angle-right" aria-hidden="true"></i>
</div>
</div>
<div class="sub-menu">
<ul>
<li><a href="#">menu1 very big</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
</ul>
<ul>
<li><a href="#">menu4 big</a></li>
<li><a href="#">menu5</a></li>
<li><a href="#">menu6</a></li>
</ul>
</div>
</div>
这是 CodePen 的 链接