自定义菜单，HTML代码在线实时编辑、实时预览

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144

            
            <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义右键菜单</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f0f0f0;
        }
        .menu {
            display: none;
            position: fixed;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
            transform: scale(0);
            transform-origin: top right;
            transition: transform 1s ease, opacity 1s ease; /* 调整过渡时间为1s */
            z-index: 1000;
            padding: 10px;
            border: 2px solid rgba(255, 182, 193, 0.8); /* 浅粉色边框 */
            opacity: 0;
        }
        .menu.active {
            display: block;
            transform: scale(1.2); /* 放大比例 */
            opacity: 1;
        }
        .menu-item {
            padding: 10px 20px;
            margin: 5px 0;
            border-radius: 5px;
            cursor: pointer;
            transition: transform 1s ease; /* 调整过渡时间为1s */
            display: flex;
            align-items: center;
        }
        .menu-item:hover {
            background-color: #f5f5f5;
            transform: scale(1.1); /* 单个菜单项放大比例 */
            box-shadow: 0 0 10px rgba(255, 182, 193, 0.8); /* 边框发光效果 */
        }
        .menu-item i {
            margin-right: 10px;
        }
        .container {
            padding: 20px;
            text-align: center;
        }
        .button {
            padding: 10px 20px;
            font-size: 1em;
            cursor: pointer;
            border: none;
            border-radius: 5px;
            background-color: #007BFF;
            color: #fff;
            transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
        }
        .button:hover {
            background-color: #0056b3;
            transform: scale(1.1); /* 悬停时放大效果 */
            box-shadow: 0 0 10px rgba(255, 182, 193, 0.8); /* 边框发光效果 */
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>右键点击页面显示自定义菜单</h1>
    </div>

    <div class="menu" id="menu">
        <div class="menu-item" onclick="goHome()">
            <i class="fa fa-home"></i> 主页
        </div>
        <div class="menu-item" onclick="refreshPage()">
            <i class="fa fa-refresh"></i> 刷新
        </div>
        <div class="menu-item" onclick="goBack()">
            <i class="fa fa-arrow-left"></i> 返回
        </div>
    </div>

    <script>
        document.addEventListener('contextmenu', function(event) {
            // 阻止浏览器默认的右键菜单
            event.preventDefault();

            // 获取菜单元素
            const menu = document.getElementById('menu');

            // 设置菜单的位置
            const menuWidth = menu.offsetWidth;
            const menuHeight = menu.offsetHeight;
            const x = event.clientX;
            const y = event.clientY;
            const windowWidth = window.innerWidth;
            const windowHeight = window.innerHeight;

            // 防止菜单超出屏幕边界
            const left = x + menuWidth > windowWidth ? x - menuWidth : x;
            const top = y + menuHeight > windowHeight ? y - menuHeight : y;

            menu.style.left = `${left}px`;
            menu.style.top = `${top}px`;

            // 显示菜单
            menu.classList.add('active');

            // 点击其他地方关闭菜单
            document.addEventListener('click', closeMenu, { once: true });
        });

        function closeMenu() {
            const menu = document.getElementById('menu');
            menu.classList.remove('active');
        }

        // 定义菜单项的功能
        function goHome() {
            // 返回浏览器的开始界面
            window.location.href = "https://example.com"; // 主页地址，确保链接有效
            closeMenu();
        }

        function refreshPage() {
            // 刷新当前页面
            window.location.reload();
            closeMenu();
        }

        function goBack() {
            // 返回上一个页面
            window.history.back();
            closeMenu();
        }
    </script>
    <!-- 梦幻创想工作室--江枫   自定义代码不可泄漏 -->
</body>
</html>