手游网站平台电脑版鼠标右键自定义菜单栏 - 磁云互联

*{ margin: 0; padding: 0;}
a{ text-decoration: none;}
ul{ list-style: none;}
html,body{}
#menu{ position: absolute; width: 200px; height: 277px; border: 3px solid #ff88e2; border-radius: 5px; display: none; backface-visibility: hidden;}
#menu ul li{ position: relative; height: 45px; transition: 0.5s}
#menu ul li div.icon{ position: absolute; left: 5px; top: 5px; width: 40px; height: 35px; background: url("./imges/icon.png") no-repeat;}
#menu ul.up li:nth-child(1) div.icon{ background-position: 0 0; transition: 0.3s}
#menu ul.up li:nth-child(2) div.icon{ background-position: -40px 0; transition: 0.3s}
#menu ul.up li:nth-child(3) div.icon{ background-position: -80px 0; transition: 0.3s}
#menu ul.down li:nth-child(1) div.icon{ background-position: -120px 0; transition: 0.3s}
#menu ul.down li:nth-child(2) div.icon{ background-position: -160px 0; transition: 0.3s}
#menu ul.down li:nth-child(3) div.icon{ background-position: -200px 0; transition: 0.3s}
#menu ul li p{ position: absolute; left: 60px; width: 50%; font-size: 18px; color: rgba(0, 0, 0, 0.8); line-height: 45px; text-align: center; transition: 0.8s}
#menu div.line{ height: 1px; width: 90%; background: #ff88e2; margin: 3px 10px;}
#menu ul li:hover{ background: rgba(199, 154, 255, .2);}
#menu ul li:hover p{ color: #ff88e2;text-shadow: #4e063a 2px 1px 2px;}
#menu ul.up li:nth-child(1):hover div.icon{ background-position: 0 -35px;}
#menu ul.up li:nth-child(2):hover div.icon{ background-position: -40px -35px;}
#menu ul.up li:nth-child(3):hover div.icon{ background-position: -80px -35px;}
#menu ul.down li:nth-child(1):hover div.icon{ background-position: -120px -35px;}
#menu ul.down li:nth-child(2):hover div.icon{ background-position: -160px -35px;}
#menu ul.down li:nth-child(3):hover div.icon{ background-position: -200px -35px;}
#menu div.mask{ width: 150px; height: 150px; position: absolute; overflow: hidden; }
#menu div.mask div.cat{ background: url("../../imges/cat.gif")no-repeat; width: 150px; height: 150px; position: absolute;}
#menu div#maskT{ top: -153px; margin-left: 25px;}
#menu #maskT>.cat{ bottom: -153px;transform: rotate(270deg);}
#menu div#maskB{ bottom: -153px; margin-left: 25px;}
#menu #maskB>.cat{ top: -153px;transform: rotate(-270deg);}
#menu div#maskL{ left: -153px;}
#menu #maskL>.cat{ right: -153px;transform: rotateY(180deg);}
#menu div#maskR{ left: 203px;}
#menu #maskR>.cat{ left: -153px;}
#menu:hover div#maskT div.cat{ animation: move1 4s 8s forwards;}
#menu:hover div#maskB div.cat{ animation: move2 4s 12s forwards;}
#menu:hover div#maskL div.cat{ animation: move3 4s forwards;}
#menu:hover div#maskR div.cat{ animation: move4 4s 4s forwards;}
@keyframes move1 {
0%{ transform: translate(0px,0px) rotate(270deg);}
40%{ transform: translate(0px,-153px) rotate(270deg);}
60%{ transform: translate(0px,-153px) rotate(270deg);}
100%{ transform: translate(0px,0) rotate(270deg);}
}
@keyframes move2 {
0%{ transform: translate(0px,0px) rotate(-270deg);}
40%{ transform: translate(0px,153px) rotate(-270deg);}
60%{ transform: translate(0px,153px) rotate(-270deg);}
100%{ transform: translate(0px,0) rotate(-270deg);}
}
@keyframes move3 {
0%{ transform: translate(0px,0px) rotateY(180deg);}
40%{ transform: translate(-153px,0) rotateY(180deg);}
60%{ transform: translate(-153px,0) rotateY(180deg);}
100%{ transform: translate(0px,0) rotateY(180deg);}
}
@keyframes move4 {
0%{ transform: translate(0px,0px);}
40%{ transform: translate(153px,0);}
60%{ transform: translate(153px,0);}
100%{ transform: translate(0px,0);}
}
h1{ width: 300px; margin: 50px auto; color: white; }

复制代码

<div id="menu">
<div id="maskT" class="mask"><div class="cat"></div></div>
<div id="maskB" class="mask"><div class="cat"></div></div>
<div id="maskL" class="mask"><div class="cat"></div></div>
<div id="maskR" class="mask"><div class="cat"></div></div>
<ul class="up">
<li><a href="#"><div class="icon"></div><p>菜单栏一</p></a></li>
<li><a href="#"><div class="icon"></div><p>菜单栏二</p></a></li>
<li><a href="#"><div class="icon"></div><p>菜单栏三</p></a></li>
</ul>
<div class="line"></div>
<ul class="down">
<li><a href="#"><div class="icon"></div><p>菜单栏四</p></a></li>
<li><a href="#"><div class="icon"></div><p>菜单栏五</p></a></li>
<li><a href="#"><div class="icon"></div><p>菜单栏六</p></a></li>
</ul>
</div>
<script type="text/javascript">
document.oncontextmenu=function(ev){
ev=ev||event;
var x = ev.clientX;
var y = ev.clientY;
var menu = document.querySelector("#menu");
menu.style.display="block";
menu.style.left = x+"px";
menu.style.top = y+"px";
ev.preventDefault();
};
document.onclick=function(){
var menu = document.querySelector("#menu");
menu.style.display="none";
}
</script>

复制代码