电脑版鼠标右键自定义菜单栏
电脑版鼠标右键自定义菜单栏
  • 扩展项目
  • 功能
  • 协助费用
  • 80
  • 编辑语言
  • html+css
  • 二开难度
  • 一般
  • 支持版本
  • 电脑模板
  • 技术QQ
  • 28977233
协助费用80元
技术咨询
磁云互联

技术员负责人

售前及售后服务咨询,商务合作私人定制服务,其他技术支持服务!
向讲师提问:QQ交谈

手游网站平台电脑版鼠标右键自定义菜单栏

[复制链接]
磁铁网络授权认证 发表于 2021-9-25 00:51:09 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
未标题-1.png
安装方法:
下载素材包,解压上传网站根本目录
请点击此处下载

请先注册会员后在进行下载

已注册会员,请先登录后下载

文件名称:素材包.zip 
下载次数:0  文件大小:27.61 KB  售价:10金币 [记录]
下载权限: 不限 以上  [点击充值金币]  [签到领取金币]


进入后台 - 点击模板编辑 -找到指定页面文件,点击修改
加入一下代码
css样式代码:
  1.    *{ margin: 0; padding: 0;}
  2.         a{ text-decoration: none;}
  3.         ul{ list-style: none;}

  4.         html,body{}
  5.         #menu{ position: absolute; width: 200px; height: 277px; border: 3px solid #ff88e2; border-radius: 5px; display: none; backface-visibility: hidden;}

  6.         #menu ul li{ position: relative; height: 45px; transition: 0.5s}
  7.         #menu ul li div.icon{ position: absolute; left: 5px; top: 5px; width: 40px; height: 35px; background: url("./imges/icon.png") no-repeat;}

  8.         #menu ul.up li:nth-child(1) div.icon{ background-position: 0 0; transition: 0.3s}
  9.         #menu ul.up li:nth-child(2) div.icon{ background-position: -40px 0; transition: 0.3s}
  10.         #menu ul.up li:nth-child(3) div.icon{ background-position: -80px 0; transition: 0.3s}

  11.         #menu ul.down li:nth-child(1) div.icon{ background-position: -120px 0; transition: 0.3s}
  12.         #menu ul.down  li:nth-child(2) div.icon{ background-position: -160px 0; transition: 0.3s}
  13.         #menu ul.down  li:nth-child(3) div.icon{ background-position: -200px 0; transition: 0.3s}

  14.         #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}
  15.         #menu div.line{ height: 1px; width: 90%; background: #ff88e2; margin: 3px 10px;}

  16.         #menu ul li:hover{ background: rgba(199, 154, 255, .2);}
  17.         #menu ul li:hover p{ color: #ff88e2;text-shadow: #4e063a 2px 1px 2px;}

  18.         #menu ul.up li:nth-child(1):hover div.icon{ background-position: 0 -35px;}
  19.         #menu ul.up li:nth-child(2):hover div.icon{ background-position: -40px -35px;}
  20.         #menu ul.up li:nth-child(3):hover div.icon{ background-position: -80px -35px;}

  21.         #menu ul.down li:nth-child(1):hover div.icon{ background-position: -120px -35px;}
  22.         #menu ul.down  li:nth-child(2):hover div.icon{ background-position: -160px -35px;}
  23.         #menu ul.down  li:nth-child(3):hover div.icon{ background-position: -200px -35px;}


  24.         #menu div.mask{ width: 150px; height: 150px; position: absolute; overflow: hidden; }
  25.         #menu div.mask div.cat{ background: url("../../imges/cat.gif")no-repeat; width: 150px; height: 150px; position: absolute;}

  26.         #menu div#maskT{ top: -153px; margin-left: 25px;}
  27.         #menu #maskT>.cat{ bottom: -153px;transform: rotate(270deg);}

  28.         #menu div#maskB{ bottom: -153px; margin-left: 25px;}
  29.         #menu #maskB>.cat{ top: -153px;transform: rotate(-270deg);}

  30.         #menu div#maskL{ left: -153px;}
  31.         #menu #maskL>.cat{ right: -153px;transform: rotateY(180deg);}

  32.         #menu div#maskR{ left: 203px;}
  33.         #menu #maskR>.cat{ left: -153px;}

  34.         #menu:hover div#maskT div.cat{ animation: move1 4s 8s forwards;}
  35.         #menu:hover div#maskB div.cat{ animation: move2 4s 12s forwards;}
  36.         #menu:hover div#maskL div.cat{ animation: move3 4s forwards;}
  37.         #menu:hover div#maskR div.cat{ animation: move4 4s 4s forwards;}

  38.         @keyframes move1 {
  39.             0%{ transform: translate(0px,0px) rotate(270deg);}
  40.             40%{ transform: translate(0px,-153px) rotate(270deg);}
  41.             60%{ transform: translate(0px,-153px) rotate(270deg);}
  42.             100%{ transform: translate(0px,0) rotate(270deg);}
  43.         }
  44.         @keyframes move2 {
  45.             0%{ transform: translate(0px,0px) rotate(-270deg);}
  46.             40%{ transform: translate(0px,153px) rotate(-270deg);}
  47.             60%{ transform: translate(0px,153px) rotate(-270deg);}
  48.             100%{ transform: translate(0px,0) rotate(-270deg);}
  49.         }

  50.         @keyframes move3 {
  51.             0%{ transform: translate(0px,0px) rotateY(180deg);}
  52.             40%{ transform: translate(-153px,0) rotateY(180deg);}
  53.             60%{ transform: translate(-153px,0) rotateY(180deg);}
  54.             100%{ transform: translate(0px,0) rotateY(180deg);}
  55.         }
  56.         @keyframes move4 {
  57.             0%{ transform: translate(0px,0px);}
  58.             40%{ transform: translate(153px,0);}
  59.             60%{ transform: translate(153px,0);}
  60.             100%{ transform: translate(0px,0);}
  61.         }

  62.         h1{ width: 300px; margin: 50px auto; color: white; }
复制代码
html调用代码:
  1. <div id="menu">
  2.         <div id="maskT" class="mask"><div class="cat"></div></div>
  3.         <div id="maskB" class="mask"><div class="cat"></div></div>
  4.         <div id="maskL" class="mask"><div class="cat"></div></div>
  5.         <div id="maskR" class="mask"><div class="cat"></div></div>

  6.         <ul class="up">
  7.             <li><a href="#"><div class="icon"></div><p>菜单栏一</p></a></li>
  8.             <li><a href="#"><div class="icon"></div><p>菜单栏二</p></a></li>
  9.             <li><a href="#"><div class="icon"></div><p>菜单栏三</p></a></li>
  10.         </ul>
  11.         <div class="line"></div>
  12.         <ul class="down">
  13.             <li><a href="#"><div class="icon"></div><p>菜单栏四</p></a></li>
  14.             <li><a href="#"><div class="icon"></div><p>菜单栏五</p></a></li>
  15.             <li><a href="#"><div class="icon"></div><p>菜单栏六</p></a></li>
  16.         </ul>

  17.     </div>

  18. <script type="text/javascript">
  19.     document.oncontextmenu=function(ev){
  20.         ev=ev||event;
  21.         var x = ev.clientX;
  22.         var y = ev.clientY;

  23.         var menu = document.querySelector("#menu");
  24.         menu.style.display="block";
  25.         menu.style.left = x+"px";
  26.         menu.style.top = y+"px";

  27.         ev.preventDefault();
  28.     };

  29.     document.onclick=function(){
  30.         var menu = document.querySelector("#menu");
  31.         menu.style.display="none";
  32.     }
  33. </script>
复制代码
代码添加以后记得保存
如添加代码有不兼容,可以联系技术员付费协助
回复

使用道具 举报

精彩评论12

heal5256 发表于 2021-10-30 11:00:02 | 显示全部楼层
支持!!!!!!
回复

使用道具 举报

heal5256 发表于 2021-12-4 21:08:54 | 显示全部楼层
很不错的哦,支持,加油
回复

使用道具 举报

北京户外 发表于 2021-12-5 10:53:33 | 显示全部楼层
前来支持~~~~~~~~~~~~~~~~~~~
回复

使用道具 举报

lhserver 发表于 2021-12-6 00:38:12 | 显示全部楼层
学习了,这就去试试
回复

使用道具 举报

MrJiaYu 发表于 2021-12-6 11:23:41 | 显示全部楼层
嘻嘻不错支持一个
回复

使用道具 举报

fogjkagfve 发表于 2021-12-6 22:09:10 | 显示全部楼层
学习了,这就去试试
回复

使用道具 举报

露西iwfrvhfm 发表于 2021-12-7 11:08:45 | 显示全部楼层
谢谢楼主,,,收藏ing
回复

使用道具 举报

露西iwfrvhfm 发表于 2021-12-8 00:08:20 | 显示全部楼层
谢谢楼主的辛苦分享
回复

使用道具 举报

zyby 发表于 2021-12-8 03:36:32 | 显示全部楼层
路过还不错
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关注0

粉丝0

帖子156

发布主题
专注手游推广建站!
全国免费热线电话

18990551016

周一至周日9:00-23:00

反馈建议

www@xoooi.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4 Licensed© 2001-2013 Comsenz Inc.( 蜀ICP备17029717号-1 )