• “草原英雄小姐妹”走进山城 2019-07-01
  • 高清:里约奥运会奖牌曝光 大部分由再生材料制成 2019-06-27
  • 在楼主大谈共产主义分配的时候,希望楼主先说明一下对马克思关于共产主义基本原则的理解。一个社会如果仍然存在“按劳动分配”,怎么会是“每一个个人的全面而自由的发展” 2019-06-25
  • 河北法院:打造互联网+诉非衔接的人民法庭工作新机制 2019-06-25
  • 芯片是汽车产业发展的基石  专家呼吁建立"汽车芯片智库" 2019-06-13
  • “高深文学创作回顾研讨会”在北京举行 2019-06-13
  • 江苏专项督查基础教育问题 择校热、大班额成重点 2019-06-08
  • 14599元!索尼A7M3发布:续航翻番、支持4K视频 2019-06-08
  • 首页 春城壹网 七彩云南 一网天下 2019-05-22
  • QFII政策调整引增量资金入场 “成长+大消费”或成布局重点 2019-05-22
  • 密印“农禅”:何以在蛮荒之地举起文明火把(图) 2019-05-18
  • 20180531 袁隆平:海水稻打破纪录,杂交稻走向全球 2019-05-17
  • 晋城:八项重点打好水污染防治攻坚战 2019-05-15
  • 法国装置艺术家将一部老旧房车改造成移动游泳池 2019-05-13
  • 习近平致信祝贺人民日报创刊70周年 2019-05-10
  • 欢迎访问

    云南11选五前三直遗漏:云南鼎浩信息技术有限公司官方网站,云南网站建设诚信品牌!

    DING HAO COLUMN 鼎浩专栏

    鼎浩的一些分享
    Sharing from Ding Hao

    速度超快的菜单切换效果

    来源:云南11选五走势图500期     2013年07月02日16:02
    字号:T|T

    云南11选五走势图500期 www.a-mcl.com 这是一个非常流畅的菜单展示效果,应用在亚马逊(amazon.cn)上,当你上下移动鼠标的时候,二级菜单会非常轻快的切换,没有任何延时,给用户如滑丝般的感觉。这种效果借助于一款jQuery插件menu-aim,本文将结合实例讲解如何实现速度超快的菜单效果。

    查看演示DEMO 下载源码

    HTML

    首先建立主菜单,我们借用电商网站常见的商品分类。其html结构代码如下,其中我们用到了html5的data-submenu-id属性设置,这在插件调用时非常有用。

    
    

    子菜单与主菜单对应,每一个子菜单的id属性值必须与主菜单的data-submenu-id属性值对应,子菜单内容可以为任意html标签代码,p,img,audio都可以,格式如下:

    
    

    CSS

    我们将主菜单dropdown-menu位置固定,子菜单popover默认隐藏,通过css3技术可以设置菜单阴影圆角效果,子菜单内容的css可以根据需要自由发挥,本文未详细贴出,具体可查看demo。

    .active{position:relative}
    .dropdown-menu { position: absolute;
      z-index: 1000;float: left;
      min-width: 120px;padding: 5px 0;margin: 2px 0 0;list-style: none;
      background-color: #ffffff;border: 1px solid #ccc;
      -webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;
      -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);-moz-box-shadow: 0 5px 10px 
    rgba(0, 0, 0, 0.2);box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    }
    .dropdown-menu li{height:24px; line-height:24px; text-align:center}
    .dropdown-menu li a{display:block}
    .dropdown-menu li a:hover{color:#fff; text-decoration:none; background:#39f}
    .popover {
      position: absolute;top: 0;left: 0; z-index: 1010;display: none;
      width: 320px;-webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;
      -webkit-border-top-left-radius: 0px;-webkit-border-bottom-left-radius: 0px;
      border-top-left-radius: 0px;border-bottom-left-radius: 0px;overflow: hidden;		
      padding: 1px 1px 1px 15px;text-align: left;white-space: normal;
      background-color: #fff;border: 1px solid #ccc;
      border: 1px solid rgba(0, 0, 0, 0.2);
      webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);-moz-box-shadow: 0 5px 10px 
    rgba(0, 0, 0, 0.2);box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    }

    jQuery

    下面我们隆重推出jquery.menu-aim.js,该插件是一款基于jQuery的菜单插件,插件作者关注了用户体验并精于算法,根据鼠标轨迹,将菜单切换效果实现得淋漓精致,该插件“超快”的反应效果是不是让我们有中“超爽”的感觉?插件地址:https://github.com/kamens/jQuery-menu-aim

    使用$(element).menuAim()调用jquery.menu-aim.js,当鼠标触发主菜单时调用自定义函数activateSubmenu(),当离开主菜单时调用自定义函数deactivateSubmenu()。

    $(function(){
    	 $(".dropdown-menu").menuAim({
    			activate: activateSubmenu,//触发主菜单,显示子菜单
                deactivate: deactivateSubmenu //离开主菜单,隐藏子菜单
         });
    });

    如上调用就可以完成子菜单间的快速切换,jquery.menu-aim.js还提供其他几种方法,enter()和exit(),都是控制鼠标移入移出、调用函数等。

    接下来,我们写上自定义函数

    var $menu = $(".dropdown-menu");
    
    function activateSubmenu(row) {
      	var $row = $(row),
        submenuId = $row.data("submenuId"),
        $submenu = $("#" + submenuId),
        offset = $menu.offset(),
        height = $menu.outerHeight(),
        width = $menu.outerWidth();
    
       	$submenu.css({ //设置子菜单样式
             display: "block", //显示子菜单
             top: offset.top,
             left: offset.left + width - 5, 
             height: height - 4  
        });
    	//设置主菜单样式(鼠标滑向主菜单时)
        $row.find("a").addClass("maintainHover");
    }
    
    function deactivateSubmenu(row) {
        var $row = $(row),
        submenuId = $row.data("submenuId"),
        $submenu = $("#" + submenuId);
    
        $submenu.css("display", "none"); //隐藏子菜单
        $row.find("a").removeClass("maintainHover");恢复主菜单样式
    }

    好,这样保存再预览下效果,怎么样,你也可以做一个amazon.cn式的菜单效果了。

    客服中心
    点击进行在线咨询

    QQ咨询 咨询QQ:79929313 咨询QQ:88139574 咨询QQ:122790803

    咨询热线:0871-63399840

    客服热线:0871-63523332

    客服中心 客服中心
  • “草原英雄小姐妹”走进山城 2019-07-01
  • 高清:里约奥运会奖牌曝光 大部分由再生材料制成 2019-06-27
  • 在楼主大谈共产主义分配的时候,希望楼主先说明一下对马克思关于共产主义基本原则的理解。一个社会如果仍然存在“按劳动分配”,怎么会是“每一个个人的全面而自由的发展” 2019-06-25
  • 河北法院:打造互联网+诉非衔接的人民法庭工作新机制 2019-06-25
  • 芯片是汽车产业发展的基石  专家呼吁建立"汽车芯片智库" 2019-06-13
  • “高深文学创作回顾研讨会”在北京举行 2019-06-13
  • 江苏专项督查基础教育问题 择校热、大班额成重点 2019-06-08
  • 14599元!索尼A7M3发布:续航翻番、支持4K视频 2019-06-08
  • 首页 春城壹网 七彩云南 一网天下 2019-05-22
  • QFII政策调整引增量资金入场 “成长+大消费”或成布局重点 2019-05-22
  • 密印“农禅”:何以在蛮荒之地举起文明火把(图) 2019-05-18
  • 20180531 袁隆平:海水稻打破纪录,杂交稻走向全球 2019-05-17
  • 晋城:八项重点打好水污染防治攻坚战 2019-05-15
  • 法国装置艺术家将一部老旧房车改造成移动游泳池 2019-05-13
  • 习近平致信祝贺人民日报创刊70周年 2019-05-10
  • 湖北快三开奖号码吗 k冰球杆 黑龙江36选7彩票 双色球基本走势图表图2 极速时时彩在哪里玩 十大电子游艺平台 新浪足球彩票首页 竞彩总进球怎么看 快速赛车计划 江苏快三网上投注网站 快速时时彩计算方法如下 网上在哪里买彩票 北美冰球职业联赛强队 福建十一选五走势图表 福彩快3群骗局