技术松鼠公告

QQ小程序发布啦!欢迎使用



朕已阅 去瞧瞧

自定义网站右键菜单

467次阅读
没有评论

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

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

想要本站代码就自己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函数

自定义网站右键菜单

注意: 网络上第二个函数大多是这样:$(function() {... <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>可能会出现错误:

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

参考stackoverflow的帖子(Google大法好,一下就找到了)

自定义网站右键菜单

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

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

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

文本复制监听,右上弹窗提示 文本复制监听,右上弹窗提示 在网上苦苦寻找,终于找到了精美的弹窗提示,稍微修改适配复制弹窗提示。 时间:2021/2/25 分类:网络技术 阅读:404

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

自定义网站右键菜单

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

松鼠小
版权声明:本站原创文章,由松鼠小2021-03-03发表,共计1690字。
转载提示:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)
隐藏
变装