基于jQuery实现的菜单切换效果

这是一个非常流畅的菜单展示效果，应用在亚马逊上，当你上下移动鼠标的时候，二级菜单会非常轻快的切换，没有任何延时，给用户如滑丝般的感觉。这种效果借助于一款jQuery插件菜单-瞄准，本文将结合实例讲解如何实现速度超快的菜单效果。

超文本标记语言首先建立主菜单，我们借用电商网站常见的商品分类。其超文本标记语言结构代码如下，其中我们用到了html5的数据-子菜单构成形容词属性设置，这在插件调用时非常有用。

div class='active' ul class='下拉菜单'角色='菜单' li数据-子菜单-id='子菜单-patas'a href='# '服装服饰/a/li li数据-子菜单-id='子菜单-塌鼻子a href='# '箱包配饰/a/li li数据-子菜单-id='子菜单-duoc-langur'a href='# '数码家电/a/li li数据-子菜单-id='子菜单-侏儒a href='# '美容护发/a/li li数据-子菜单-id='子菜单-塔马林。母婴用品/a/li li数据-子菜单-id='子菜单-蒙克家居建材/a/li li数据-子菜单-id='子菜单-加蓬a href='# '食品百货/a/li li数据-子菜单-id='子菜单-grivet'a href='# '户外汽车/a/li li数据-子菜单-id='子菜单-红叶a href='# '文化玩乐/a/li li数据-子菜单-id='子菜单-king-colobus'a href='# '生活服务/a/li /ul /div子菜单与主菜单对应，每一个子菜单的编号属性值必须与主菜单的数据-子菜单构成形容词属性值对应，子菜单内容可以为任意超文本标记语言标签代码，p，img，音频都可以，格式如下：

div id='子菜单-patas' class='popover '任意超文本标记语言代码/div CSS我们将主菜单下拉菜单位置固定，子菜单酥脆饼默认隐藏，通过css3技术可以设置菜单阴影圆角效果，子菜单内容的钢性铸铁可以根据需要自由发挥。活动{位置：相对}。下拉菜单{ position : absolutez-index : 1000；向左浮动：最小宽度： 120像素；padd : 5px 0；margin : 2px 0 0 list-style :无；背景-color : # ffffff；border: 1px固体# ccc-web套件-边框-radius : 6px；-moz-border-radius : 6px；边界半径： 6px-web kit-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)；} .下拉菜单li { height:24px线高：24 px文本对齐：居中}。下拉菜单阿利{显示：block} .下拉菜单li a:hover { color: # fff文本装饰：无；背景：#39f} .popover { position:绝对值；top : 0；左： 0；z指数： 1010；显示器：无；宽度： 320 px-web套件-边框-半径： 6px-moz-border-radius : 6px；边界半径： 6px-web套件-边框-左上角-半径： 0px-web套件-边框-左下-半径： 0px边框-左上角-半径： 0px边框-底部-左侧-半径： 0px飞越：隐藏；padding: 1px 1px 1px 15px文本-左对齐：白色space:正常；背景-color : # fff；border: 1px固体# cccborder: 1px固体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的菜单插件，插件作者关注了用户体验并精于算法，根据鼠标轨迹，将菜单切换效果实现得淋漓精致，该插件"超快"的反应效果是不是让我们有中"超爽"的感觉？插件地址：使用$(元素)。menuAim()调用jquery.menu-aim.js，当鼠标触发主菜单时调用自定义函数激活子菜单(),当离开主菜单时调用自定义函数停用子菜单().

$(function(){ $(').下拉菜单')。menuAim({ activate : activate subscribe，//触发主菜单，显示子菜单停用：停用子菜单/离开主菜单，隐藏子菜单});});如上调用就可以完成子菜单间的快速切换，jquery.menu-aim.js还提供其他几种方法，输入()和exit()，都是控制鼠标移入移出、调用函数等。接下来，我们写上自定义函数

var $menu=$(' .下拉菜单');函数激活子菜单(行){ var $ row=$(行)，submenuId=$row.data('submenuId ')，$submenu=$('#' submenuId)，offset=$menu.offset()，height=$ menu.outerHeight()，width=$ menu。out width()；$submenu.css({ //设置子菜单样式display: 'block '，//显示子菜单top: offset.top，left: offset.left width - 5，height : height-4 })；//设置主菜单样式（鼠标滑向主菜单时)$row.find('a ').添加类(‘维护结束’)；}函数失活子菜单（行){ var $row=$(行),子菜单Id=$row.data('子菜单Id ')，子菜单=$('# '子菜单id ')；$订阅。CSS('显示'，'无')；//隐藏子菜单$row.find('a ')。移除类(‘维护结束’)；恢复主菜单样式} 怎么样，你也可以做一个amazon.cn式的菜单效果了，以上就是本文的全部内容，希望本文对大家学习jquery有所帮助。