浙江 杭州

非常实用的js全屏右键菜单亚博赠送彩金--任意三数字加yabo.com直达官网

系统分类: 亚博赠送彩金 - YB亚博国际老虎机 - jQuery树形菜单 2017-05-25

人气16168

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


这是一款非常实用的js全屏右键菜单亚博赠送彩金--任意三数字加yabo.com直达官网。该右键菜单亚博赠送彩金--任意三数字加yabo.com直达官网可以在页面的任何地方按右键弹出上下文菜单,而且可以制作为多级菜单。它由纯js制作,简单实用。

制作方法

HTML结构

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

元素,里面的菜单项由
  • 元素组成。在
  • 元素中,实际点击的元素是一个。可以在菜单项中使用font-awesome字体图标来作为小图标。

    
        
        ......
        
                   
                  
    CSS样式

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

    .menu {
        position: absolute;
        width: 200px;
        padding: 2px;
        margin: 0;
        border: 1px solid #bbb;
        background: #eee;
        background: -webkit-linear-gradient(to bottom, #fff 0%, #e5e5e5 100px, #e5e5e5 100%);
        background: linear-gradient(to bottom, #fff 0%, #e5e5e5 100px, #e5e5e5 100%);
        z-index: 100;
        border-radius: 3px;
        box-shadow: 1px 1px 4px rgba(0,0,0,.2);
        opacity: 0;
        -webkit-transform: translate(0, 15px) scale(.95);
        transform: translate(0, 15px) scale(.95);
        transition: transform 0.1s ease-out, opacity 0.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: 1px solid transparent;
        white-space: nowrap;
        padding: 6px 8px;
        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(to bottom, #5D6D79, #2E3940);
        background: linear-gradient(to bottom, #5D6D79, #2E3940);
        border: 1px solid #2E3940;
    }
    
    .menu-item.disabled {
        opacity: .5;
        pointer-events: none;
    }
    
    .menu-item.disabled .menu-btn {
        cursor: default;
    }
    
    .menu-separator {
        display:block;
        margin: 7px 5px;
        height:1px;
        border-bottom: 1px solid #fff;
        background-color: #aaa;
    }
    
    .menu-item.submenu::after {
        content: "";
        position: absolute;
        right: 6px;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        border: 5px solid transparent;
        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

    该右键菜单亚博赠送彩金--任意三数字加yabo.com直达官网使用javascript来监听鼠标点击事件。showMenu()hideMenu()方法分别用于显示和隐藏右键菜单。onContextMenu()方法获取鼠标的当前位置,并添加mousedown事件监听。在onMouseDown()方法中,首先隐藏右键菜单,然后在文档中移除mousedown事件监听。

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

    查看演示
    下载资源:4
    下载资源
    错误提交:

    格式:zip 大小:11.19KB

    ================关于优设记================
    “优设记ui3g.com“是国内最全jquery亚博赠送彩金--任意三数字加yabo.com直达官网下载 - 高质量网页素材的学习下载平台
    资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
    文章链接: http://www.ui3g.com/code/uicode-1828.html 非特殊说明,本文版权归原作者所有,转载请注明出处
    非常实用的js全屏右键菜单亚博赠送彩金--任意三数字加yabo.com直达官网

    我当前G币余额:0 已下载次数:4

    注:购买该亚博赠送彩金--任意三数字加yabo.com直达官网的用户当日可免费下载 亚博赠送彩金--任意三数字加yabo.com直达官网作者可永久免费下载

    所需G币:20

    下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

    抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

    多一点耐心少一点浮躁有什么新鲜事想告诉大家? 分享有礼 +5G币:(已有0 评论)