这篇文章主要介绍了jquery专业的下拉菜单特效，一个精致的导航菜单会吸引用户的注意力，让用户产生浏览网站的兴趣至关重要，现在小编推荐给大家一款特别棒的导航菜单，感兴趣的小伙伴可以参考下。
本文实例讲述了jquery专业的下拉菜单特效。分享给大家供大家参考。具体如下：
这是一款基于jquery实现的专业下拉菜单特效，蓝色风格的下拉菜单非常经典，网站是否有一个具有吸引力的导航会影响到用户停留时间的长久，就像小编编辑的文章内容影响亲们的访问时间长久一样。大家要学会如何建立一个属于自己网站风格的导航菜单。
运行效果图： - 查看效果下载源码-
小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
关键代码：
stuHover=function() {
var cssRule
var newSelector
for(var I=0；我记录。样式表。长度；我)
for(var x=0；x文档。样式表[I]。规则。长度；x
)
{
CSS规则=文档。样式表[I].规则[x]；
if(CSS规则。选择器文本。索引(李：悬停)！=-1)
{
新选择器=CSS规则。选择器文本。替换
(/LI:hover/gi， LI。即hover’)；
文档。样式表[我].addRule(newSelector，
CSS规则。风格。CSS文本)；
}
}
var getElm=文档。getelementbyid( nav ).getElementsByTagName
(李);
for(var I=0；伊格尔特榆树。长度；i ) {
getElm[i].onmouseover=function() {
这是我的梦想
}
getElm[i].onmouseout=function() {
这个。类名=this。类名。替换(新的正则表达式(
iehoverb )， )；
}
}
}
如果(窗口。附加事件)窗口。附加事件( onl oad ，stu hover)；
为大家分享的jquery专业的下拉菜单特效代码如下
头
meta http-equiv= Content-Type Content= text/html；charset=UTF-8 /
titlejquery专业的下拉菜单特效/标题
meta name= Author content= Stu Nicholls /
link rel=样式表 type= text/CSS href= pro _ drop _ 1/pro _ drop _ 1。CSS /
脚本src= pro _ drop _ 1/stu hover。js type= text/JavaScript /script
/头
身体
span class=preload1/span
span class=preload2/span
ul id=nav
Li class= top a href= # class= top _ link span home/span/a/Li
产品 class= top _ link span class= down 产品/span/a
ul class=sub
lia href= # fly 摄像机/a
保险商实验所
lia href=# 尼康/a/李
lia href=#Minolta/a/li
lia href=#Pentax/a/li
/ul
/李
Li mid a href= # fly 镜片/a
保险商实验所
lia href=# 广角/a/李
lia href=# 标准/a/李
lia href=# 长焦/a/李
lia href=# class=flyZoom/a
保险商实验所
lia href= # 35mm毫米到125毫米/a/李
lia href= # 50mm毫米毫米至250毫米/a/李
lia href= # 125mm毫米毫米至500毫米/a/李
/ul
/李
lia href=# 镜像/a/李
lia href=# class=fly 非标准/a
保险商实验所
lia href=# 卡口支架/a/李
lia href=# 螺钉支架/a/李
/ul
/李
/ul
/李
lia href=# 闪光灯/a/李
lia href=# 三脚架/a/李
lia href=# 筛选器/a/李
/ul
/李
Li class= top a href= # nogo 22 id= services class= top _ link span class= down services/span/a
ul class=sub
lia href=# 打印/a/李
lia href=# 照片取景/a/李
lia href=# 修图/a/李
lia href=# 存档/a/李
/ul
/李
a href= # id= contacts class= top _ link span class= down 联系人/span/a
ul class=sub
lia href=# 支持/a/李
lia href=# class=fly 销售/a
保险商实验所
lia href=# 美国/a/李
lia href=# 加拿大/a/李
lia href=# 南美/a/李
lia href= # fly 欧洲/a
保险商实验所
lia href= # fly 英国/a
保险商实验所
lia href=# 伦敦/a/李
lia href=# 利物浦/a/李
lia href=# 格拉斯哥/a/李
lia href= # fly
保险商实验所
lia href=#Redland/a/li
lia href=#Hanham/a/li
lia href=#Eastville/a/li
/ul
/李
lia href=#Cardiff/a/li
lia href=# 贝尔法斯特/a/李
/ul
/李
lia href=# 法语/a/李
lia href=# 德语/a/李
lia href=# 西班牙语/a/李
/ul
/李
lia href=# 澳大利亚/a/李
lia href=# 亚洲/a/李
/ul
/李
lia href=# 购买/a/李
lia href=# 摄影师/a/李
lia href=# 零售商/a/李
lia href=# 常规/a/李
/ul
/李
Li class= top a href= # nogo 53 id= shop class= top _ link span class= down shop/span/a
ul class=sub
lia href=# 在线/a/李
lia href=# 目录/a/李
lia href=# 邮购/a/李
/ul
/李
Li class= top a href= # id= privacy class= top _ link span隐私政策/span/a/li
/ul
/body
/html
以上就是为大家分享的jquery专业的导航菜单特效代码，希望大家可以喜欢，并应用到实践中。
