自定义网站欢迎提示+右键菜单

最近在博客-故梦吖浏览时发现其采用了自定义右键菜单，于是想给自己的松子分享也添加一个。起初不怎么兼容，但查找资料后最终实现了预期效果。

本网站早已实现轮盘状菜单，电脑浏览器未登录可见，你可右键试试。

想要本站代码就自己view-source:分析一下，这里不多言啦。

效果如下：

图标原为彩色，但主题样式将图标统一为单色，采用的是iconfont

网站欢迎提示：

如何实现：

一、添加html代码

这里用图片抱歉，原用code可能自动解析导致服务器资源100%出错。

如果不想在header.php的<body>标签之后中引入上面代码，你可以JS添加$(‘body’).append…

JS下载：取自上面的故梦吖，自带其图标。

二、引入图标和样式

若想要上面的样式，引入下面的css，当然也可选别的，比如很多主题自带fontawesome。

<link rel="stylesheet" href="https://at.alicdn.com/t/font_2397198_zlxtpqcjxp.css"/>

添加自定义样式：

/*右键*/
a {text-decoration: none;}
div.usercm{background-repeat:no-repeat;background-position:center center;background-size:cover;background-color:#fff;font-size:13px!important;width:130px;-moz-box-shadow:1px 1px 3px rgba
(0,0,0,.3);box-shadow:0px 0px 15px #333;position:absolute;display:none;z-index:10000;opacity:0.9; border-radius: 8px;}
div.usercm ul{list-style-type:none;list-style-position:outside;margin:0px;padding:0px;display:block}
div.usercm ul li{margin:0px;padding:0px;line-height:35px;}
div.usercm ul li a{color:#666;padding:0 15px;display:block}
div.usercm ul li a:hover{color:#fff;background:#7486E7}
div.usercm ul li a i{margin-right:10px}
a.disabled{color:#c8c8c8!important;cursor:not-allowed}
a.disabled:hover{background-color:rgba(255,11,11,0)!important}
div.usercm{background:#fff !important;}

三、自定义JS函数

以上图片中代码查看， Argon主题对代码展示更兼容：

自定义网站右键菜单

注意：网络上第二个函数大多是这样：$(function() {... });可能会出现错误:

TypeError: $ is not a function when calling jQuery function（大概是与主题自带函数重复）

参考stackoverflow的帖子（Google大法好，一下就找到了）

代码带复制提示，如果是handsome主题，你可以使用其自带的提示框函数

$.message({
    title: '复制提示',
    message: "啊噢...你没还没选择文字呢！",
    type: 'warning'
})

如果是Wordpress等其他博客系统，你可以参考

文本复制监听，右上弹窗提示在网上苦苦寻找，终于找到了精美的弹窗提示，稍微修改适配复制弹窗提示。之前推荐过大弹窗形式： [yx_embed_post ids=1257] 感觉有点碍眼，且不适配我当前的主题，于是有了下文。一、... 时间:2021/2/25 分类:网络技术 阅读:1032

如果觉着不错，欢迎点赞尝试哦~