网站美化-鼠标右键自定义菜单美化-路羽博客-第1张图片

网站美化-鼠标右键自定义菜单美化

网站美化-鼠标右键自定义菜单美化-路羽博客-第2张图片

作者: 路羽

原创资源分享博客

网站美化-鼠标右键自定义菜单美化-路羽博客-第3张图片微信小程序

路羽博客 资源分享

说明

网站中可以通过代码来自定义的鼠标右键的行为,达到可以自定义的美化浏览器默认的右键菜单功能。

网站美化-鼠标右键自定义菜单美化-路羽博客-第4张图片

使用步骤

  • 将下面的html+css代码加入到主题目录下:header.php文件中,emlog可以直接写个插件,挂载到公共首页页面。
<style type="text/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:#46bed7}
    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;}
    </style>
<div class="usercm" style="left: 199px; top: 5px; display: none;">
    <ul>
        <li><a href="https://www.luyuz.cn/"><i class="fa fa-home fa-fw"></i><span>首页</span></a></li>
        <li><a href="javascript:void(0);" onclick="getSelect();"><i class="fa fa-copy fa-fw"></i><span>复制</span></a></li>
        <li><a href="javascript:history.go(1);"><i class="fa fa-arrow-right fa-fw"></i><span>前进</span></a></li>
        <li><a href="javascript:history.go(-1);"><i class="fa fa-arrow-left fa-fw"></i><span>后退</span></a></li>
        <li><a href="javascript:window.location.reload();"><i class="fa fa-refresh fa-fw"></i><span>刷新</span></a></li>        
        <li style="border-bottom:1px solid gray"><a href="javascript:void(0);" onclick="baiduSearch();"><i class="fa fa-search fa-fw"></i><span>搜索</span></a></li>
        <li><a target="_blank" href="https://www.luyuz.cn/tools"><i class="fa fa-suitcase fa-fw"></i><span>百宝箱</span></a></li>
        <li><a href="https://www.luyuz.cn/guestbook.html"><i class="fa fa-meh-o fa-fw"></i><span>给我留言</span></a></li>
        </ul>
</div>
  • 自行修改一下代码中的网站首页和百宝箱的等链接,改为自己的即可。
  • 最后下载附件js,引用需要的js在footer.php 文件中。其他的主题和网站添加方式一样的,只需要添加网站全局引用的文件当中就行。

注意:我们平时使用的建站系统或者主题基本已经引用过jQuery,如果网页或者本地使用,是必要有引入jQuery才可以。

免费资源
管理员设置了查看模式
此内容只限后页面查看
分享到:
未经允许不得转载:

作者: 路羽, 转载或复制请以 超链接形式 并注明出处 路羽博客
原文地址: 《网站美化-鼠标右键自定义菜单美化》 发布于2022-9-12

评论

          
       
  1. 用户It8mKL 会员 Lv.2

    不错666 我需要这个

  2. smokexiao 会员 Lv.1

    不错666 我需要这个

  3. acgl123 会员 Lv.1

    不错666 表情

  4. asdfg123 会员 Lv.1

    学习了,非常感谢!

  5. JMUTUmIY 会员 Lv.1

    谢谢,有被美到!支持一下,路羽博客有你更精彩

  6. Lj22ayth 会员 Lv.2

    不错,鼓励一下

  7. hknsCkkb 会员 Lv.1

    生产队的驴都不敢这么歇

  8. Yee 游客 Lv.1

    不错,鼓励一下

切换注册

登录

忘记密码?

您也可以使用第三方帐号快捷登录

切换登录

注册

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏