浏览器自定义右键菜单

学到浏览器默认行为想到能不能自定义右键菜单

让自己的网页变得更有趣

查了资料自己琢磨总结了一些随便写了一下

以下是html

<!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=utf-8" />
<title></title>
<link href="css/1.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/1.js"></script>
</head>
<body>
<div id="rightMenu">
<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>把电脑少了再买一个</li>
    <li>把吃的东西都吐出去再去买点</li>
    </ul>
</li>
<li> 第三周
    <ul>
    <li> 花不完怎么办
        <ul>
        <li>找个女朋友</li>
        <li>买车</li>
        <li>买楼</li>
        <li>买手机电脑化妆品包</li>
        </ul>
    </li>
    <li>最后一周了</li>
    <li>还没花完怎么办</li>
    <li> 捐款
        <ul>
        <li>建学校</li>
        <li>建敬老院</li>
        <li>修马路</li>
        </ul>
    </li>
    <li>终于花完了</li>
    <li>然而</li>
    <li> 有一个问题
        <ul>
        <li>你并没有五个亿</li>
        <li>你还是一个穷逼</li>
        <li>洗洗睡吧</li>
        </ul>
    </li>
    </ul>
</li>
</ul>
</body>
</html>

以下为css

@charset "utf-8";
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;
}
#rightMenu {
    position:absolute;
    top:-9999px;
    left:-9999px;
}
#rightMenu ul {
    float:left;
    border:1px solid #979797;
    background:url(../images/line.png) 24px 0 repeat-y #f1f1f1;
    padding:2px;
    box-shadow:2px 2px 2px rgba(0, 0, 0, .6);
}
#rightMenu ul li {
    float:left;
    clear:both;
    height:24px;
    cursor:pointer;
    line-height:24px;
    white-space:nowrap;
    padding:0 30px;
}
#rightMenu ul li.sub {
    background-repeat:no-repeat;
    background-position:right 9px;
    background-image:url(../images/arrow.png);
}
#rightMenu 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;
}
#rightMenu ul ul {
    display:none;
    position:absolute;
}

以下为js

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) 
    }    
};
window.onload = function ()
{
    var oMenu = document.getElementById("rightMenu");
    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;
    };
    
    //点击隐藏菜单
    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";
    }
};

感觉挺有趣的

有想法的小伙伴们可以去试试内容自行想象哈哈

posted @ 2019-05-09 15:23 慢慢变菜阅读(2228) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

笑口常开

奥利给！

浏览器自定义右键菜单

公告