基于jQuery实现的菜单切换效果
这是一个非常流畅的菜单展示效果,应用在亚马逊上,当你上下移动鼠标的时候,二级菜单会非常轻快的切换,没有任何延时,给用户如滑丝般的感觉。这种效果借助于一款jQuery插件menu-aim,本文将结合实例讲解如何实现速度超快的菜单效果。 HTML <div class="active"> <ul class="dropdown-menu" role="menu"> <li data-submenu-id="submenu-patas"><a href="#">服装服饰</a></li> <li data-submenu-id="submenu-snub-nosed"><a href="#"> 箱包配饰</a></li> <li data-submenu-id="submenu-duoc-langur"><a href="#">数码家电</a></li> <li data-submenu-id="submenu-pygmy"><a href="#">美容护发</a></li> <li data-submenu-id="submenu-tamarin"><a href="#">母婴用品</a></li> <li data-submenu-id="submenu-monk"><a href="#">家居建材</a></li> <li data-submenu-id="submenu-gabon"><a href="#">食品百货</a></li> <li data-submenu-id="submenu-grivet"><a href="#">户外汽车</a></li> <li data-submenu-id="submenu-red-leaf"><a href="#">文化玩乐</a></li> <li data-submenu-id="submenu-king-colobus"><a href="#">生活服务</a></li> </ul> </div> 子菜单与主菜单对应,每一个子菜单的id属性值必须与主菜单的data-submenu-id属性值对应,子菜单内容可以为任意html标签代码,p,img,audio都可以,格式如下: <div id="submenu-patas" class="popover"> 任意html代码 </div> CSS .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.2);-moz-box-shadow: 0 5px 10px rgba(0,0.2);box-shadow: 0 5px 10px rgba(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.2); webkit-box-shadow: 0 5px 10px rgba(0,0.2); } jQuery $(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),$submenu = $("#" + submenuId); $submenu.css("display","none"); //隐藏子菜单 $row.find("a").removeClass("maintainHover");恢复主菜单样式 } 怎么样,你也可以做一个amazon.cn式的菜单效果了,以上就是本文的全部内容,希望本文对大家学习jquery有所帮助。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |