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专业的导航菜单特效代码，希望大家可以喜欢，并应用到实践中。
相关推荐
-
jquery实现漂亮的二级下拉菜单代码
本文实例讲述了jquery实现漂亮的二级下拉菜单代码.分享给大家供大家参考.具体如下: 这里介绍一款基于jquery实现的网站下拉菜单,黑色风格,很漂亮,本菜单需要点击主菜单后的小三角符号才下拉出二级菜单,并不是有些菜单,是鼠标移上主菜单的时候就滑过,至于哪一种,就看个人的喜好了 先来看看运行效果: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-bg-2-level-down-show-menu-codes/ 具体代码如下: <!DOCTYPE ht
-
jQuery实现多级下拉菜单jDropMenu的方法
本文实例讲述了jQuery实现多级下拉菜单jDropMenu的方法.分享给大家供大家参考.具体如下: 这里介绍的jQuery多级下拉菜单导航-多级下拉菜单,英文名叫 DropDown Menu.通过 each() 遍历添加相应的处理事件 mouseover,mouseout 和 tab 操作的支持.这个效果是我们平时最常见的一个效果之一,也是一个十分实用的一个 JavaScript 特效.例如我的 BlueNight 主题的主导航就使用了多级下拉菜单的这个效果. 运行效果截图如下: 在线演示地址
-
jquery实现平滑的二级下拉菜单效果
本文实例讲述了jquery实现平滑的二级下拉菜单效果.分享给大家供大家参考.具体如下: 这是一款使用了jQuery实现的二级菜单特效,灰色风格,颜色自己不喜欢的就自己动动手吧,CSS代码经过了优化,水平高的自己拿出修改吧,这是一个在国外前端设计网站找到的导航菜单效果,希望大家喜欢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-soft-2level-menu-nav-codes/ 具体代码如下: <!DOCTYPE html>
-
jquery实现鼠标滑过显示二级下拉菜单效果
本文实例讲述了jquery实现鼠标滑过显示二级下拉菜单效果.分享给大家供大家参考.具体如下: 这是一款jquery实现的下拉菜单,当鼠标移在主菜单上的时候,向下滑出二级子菜单,采用UL LI结构,便于修改完善,我觉得是很实用的菜单,希望大家平时能用得上. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-mouse-over-show-menu-codes/ 具体代码如下: <!DOCTYPE html> <head>
-
jquery带下拉菜单和焦点图代码分享
jquery带下拉菜单和焦点图是一款顶部通栏带二级下拉菜单和banner导航菜单代码.感兴趣的朋友快来学习学习吧 运行效果图: ----------------------查看效果 下载源码----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery带下拉菜单和焦点图如下 <head> <meta http-equiv="Content-Type"
-
jQuery实现的多级下拉菜单效果代码
本文实例讲述了jQuery实现的多级下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一款jQuery多级下拉菜单,在支持html5的浏览器中测试你会发现本菜单很智能,会自动判断浏览器边界来改变下拉菜单的显示方向,在ie下没发现此效果.整体上来看,和Windows系统的"经典"主题时的菜单风格特别相似,配合图片,整体效果还是相当有专业水准的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-nlevel-nav-me
-
jQuery实现精美的多级下拉菜单特效
这是一款精美的多级下拉菜单美化,可以完美替代"select"来实现下拉菜单的效果.而且支持多级菜单,有加载等待效果,有层级分类展示. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www
-
jQuery树形下拉菜单特效代码分享
本文实例讲述了jQuery实现幻树形下拉菜单特效,实现自动伸缩,分享给大家供大家参考. 运行jQuery树形下拉菜单特效效果图: 为大家分享的jQuery树形下拉菜单代码如下 <head> <title>常用的jquery下拉菜单</title> <script type="text/javascript" src="js/jquery.js"></script> <script type="
-
jquery动感漂浮导航菜单代码分享
这是一款基于jquery实现动感漂浮导航菜单的特效代码,菜单可以上下浮动,动感十足,为自己的网站增加了活力,是一款非常实用的导航菜单特效源码. 运行效果图: 点击下载源码 为大家分享的jquery动感漂浮导航菜单代码如下 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>jQuery Floating Menu<
-
jQuery垂直多级导航菜单代码分享
这是一款基于jquery实现的垂直导航菜单特效代码,总共有三级,实现效果简单大方,最后一级还可以进行图片展示说明,是一款非常实用的导航菜单特效源码. 效果演示 源码下载 为大家分享的jQuery垂直多级导航菜单代码如下 <head> <title>jQuery垂直多级导航菜单代码</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"