• 王东峰主持召开河北雄安新区规划建设工作领导小组会议 2019-04-19
  • 那样的大环境,谁都难免搞腐败,官员用腐败证明,政治路线是决定一切的,路线不正确,好干部要 变坏,精英会变坏,带领社会风气变坏,慢慢地改变社会性质。 2019-04-19
  • 计划经济是根据政府计划调节经济活动的经济运行体制。又称为指令型经济。小萌以为是各经济组织把自己制订的计划上报一下就叫计划经济? 2019-04-16
  • 吃饭要人喂是行为退化 2019-04-12
  • 阿根廷VS冰岛:冰岛队全力死守抗强敌 2019-04-04
  • 海外版开放谈:开放促内陆高质量发展 2019-03-28
  • 女性之声——全国妇联 2019-03-27
  • 《舌尖上的中国》陈晓卿新作《风味人间》即将登场 2019-03-27
  • 呵呵。。。你这是没有耐力和极不对称的高手。真正的高手过招会有很多的精彩回合。 2019-03-22
  • 图说互联网(21期)iPhone的10年 下一个10年属于谁? 2019-03-18
  • 欢迎访问

    云南11选5前三组选走势图:云南鼎浩信息技术有限公司官方网站,云南网站建设诚信品牌!

    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-04-19
  • 那样的大环境,谁都难免搞腐败,官员用腐败证明,政治路线是决定一切的,路线不正确,好干部要 变坏,精英会变坏,带领社会风气变坏,慢慢地改变社会性质。 2019-04-19
  • 计划经济是根据政府计划调节经济活动的经济运行体制。又称为指令型经济。小萌以为是各经济组织把自己制订的计划上报一下就叫计划经济? 2019-04-16
  • 吃饭要人喂是行为退化 2019-04-12
  • 阿根廷VS冰岛:冰岛队全力死守抗强敌 2019-04-04
  • 海外版开放谈:开放促内陆高质量发展 2019-03-28
  • 女性之声——全国妇联 2019-03-27
  • 《舌尖上的中国》陈晓卿新作《风味人间》即将登场 2019-03-27
  • 呵呵。。。你这是没有耐力和极不对称的高手。真正的高手过招会有很多的精彩回合。 2019-03-22
  • 图说互联网(21期)iPhone的10年 下一个10年属于谁? 2019-03-18