当前位置:主页 > 网页特效 > 菜单导航 >

非常实用的js全屏右键菜单插件

发布时间:2018/08/03?来源:互联网?浏览:?关键词:菜单导航?右键菜单?
非常实用的js全屏右键菜单插件 非常实用的js全屏右键菜单插件
阿里云

简要教程

这是一款非常实用的js全屏右键菜单插件。该右键菜单插件可以在页面的任何地方按右键弹出上下文菜单,而且可以制作为多级菜单。它由纯js制作,简单实用。

制作方法

HTML结构

该右键菜单的HTML结构采用一个

元素,里面的菜单项由
  • 元素组成。在
  • 元素中,实际点击的元素是一个
  • ...... Social Comment Share Twitter ....

    CSS样式

    下面是该右键菜单特效的基本CSS样式。

    .menu {
        position:absolute;
        width:200px;
        padding:2px;
        margin:0;
        border:1pxsolid#bbb;
        background:#eee;
        background: -webkit-linear-gradient(tobottom,#fff0%,#e5e5e5100px,#e5e5e5100%);
        background: linear-gradient(tobottom,#fff0%,#e5e5e5100px,#e5e5e5100%);
        z-index:100;
        border-radius:3px;
        box-shadow:1px1px4pxrgba(0,0,0,.2);
        opacity:0;
        -webkit-transform:translate(0,15px)scale(.95);
        transform:translate(0,15px)scale(.95);
        transition: transform0.1s ease-out, opacity0.1s ease-out;
        pointer-events:none;
    }
     
    .menu-item {
        display:block;
        position:relative;
        margin:0;
        padding:0;
        white-space:nowrap;
    }
     
    .menu-btn {
        background:none;
        line-height:normal;
        overflow:visible;
        -webkit-user-select:none;
        -moz-user-select:none;
        -ms-user-select:none;
        display:block;
        width:100%;
        color:#444;
        font-family:'Roboto',sans-serif;
        font-size:13px;
        text-align:left;
        cursor:pointer;
        border:1pxsolidtransparent;
        white-space:nowrap;
        padding:6px8px;
        border-radius:3px;
    }
     
    .menu-btn::-moz-focus-inner,
    .menu-btn::-moz-focus-inner {
        border:0;
        padding:0;
    }
     
    .menu-text {
        margin-left:25px;
    }
     
    .menu-btn .fa {
        position:absolute;
        left:8px;
        top:50%;
        -webkit-transform:translateY(-50%);
        transform:translateY(-50%);
    }
     
    .menu-item:hover > .menu-btn {
        color:#fff;
        outline:none;
        background-color:#2E3940;
        background: -webkit-linear-gradient(tobottom,#5D6D79,#2E3940);
        background: linear-gradient(tobottom,#5D6D79,#2E3940);
        border:1pxsolid#2E3940;
    }
     
    .menu-item.disabled {
        opacity: .5;
        pointer-events:none;
    }
     
    .menu-item.disabled .menu-btn {
        cursor:default;
    }
     
    .menu-separator {
        display:block;
        margin:7px5px;
        height:1px;
        border-bottom:1pxsolid#fff;
        background-color:#aaa;
    }
     
    .menu-item.submenu::after {
        content:"";
        position:absolute;
        right:6px;
        top:50%;
        -webkit-transform:translateY(-50%);
        transform:translateY(-50%);
        border:5pxsolidtransparent;
        border-left-color:#808080;
    }
     
    .menu-item.submenu:hover::after {
        border-left-color:#fff;
    }
     
    .menu .menu {
        top:4px;
        left:99%;
    }
     
    .show-menu,
    .menu-item:hover > .menu {
        opacity:1;
        -webkit-transform:translate(0,0)scale(1);
        transform:translate(0,0)scale(1);
        pointer-events:auto;
    }
     
    .menu-item:hover > .menu {
        -webkit-transition-delay:100ms;
        transition-delay:300ms;
    }  

    JAVASCRIPT

    该右键菜单插件使用javascript来监听鼠标点击事件。showMenu()和hideMenu()方法分别用于显示和隐藏右键菜单。onContextMenu()方法获取鼠标的当前位置,并添加mousedown事件监听。在onMouseDown()方法中,首先隐藏右键菜单,然后在文档中移除mousedown事件监听。

    varmenu = document.querySelector('.menu');
    functionshowMenu(x, y){
        menu.style.left = x +'px';
        menu.style.top = y +'px';
        menu.classList.add('show-menu');
    }
    functionhideMenu(){
        menu.classList.remove('show-menu');
    }
    functiononContextMenu(e){
        e.preventDefault();
        showMenu(e.pageX, e.pageY);
        document.addEventListener('mousedown', onMouseDown,false);
    }
    functiononMouseDown(e){
        hideMenu();
        document.removeEventListener('mousedown', onMouseDown);
    }
    document.addEventListener('contextmenu', onContextMenu,false);  

    共有人阅读,期待你的评论!评论
    说点什么吧
    • 全部评论(0
      还没有评论,快来抢沙发吧!
    Top