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 相关文章推荐
JavaScript 事件系统
Jul 22 Javascript
Js表格万条数据瞬间加载实现代码
Feb 20 Javascript
JQuery调用绑定click事件的3种写法
Mar 28 Javascript
JS实现控制表格单元格垂直对齐的方法
Mar 30 Javascript
在localStorage中存储对象数组并读取的方法
Sep 24 Javascript
vue router+vuex实现首页登录验证判断逻辑
May 17 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
Jul 23 Javascript
解决Vue打包后访问图片/图标不显示的问题
Jul 25 Javascript
vue 集成jTopo 处理方法
Aug 07 Javascript
vue中keep-alive、activated的探讨和使用详解
Jul 26 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
Feb 05 Javascript
react中props 的使用及进行限制的方法
Apr 28 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中使用substr()截取字符串出现中文乱码问题该怎么办
2015/10/21 PHP
Thinkphp 中 distinct 的用法解析
2016/12/14 PHP
静态页面的值传递(三部曲)
2006/09/25 Javascript
Javascript Web Slider 焦点图示例源码
2013/10/10 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
2015/08/21 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
2016/03/30 Javascript
JavaScript 函数的执行过程
2016/05/09 Javascript
微信小程序 购物车简单实例
2016/10/24 Javascript
前端分页功能的实现以及原理(jQuery)
2017/01/22 Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
2017/04/07 Javascript
vue.js全局API之nextTick全面解析
2017/07/07 Javascript
Chrome调试折腾记之JS断点调试技巧
2017/09/11 Javascript
Fetch超时设置与终止请求详解
2019/05/18 Javascript
基于Vue的侧边目录组件的实现
2020/02/05 Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
2020/04/26 Javascript
解决vue自定义指令导致的内存泄漏问题
2020/08/04 Javascript
JS算法教程之字符串去重与字符串反转
2020/12/15 Javascript
跟老齐学Python之关于循环的小伎俩
2014/10/02 Python
Python复制目录结构脚本代码分享
2015/03/06 Python
python使用arcpy.mapping模块批量出图
2017/03/06 Python
python面向对象_详谈类的继承与方法的重载
2017/06/07 Python
Python实现打印螺旋矩阵功能的方法
2017/11/21 Python
基于YUV 数据格式详解及python实现方式
2019/12/09 Python
什么是python类属性
2020/06/10 Python
python 实现非极大值抑制算法(Non-maximum suppression, NMS)
2020/10/15 Python
详解android与HTML混合开发总结
2018/06/06 HTML / CSS
Fossil美国官网:Fossil手表、手袋、珠宝及配件
2017/02/01 全球购物
幼儿园父亲节活动方案
2014/03/11 职场文书
会计与审计专业自荐信范文
2014/03/15 职场文书
个人政风行风自查自纠报告
2014/10/21 职场文书
文明单位汇报材料
2014/12/24 职场文书
公司表扬信格式
2015/05/04 职场文书
药品销售员2015年终工作总结
2015/10/22 职场文书
iPhone13将有八大升级
2021/04/15 数码科技
spring注解 @PropertySource配置数据源全流程
2022/03/25 Java/Android
JavaScript原型链中函数和对象的理解
2022/06/16 Javascript