jquery制作左导航特效,jquery二级菜单导航,jquery专业的导航菜单特效代码分享

jquery制作左导航特效,jquery二级菜单导航,jquery专业的导航菜单特效代码分享

这篇文章主要介绍了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

/李

Li ' mid ' a href=' # ' fly '镜片/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的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

相关文章阅读

  • 使用jquery实现图片轮播效果如何,jQuery图片轮播
  • 使用jquery实现图片轮播效果如何,jQuery图片轮播,使用jQuery实现图片轮播效果
  • 举例说明jquery中each函数的使用,jquery each()
  • 举例说明jquery中each函数的使用,jquery each(),JQuery中each()的使用方法说明
  • 一篇文章带你了解jquery动画人物,一篇文章带你了解jquery动画制作
  • 一篇文章带你了解jquery动画人物,jquery的动画,一篇文章带你了解jQuery动画
  • trigger的用法总结,jquery trigger 传参数
  • trigger的用法总结,jquery trigger 传参数,jQuery中值得注意的trigger方法浅析
  • js hover 触发事件显示另一元素,js hover 触发事件,jQuery中多个元素的Hover事件解决方案
  • js apply 实现原理,jquery apply用法_1
  • js apply 实现原理,jquery apply用法
  • js apply 实现原理,jquery apply用法,js中apply方法的使用详细解析
  • js apply 实现原理,jquery apply用法,JS中apply()的应用实例分析
  • jq获取radio选中的值,jquery radio 取值
  • jq获取radio选中的值,jquery radio 取值,Jquery获取radio选中值实例总结
  • 留言与评论(共有 条评论)
       
    验证码: