右鍵菜單

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>右鍵菜單</title>
        <style type="text/css">
            *{margin:0;padding:0}
            ul{
                position: absolute;
                width:100px;
                list-style: none;
                display: none;
            }
            ul li{
                padding: 10px;
                background: #AFB9DE;
                border: 1px solid #ccc;
                border-radius: 3px;
                color: white;
                cursor : pointer;
            }
            ul li:hover{
                background: #E86F6F;
            }
            li ul{
            }
        </style>
    </head>
    <body>
        <ul id="menu">
            <li>Java</li>
            <li>
                JavaScript
                <ul>
                    <li>基礎</li>
                    <li>DOM</li>
                    <li>
                        BOM
                        <ul>
                            <li>window</li>
                            <li>location</li>
                            <li>navgatior</li>
                        </ul>
                    </li>
                    <li>jQuery</li>
                </ul>
            </li>
            <li>C</li>
        </ul>
    </body>
    <script type="text/javascript">
        var menu = document.querySelector("#menu");
        var lis = document.querySelectorAll("li");
        for(var i=0;i<lis.length;i++){
            lis[i].onmouseenter  = function(){
                var children = this.querySelector("ul");
                if(children){
                    children.style.left = this.offsetWidth + this.offsetLeft + "px";
                    children.style.top = this.offsetTop + "px";
                    children.style.display = "block";
                    console.log( this.offsetWidth+"--"+this.offsetLeft+"--"+this.offsetTop)
                }
            }
            lis[i].onmouseleave = function(){
                var children = this.querySelector("ul");
                if(children){
                    children.style.display = "none";
                }
            }
        }
        menu.onmouseleave = function(){
            this.style.display = "none";
        }
        document.oncontextmenu = function(ev){
            var x = ev.clientX , y = ev.clientY;
            menu.style.display = "block";
            menu.style.left = x + "px";
            menu.style.top = y + "px";
            return false;//取消對象的默認動作就可以return false。
        }
    </script>
</html>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容