这篇文章主要介绍了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。类名。替换(新的正则表达式('
iehover\\b ')，' ')；
}
}
}
如果(窗口。附加事件)窗口。附加事件(' onload '，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
/李
李' mid ' a href=' # '飞镜片/a
保险商实验所
lia href='# '广角/a/李
lia href='# '标准/a/李
lia href='# '长焦/a/李
lia href='#' class='fly'Zoom/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专业的导航菜单特效代码，希望大家可以喜欢，并应用到实践中。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。