zoukankan      html  css  js  c++  java
  • 阻止右击事件并更改为自定义导航栏;

    1.

    <script>
    document.oncontextmenu=function(){ return false };
    </script>

    2.

    <div id="menu">
    <p> <a href="category.php">现货商城</a></p>
    <p><a href="article_cat.php?id=19">资讯报价</a></p>
    <p><a href="zhifa.php">钢厂直发</a></p>
    <p><a href="BuyingHall.php">求购大厅</a></p>
    <p><a href="jiagong.php">加工服务</a></p>
    </div>
    <script>
    var oMenu = document.getElementById('menu');
    document.oncontextmenu = function(ev){
    var oEvent = ev || window.event;
    oMenu.style.display = 'block';
    oMenu.style.left = oEvent.clientX + 'px';
    oMenu.style.top = oEvent.clientY + 'px';
    return false;
    }
    document.onclick = function(){
    oMenu.style.display = 'none';
    }
    </script>

    3.


    #menu {
    display: none;
    position: absolute;
    160px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, .1);
    background-color: rgba(0,0,8px,0.1);
    background:#fff;
    z-index:999999999;
    font-size:16px;
    border-radius:4px 6px;

    }
    #menu p{

    padding: 4px;
    line-height:40px;
    height:40px;

    text-align:center;
    cursor:pointer;

    }
    #menu p:hover a{
    color:#159AE5;
    margin-left:10px;
    transition:all 0.5s;
    text-decoration:underline;
    }
    #menu p a{
    color:#333;
    font-size:16px;
    transition:all 0.5s;
    }

     
  • 相关阅读:
    Execl获取真实行数
    日期工具类
    Eclipse & IDEA快捷键对比大全
    【转】IDEA导入Eclipse项目 详细步骤(亲自验证导入成功)
    京东的四大集团
    马云演讲视频
    阿里系的一些重要网站
    阿里系的几个电商网站
    腾讯几款QQ软件
    电脑版微信使用说明
  • 原文地址:https://www.cnblogs.com/wensx/p/11987337.html
Copyright © 2011-2022 走看看