jquery专业的导航菜单特效代码分享


Posted in Javascript onAugust 29, 2015

本文实例讲述了jquery专业的下拉菜单特效。分享给大家供大家参考。具体如下:
这是一款基于jquery实现的专业下拉菜单特效,蓝色风格的下拉菜单非常经典,网站是否有一个具有吸引力的导航会影响到用户停留时间的长久,就像小编编辑的文章内容影响亲们的访问时间长久一样。大家要学会如何建立一个属于自己网站风格的导航菜单。
运行效果图:-------------------查看效果 下载源码-------------------

jquery专业的导航菜单特效代码分享

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。
关键代码:

stuHover = function() {
var cssRule;
var newSelector;
for (var i = 0; i < document.styleSheets.length; i++)
for (var x = 0; x < document.styleSheets[i].rules.length ; x+
+)
{
cssRule = document.styleSheets[i].rules[x];
if (cssRule.selectorText.indexOf("LI:hover") != -1)
{
 newSelector = cssRule.selectorText.replace
(/LI:hover/gi, "LI.iehover");
document.styleSheets[i].addRule(newSelector , 
cssRule.style.cssText);
}
}
var getElm = document.getElementById("nav").getElementsByTagName
("LI");
for (var i=0; i<getElm.length; i++) {
getElm[i].onmouseover=function() {
this.className+=" iehover";
}
getElm[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" 
iehover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", stuHover);

为大家分享的jquery专业的下拉菜单特效代码如下

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jquery专业的下拉菜单特效</title>
<meta name="Author" content="Stu Nicholls" />

<link rel="stylesheet" type="text/css" href="pro_drop_1/pro_drop_1.css" />

<script src="pro_drop_1/stuHover.js" type="text/javascript"></script>

</head>

<body>
 
<span class="preload1"></span>
<span class="preload2"></span>

<ul id="nav">
 <li class="top"><a href="#" class="top_link"><span>Home</span></a></li>
 <li class="top"><a href="#" id="products" class="top_link"><span class="down">Products</span></a>
 <ul class="sub">
 <li><a href="#" class="fly">Cameras</a>
 <ul>
 <li><a href="#">Nikon</a></li>
 <li><a href="#">Minolta</a></li>
 <li><a href="#">Pentax</a></li>
 </ul>
 </li>
 <li class="mid"><a href="#" class="fly">Lenses</a>
 <ul>
 <li><a href="#">Wide Angle</a></li>
 <li><a href="#">Standard</a></li>
 <li><a href="#">Telephoto</a></li>
 <li><a href="#" class="fly">Zoom</a>
 <ul>
 <li><a href="#">35mm to 125mm</a></li>
 <li><a href="#">50mm to 250mm</a></li>
 <li><a href="#">125mm to 500mm</a></li>
 </ul>
 </li>
 <li><a href="#">Mirror</a></li>
 <li><a href="#" class="fly">Non standard</a>
 <ul>
 <li><a href="#">Bayonet mount</a></li>
 <li><a href="#">Screw mount</a></li>
 </ul>
 </li>
 </ul>
 </li>
 <li><a href="#">Flash Guns</a></li>
 <li><a href="#">Tripods</a></li>
 <li><a href="#">Filters</a></li>
 </ul>
 </li>
 <li class="top"><a href="#nogo22" id="services" class="top_link"><span class="down">Services</span></a>
 <ul class="sub">
 <li><a href="#">Printing</a></li>
 <li><a href="#">Photo Framing</a></li>
 <li><a href="#">Retouching</a></li>
 <li><a href="#">Archiving</a></li>
 </ul>
 </li>
 <li class="top"><a href="#" id="contacts" class="top_link"><span class="down">Contacts</span></a>
 <ul class="sub">
 <li><a href="#">Support</a></li>
 <li><a href="#" class="fly">Sales</a>
 <ul>
 <li><a href="#">USA</a></li>
 <li><a href="#">Canadian</a></li>
 <li><a href="#">South American</a></li>
 <li><a href="#" class="fly">European</a>
 <ul>
 <li><a href="#" class="fly">British</a>
 <ul>
 <li><a href="#">London</a></li>
 <li><a href="#">Liverpool</a></li>
 <li><a href="#">Glasgow</a></li>
 <li><a href="#" class="fly">Bristol</a>
 <ul>
 <li><a href="#">Redland</a></li>
 <li><a href="#">Hanham</a></li>
 <li><a href="#">Eastville</a></li>
 </ul>
 </li>
 <li><a href="#">Cardiff</a></li>
 <li><a href="#">Belfast</a></li>
 </ul>
 </li>
 <li><a href="#">French</a></li>
 <li><a href="#">German</a></li>
 <li><a href="#">Spanish</a></li>
 </ul>
 </li>
 <li><a href="#">Australian</a></li>
 <li><a href="#">Asian</a></li>
 </ul>
 </li>
 <li><a href="#">Buying</a></li>
 <li><a href="#">Photographers</a></li>
 <li><a href="#">Stockist</a></li>
 <li><a href="#">General</a></li>
 </ul>
 </li>
 <li class="top"><a href="#nogo53" id="shop" class="top_link"><span class="down">Shop</span></a>
 <ul class="sub">
 <li><a href="#">Online</a></li>
 <li><a href="#">Catalogue</a></li>
 <li><a href="#">Mail Order</a></li>
 </ul>
 </li>
 <li class="top"><a href="#" id="privacy" class="top_link"><span>Privacy Policy</span></a></li>
</ul>
 
</body>
</html>

以上就是为大家分享的jquery专业的导航菜单特效代码,希望大家可以喜欢,并应用到实践中。

Javascript 相关文章推荐
兼容ie和firefox js关闭代码
Dec 11 Javascript
jQuery 表单验证扩展(四)
Oct 20 Javascript
jQuery晃动层特效实现方法
Mar 09 Javascript
js兼容火狐显示上传图片预览效果的方法
May 21 Javascript
jquery获取文档高度和窗口高度汇总
Jan 25 Javascript
Jquery轮播效果实现过程解析
Mar 30 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
Jul 07 Javascript
vuejs如何配置less
Apr 25 Javascript
原生js封装运动框架的示例讲解
Oct 01 Javascript
vue根据值给予不同class的实例
Sep 29 Javascript
VUE实时监听元素距离顶部高度的操作
Jul 29 Javascript
Vite + React从零开始搭建一个开源组件库
Jun 25 Javascript
js实现基于正则表达式的轻量提示插件
Aug 29 #Javascript
js精美的幻灯片画集特效代码分享
Aug 29 #Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
Aug 28 #Javascript
jquery实现清新实用的网页菜单效果
Aug 28 #Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
Aug 28 #Javascript
jQuery实现多级下拉菜单jDropMenu的方法
Aug 28 #Javascript
js实现简单折叠、展开菜单的方法
Aug 28 #Javascript
You might like
创建数据库php代码 用PHP写出自己的BLOG系统
2010/04/12 PHP
php UTF-8、Unicode和BOM问题
2010/05/18 PHP
Yii入门教程之目录结构、入口文件及路由设置
2014/11/25 PHP
PHP全局使用Laravel辅助函数dd
2019/12/26 PHP
ExtJs 表单提交登陆实现代码
2010/08/19 Javascript
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
2013/01/24 Javascript
js 输出内容到新窗口具体实现代码
2013/05/31 Javascript
JavaScript异步编程:异步数据收集的具体方法
2013/08/19 Javascript
简单时间提示DEMO从0开始一直进行计时
2013/11/19 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
2014/01/23 Javascript
javaScript使用EL表达式的几种方式
2014/05/27 Javascript
AngularJS 中文API参考手册
2016/07/28 Javascript
对js eval()函数的一些见解
2016/08/15 Javascript
Node.js 异步异常的处理与domain模块解析
2017/05/10 Javascript
javaScript封装的各种写法
2017/08/14 Javascript
还不懂递归?读完这篇文章保证你会懂
2018/07/29 Javascript
Angular服务Request异步请求的实例讲解
2018/08/13 Javascript
vue表单自定义校验规则介绍
2018/08/28 Javascript
对vuex中store和$store的区别说明
2020/07/24 Javascript
Python with用法实例
2015/04/14 Python
python简单获取数组元素个数的方法
2015/07/13 Python
python图像常规操作
2017/11/11 Python
python学习基础之循环import及import过程
2018/04/22 Python
Python动态参数/命名空间/函数嵌套/global和nonlocal
2019/05/29 Python
浅析HTML5 meta viewport参数
2020/10/28 HTML / CSS
Wiggle美国:英国骑行、跑步、游泳、铁人三项商店
2018/10/27 全球购物
斯图尔特·韦茨曼鞋加拿大官网:Stuart Weitzman加拿大
2019/10/13 全球购物
化学教师自荐信范文
2013/12/28 职场文书
庆元旦迎新年广播稿
2014/02/18 职场文书
矿泉水广告词
2014/03/20 职场文书
派出所所长先进事迹
2014/05/19 职场文书
职工小家建设活动方案
2014/08/25 职场文书
2015年教师教学工作总结
2015/04/28 职场文书
党员电教片《信仰》心得体会
2016/01/15 职场文书
flex弹性布局详解
2022/03/20 HTML / CSS
Python查找算法的实现 (线性、二分,分块、插值查找算法)
2022/04/24 Python