js实现右键弹出多级菜单特效

2个月前 (02-28 14:16)阅读回复0
大陆
大陆
  • 管理员
  • 发消息
  • 注册排名1
  • 经验值3459
  • 级别管理员
  • 主题691
  • 回复2
楼主

常用的右键弹出导航菜单特效代码,当用户右击时鼠标弹出四级导航菜单,可自定义菜单内容和数量。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。">
<title>js实现右键弹出多级菜单特效_武鸣人</title>
<style type="text/css">
html,body{height:100%;overflow:hidden;}
body,div,ul,li{margin:0;padding:0;}
body{font:12px/1.5 \5fae\8f6f\96c5\9ed1;}
ul{list-style-type:none;}
#menu_www_wuming_ren{position:absolute;top:-9999px;left:-9999px;}
#menu_www_wuming_ren ul{float:left;border:1px solid #979797;background:#f1f1f1 url(/img/20240228www_wuming_ren_1.png) 24px 0 repeat-y;padding:2px;box-shadow:2px 2px 2px rgba(0,0,0,.6);}
#menu_www_wuming_ren ul li{float:left;clear:both;height:24px;cursor:pointer;line-height:24px;white-space:nowrap;padding:0 30px;}
#menu_www_wuming_ren ul li.sub{background-repeat:no-repeat;background-position:right 9px;background-image:url(/img/20240228www_wuming_ren_2.png);}
#menu_www_wuming_ren ul li.active{background-color:#f1f3f6;border-radius:3px;border:1px solid #aecff7;height:22px;line-height:22px;background-position:right -8px;padding:0 29px;}
#menu_www_wuming_ren ul ul{display:none;position:absolute;}
</style>
<script type="text/javascript">
var getOffset = {
 top: function (obj) {
  return obj.offsetTop + (obj.offsetParent ? arguments.callee(obj.offsetParent) : 0) 
 },
 left: function (obj) {
  return obj.offsetLeft + (obj.offsetParent ? arguments.callee(obj.offsetParent) : 0) 
 } 
};//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
window.onload = function ()
{
 var oMenu = document.getElementById("menu_www_wuming_ren");
 var aUl = oMenu.getElementsByTagName("ul");
 var aLi = oMenu.getElementsByTagName("li");
 var showTimer = hideTimer = null;
 var i = 0;
 var maxWidth = maxHeight = 0;
 var aDoc = [document.documentElement.offsetWidth, document.documentElement.offsetHeight];
 oMenu.style.display = "none";
 for (i = 0; i < aLi.length; i++)
 {
  //为含有子菜单的li加上箭头
  aLi[i].getElementsByTagName("ul")[0] && (aLi[i].className = "sub");
  
  //鼠标移入
  aLi[i].onmouseover = function ()
  {
   var oThis = this;
   var oUl = oThis.getElementsByTagName("ul");
   
   //鼠标移入样式
   oThis.className += " active";   
   
   //显示子菜单
   if (oUl[0])
   {
    clearTimeout(hideTimer);    
    showTimer = setTimeout(function ()
    {
     for (i = 0; i < oThis.parentNode.children.length; i++)
     {
      oThis.parentNode.children[i].getElementsByTagName("ul")[0] &&
      (oThis.parentNode.children[i].getElementsByTagName("ul")[0].style.display = "none");
     }
     oUl[0].style.display = "block";
     oUl[0].style.top = oThis.offsetTop + "px";
     oUl[0].style.left = oThis.offsetWidth + "px";
     setWidth(oUl[0]);
     
     //最大显示范围     
     maxWidth = aDoc[0] - oUl[0].offsetWidth;
     maxHeight = aDoc[1] - oUl[0].offsetHeight;
     
     //防止溢出
     maxWidth < getOffset.left(oUl[0]) && (oUl[0].style.left = -oUl[0].clientWidth + "px");
     maxHeight < getOffset.top(oUl[0]) && (oUl[0].style.top = -oUl[0].clientHeight + oThis.offsetTop + oThis.clientHeight + "px")
    },300);
   }   
  };
   
  //鼠标移出 
  aLi[i].onmouseout = function ()
  {
   var oThis = this;
   var oUl = oThis.getElementsByTagName("ul");
   //鼠标移出样式
   oThis.className = oThis.className.replace(/\s?active/,"");
   clearTimeout(showTimer);
   hideTimer = setTimeout(function ()
   {
    for (i = 0; i < oThis.parentNode.children.length; i++)
    {
     oThis.parentNode.children[i].getElementsByTagName("ul")[0] &&
     (oThis.parentNode.children[i].getElementsByTagName("ul")[0].style.display = "none");
    }
   },300);
  };
 } 
 //自定义右键菜单
 document.oncontextmenu = function (event)
 {
  var event = event || window.event;
  oMenu.style.display = "block";
  oMenu.style.top = event.clientY + "px";
  oMenu.style.left = event.clientX + "px";
  setWidth(aUl[0]);
  
  //最大显示范围
  maxWidth = aDoc[0] - oMenu.offsetWidth;
  maxHeight = aDoc[1] - oMenu.offsetHeight;
  
  //防止菜单溢出
  oMenu.offsetTop > maxHeight && (oMenu.style.top = maxHeight + "px");
  oMenu.offsetLeft > maxWidth && (oMenu.style.left = maxWidth + "px");
  return false;
 };
//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
 //点击隐藏菜单
 document.onclick = function ()
 {
  oMenu.style.display = "none" 
 };
 
 //取li中最大的宽度, 并赋给同级所有li 
 function setWidth(obj)
 {
  maxWidth = 0;
  for (i = 0; i < obj.children.length; i++)
  {
   var oLi = obj.children[i];   
   var iWidth = oLi.clientWidth - parseInt(oLi.currentStyle ? oLi.currentStyle["paddingLeft"] : getComputedStyle(oLi,null)["paddingLeft"]) * 2
   if (iWidth > maxWidth) maxWidth = iWidth;
  }
  for (i = 0; i < obj.children.length; i++) obj.children[i].style.width = maxWidth + "px";
 }
};
</script>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>,各种信息资源免费发布,分享励志语录经典短句,减肥健身常识,各种js特效代码。网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
武鸣人提示您:右击鼠标看效果。
<div id="menu_www_wuming_ren">
    <ul>
        <li><strong>武鸣人</strong></li>
        <li>
            武鸣人一号菜单
            <ul>
                <li>网页特效原理分析</li>
                <li>响应用户操作</li>
                <li>提示框效果</li>
                <li>事件驱动</li>
                <li>元素属性操作</li>
            </ul>
        </li>
        <li>
            武鸣人二号菜单
            <ul>
                <li>改变网页背景颜色</li>
                <li>函数传参</li>
                <li>高重用性函数的编写</li>
                <li>126邮箱全选效果</li>
                <li>循环及遍历操作</li>
            </ul>
        </li>
        <li>
            武鸣人三号菜单
            <ul>
                <li>
                    JavaScript组成
                    <ul>
                        <li>ECMAScript</li>
                        <li>DOM</li>
                        <li>BOM</li>
                        <li>JavaScript兼容性来源</li>
                    </ul>
                </li>
                <li>JavaScript出现的位置、优缺点</li>
                <li>变量、类型、typeof、数据类型转换、变量作用域</li>
                <li>
                 闭包
                    <ul>
                        <li>什么是闭包</li>
                        <li>简单应用</li>
                        <li>闭包缺点</li>
                    </ul>
                </li>
                <li>运算符</li>
                <li>程序流程控制</li>
                <li>
                    定时器的使用
                    <ul>
                        <li>setInterval</li>
                        <li>setTimeout</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>


0
0
收藏0
回帖

js实现右键弹出多级菜单特效 期待您的回复!

取消
载入表情清单……
载入颜色清单……
插入网络图片

取消确定

图片上传中
编辑器信息
提示信息