我已经制作了一个带有子菜单的圆形菜单，由于某些原因它不会叠加在他的父母之上。
function calcElementSemiCirc(element, radius){
var testLInum = element.children.length;
var startAngle = Math.PI / testLInum,
angle = startAngle / 2,
offset = 350;
var test ={};
if(radius==null) radius = 160;
test.X =[];
test.Y =[];
for ( var i = 0; i < testLInum; i++ ) {
var leftX = radius * Math.cos( angle ) + offset;
var topY = radius * Math.sin( angle );
angle += startAngle;
test.X.push(leftX);
test.Y.push(topY);
}
test.X.reverse();
test.Y.reverse();
return test;
}
var clickCount = 0; // <-- add this line
var animationMain;
var animationSub;
var animationSecLvl;
var animationMainSecLvl;
document.getElementsByClassName("menu-open-button")[0].addEventListener("click", function () {
clickCount++;
var test = calcElementSemiCirc(document.getElementsByClassName("menu-item-wrap")[0], 160);
if (clickCount === 2) clickCount = 0;
if (clickCount === 1) {
animationMain = TweenMax.to(".menu-item-wrap", 1, {delay:0,opacity: 1, zIndex:5, y:135, x:0, ease:Circ.easeOut, onComplete:someFunction}, 0.2);
animationMain.duration(0.35);
function someFunction() {
animationSub = new TimelineMax();
animationSub.set(".menu-item-wrap > li", {/*autoAlpha:0, left:0, */zIndex: 5});
animationSub.to(".menu-item-wrap > li", 1, {delay:0,opacity: 1, zIndex:5, onReverseComplete:myFunction,
x: function(index, target) {
return test.X[index]-350;
},
y: function(index, target) {
return test.Y[index]-135;
}, ease:Elastic.easeOut, onComplete:function () {
// for(var u=0; u<document.getElementsByClassName("menu-item-wrap")[0].children.length;u++)
// document.getElementsByClassName("menu-item-wrap")[0].children[u].style.zIndex = 5;
// document.getElementsByClassName("menu-item-wrap")[0].children[0].style.opacity = 0.99;
}}, 0.2);
animationSub.duration(1);
}
function myFunction(){
animationMain.reverse();
}
// animationSecLvl = TweenMax.to(".menu-item-wrap > li > ul > li", 1, {delay:0,
// x: function(index, target) {
// return test.X[index]-350;
// },
// y: function(index, target) {
// return test.Y[index]-135+25;
// }, ease:Elastic.easeOut}, 0.2);
document.getElementsByClassName("semi-circ")[0].style.minWidth = test.X[5]/1+"px";
document.getElementsByClassName("semi-circ")[0].style.minHeight = test.X[5]/1+"px";
//document.getElementsByClassName("semi-circ")[0].style.minHeight = test.Y[2]+80+"px";
document.getElementsByClassName("semi-circ")[0].style.left = -test.X[5]+(test.X[5]/2)+40+"px";
document.getElementsByClassName("semi-circ")[0].style.top = -test.X[5]/1.8+"px";
}
if (clickCount === 0) {
animationSub.reverse().timeScale(1.25);
}
});
var list = document.getElementsByClassName("menu-item-wrap")[0].children;
var test;
var clickCountSecLvl = 0;
for (var j = 0; j < list.length; j++) {
list[j].addEventListener("click", function (e) {
var elements;
if (e.target == this) {
console.log("this");
console.log(e.target.getElementsByTagName("ul")[0]);
elements = e.target.getElementsByTagName("ul")[0];
}
else{
console.log("not this");
console.log(e.target.parentNode.getElementsByTagName("ul")[0]);
// console.log(e.target.parentNode.parentNode);
elements = e.target.parentNode.getElementsByTagName("ul")[0];
console.log(e.target);
}
window.test = calcElementSemiCirc(elements, 85);
clickCountSecLvl++;
if (clickCountSecLvl === 2) clickCountSecLvl = 0;
if (clickCountSecLvl === 1) {
var elements2 = elements.getElementsByTagName("li");
animationMainSecLvl = TweenMax.to(elements, 1, {
delay: 0,
opacity: 1, zIndex:10,
y: 135,
x: 0,
ease: Elastic.easeOut
}, 0.2);
animationSecLvl = TweenMax.to(elements2, 1, {
delay: 0,
opacity: 1, zIndex:10,
x: function (index, target) {
return test.X[index] - 350+((index+1));
},
y: function (index, target) {
return test.Y[index] - 135 + 55/*(elements2.length-(index+1))*/;
},
ease: Elastic.easeOut
}, 0.2);
}
if (clickCountSecLvl === 0) {
animationMainSecLvl.reverse();
animationSecLvl.reverse();
}
});
}body {
padding: 0;
margin: 0;
background: #596778;
color: #EEEEEE;
text-align: center;
font-family: "Lato", sans-serif;
}
@media screen and (max-width: 700px) {
body {
padding: 170px 0 0 0;
width: 100%
}
}
a {
color: inherit;
}
.menu-item-wrap{
margin: 0;
padding: 0;
background: #EEEEEE;
position: absolute;
color: #FFFFFF;
text-align: center;
}
.menu-item {
}
.menu-item,
.menu-open-button,
.menu-overlay{
margin: 0;
padding: 0;
background: #EEEEEE;
border-radius: 100%;
min-width: 80px;
min-height: 80px;
position: absolute;
color: #FFFFFF;
text-align: center;
line-height: 80px;
top: 0;
left: 0;
}
.menu-open {
display: none;
}
.lines {
width: 25px;
height: 3px;
background: #596778;
display: block;
position: absolute;
top: 50%;
left: 50%;
margin-left: -12.5px;
margin-top: -1.5px;
-webkit-transition: -webkit-transform 200ms;
transition: -webkit-transform 200ms;
transition: transform 200ms;
transition: transform 200ms, -webkit-transform 200ms;
}
.line-1 {
-webkit-transform: translate3d(0, -8px, 0);
transform: translate3d(0, -8px, 0);
}
.line-2 {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.line-3 {
-webkit-transform: translate3d(0, 8px, 0);
transform: translate3d(0, 8px, 0);
}
.menu-open:checked + .menu-open-button .line-1 {
-webkit-transform: translate3d(0, 0, 0) rotate(45deg);
transform: translate3d(0, 0, 0) rotate(45deg);
}
.menu-open:checked + .menu-open-button .line-2 {
-webkit-transform: translate3d(0, 0, 0) scale(0.1, 1);
transform: translate3d(0, 0, 0) scale(0.1, 1);
}
.menu-open:checked + .menu-open-button .line-3 {
-webkit-transform: translate3d(0, 0, 0) rotate(-45deg);
transform: translate3d(0, 0, 0) rotate(-45deg);
}
.menu {
/*margin: auto;*/
position: relative;
top: -180px;
bottom: 0;
left: 50%;
right: 50%;
width: 80px;
height: 80px;
text-align: center;
box-sizing: border-box;
font-size: 26px;
}
.semi-circ{
position: absolute;border-radius: 0 0 50% 50%;
}
/* .menu-item {
transition: all 0.1s ease 0s;
} */
.menu-item:hover {
background: #EEEEEE;
color: #3290B1;
}
.menu-open-button {
z-index: 2;
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
-webkit-transition-duration: 400ms;
transition-duration: 400ms;
-webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);
transform: scale(1.1, 1.1) translate3d(0, 0, 0);
cursor: pointer;
box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
left: 0;
}
.menu-open-button:hover {
-webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);
transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}
.blue {
background-color: #669AE1;
box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}
.blue:hover {
color: #669AE1;
text-shadow: none;
}
.green {
background-color: #70CC72;
box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}
.green:hover {
color: #70CC72;
text-shadow: none;
}
.red {
background-color: #FE4365;
box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}
.red:hover {
color: #FE4365;
text-shadow: none;
}
.purple {
background-color: #C49CDE;
box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}
.purple:hover {
color: #C49CDE;
text-shadow: none;
}
.orange {
background-color: #FC913A;
box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}
.orange:hover {
color: #FC913A;
text-shadow: none;
}
.lightblue {
background-color: #62C2E4;
box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}
.lightblue:hover {
color: #62C2E4;
text-shadow: none;
}
li{
list-style: none;
}
.menu-item-wrap ul, .menu-item-wrap ul li{
position: absolute;
top: 0;
left: 0;
/*max-height: 0;*/
/*overflow: hidden;*/
opacity: 0;
}
.semi-circ{
background-color: #3290B1;
}
.menu-open-button{
position: absolute;
z-index: 555;
}
.menu-item-wrap > li{
position: absolute;
z-index: -5;
}
.menu-overlay{
position: absolute;
z-index: 6;
}
.menu-item-wrap > li > ul{
position: absolute;
z-index: 5;
}
.menu-item-wrap > li > ul > li{
position: absolute;
z-index: 10!important;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenMax.min.js"></script>
</head>
<body>
<nav class="menu">
<div class="semi-circ"></div>
<input type="checkbox" href="#" class="menu-open" name="menu-open" id="menu-open" />
<label class="menu-open-button" for="menu-open">
<span class="lines line-1"></span>
<span class="lines line-2"></span>
<span class="lines line-3"></span>
</label>
<ul class="menu-item-wrap">
<li class="menu-item blue"><a href="#"> <i class="fa fa-anchor"></i> </a></li>
<li class="menu-item green"><a href="#"> <i class="fa fa-coffee"></i> </a>
<ul>
<li class="menu-item red"><a href="#"> <i class="fa fa-heart"></i> </a></li>
<li class="menu-item purple"><a href="#"> <i class="fa fa-microphone"></i> </a></li>
<li class="menu-item orange"><a href="#"> <i class="fa fa-star"></i> </a></li>
<li class="menu-item lightblue"><a href="#"> <i class="fa fa-diamond"></i> </a></li>
</ul>
<div class="menu-overlay"></div>
</li>
<li class="menu-item red"><a href="#"> <i class="fa fa-heart"></i> </a></li>
<li class="menu-item purple"><a href="#"> <i class="fa fa-microphone"></i> </a></li>
<li class="menu-item orange"><a href="#"> <i class="fa fa-star"></i> </a>
<ul>
<li class="menu-item red"><a href="#"> <i class="fa fa-heart"></i> </a></li>
<li class="menu-item purple"><a href="#"> <i class="fa fa-microphone"></i> </a></li>
<li class="menu-item orange"><a href="#"> <i class="fa fa-star"></i> </a></li>
</ul>
<div class="menu-overlay"></div>
</li>
<li class="menu-item lightblue"><a href="#"> <i class="fa fa-diamond"></i> </a></li>
</ul>
</nav>
<script>
</script>
</body>
</html>
白色的那些是子菜单。单击时，右侧的行为正确但左侧的元素位于其父元素后面而不是前面。我已经找到了答案，但我找不到任何答案。
奇怪的是，当我在浏览器中使用开发工具并手动将HTML内联的z-index更改为较低的值但它不能以编程方式工作时，它确实有效。