这篇文章主要介绍了jquery实现的蓝色二级导航条效果代码，涉及jquery鼠标事件及页面样式的动态切换效果实现技巧，非常简单实用，需要的朋友可以参考下
本文实例讲述了jquery实现的蓝色二级导航条效果代码。分享给大家供大家参考。具体如下：
这是一款网站导航条效果代码，菜单最多可支持两级，适合较多类型的网站使用，不喜欢蓝色的可自己修改成其它颜色，整体效果不错，挺简单的网站导航。
运行效果截图如下：
在线演示地址如下：
http://演示。jb51。net/js/2015/jquery-blue-2 level-nav-style-codes/
具体代码如下：
！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN '
http://www。w3。org/TR/XHTML 1/DTD/XHTML 1-过渡。' DTD '
html xmlns=' http://。w3。' org/1999/XHTML '
头
meta http-equiv=' Content-Type ' Content=' text/html；'' charset=gb2312 '
titlecss jquery打造二级横向菜单/标题
style type='text/css' /
# drop line bar {溢出：隐藏；}。droplinebar ul{
边距：0;
填充：0;
浮动：左；
宽度：100%;
字体：粗体14px Arial，Helvetica，无衬线，微软雅黑；
文本对齐：居中；
背景：# 006 b96 URL(图片/蓝色活动。gif)中心中心重复-x；}。drop line bar ul Li { display:inline；}。阿利垂直线栏{
浮动：左；
显示：块；
颜色：白色；
宽度：127像素
填充：11px 2px
文字-装饰：无；}。保险商实验所阿利droplinebar:已访问{颜色：白色；}。保险商实验所阿利droplinebar:悬停ul李.当前{
颜色：白色；背景：透明URL(图片/蓝色默认。gif)中心中心重复-x；填充：11px 2px}。droplinebar ul li ul{
位置：绝对；
z指数：100;
填充：5px 0；
top:0；
背景：# 006791;
可见性：隐藏；}。droplinebar ul li ul阿利{
字体：粗体14px微软雅黑、阿里亚、Helvetica、无衬线；
填充：5px 0；
边距：0;}。下降线条ul Li ul:悬停{
背景：# 024662;}
/风格
脚本类型=' text/JavaScript ' src=' jquery-1。6 .2 .量滴js '/脚本
脚本类型='文本/javascript '
var droplinemenu={
箭头图像：{ class name:'向下箭头类'，src: 'images/down.gif '，leftpadding: 5}，
动画教育：{over: 200，out: 100}，
buildmenu:function(menuid){
jQuery(文档)。就绪（函数($){
var $mainmenu=$('#' menuid 'ul ')
var $headers=$mainmenu.find('ul ').父级()
$headers.each(函数{
var $curobj=$(this)
var $subul=$(this).find('ul:eq(0)')
这个. dimensions={ h:$ curobj。find(' a:eq(0)').outerHeight()}
这个。isto header=$ curobj。父母(“ul”).长度==1?真：假
如果(!this.istopheader)
$subul.css({left:0，top:this ._dimensions.h})
var $ inner header=$ curobj。孩子们.等式(0)
$ inner header=($ inner header。儿童().等式(0)。是(‘span’)？$innerheader.children().等式(0) : $innerheader
$innerheader.append(
img src=' '下拉菜单。箭头图像。科学研究委员会
下拉菜单。箭头图像。类别名
'' style=' border:0；左填充：“下拉菜单”。箭头图像。左填充' px '/'
)
$curobj.hover(
功能(e){
var $targetul=$(this).子代(' ul:eq(0)')
if ($targetul.queue().长度=1)//如果一个或更少排队动画
if (this.istopheader)
$ target ul。CSS({ left:$main menu。偏移量().left，top: $mainmenu.offset().最重要的是. dimensions.h})
if (document.all！窗户XMLHttpRequest)//检测IE6或更低版本，修复溢出问题
$mainmenu.find('ul ').CSS({溢出：(这个。isto header)？隐藏':'可见' })
$ target ul。向下滑动(下拉菜单。动画持续时间。结束)
},
功能(e){
var $targetul=$(this).子代(' ul:eq(0)')
$ target ul。向上滑动(下拉菜单。动画持续时间。out)
}
)//结束悬停
})//end$headers。每个()
$mainmenu.find('ul ').css({display:'none '，visibility:'visible '，width:$main menu。width()})
})//结束文档.就绪
}
}/脚本
脚本类型='文本/javascript '
下拉菜单。生成菜单(“mydroplinemenu”)
/脚本
/头
身体
div id=' mydroplinemenu ' class=' droplinebar '
保险商实验所
lia href='# '网站首页/a/李
Lia=' # '在线营销教程/a
保险商实验所
Lia=' # '基础知识课程/a/li
Lia=' # '课内练习教程/a/li
Lia=' # '专项实践教程/a/li
Lia=' # '毕业论文安排/a/李
/ul
/李
Lia=' #' Flash源代码/a/li
Lia=' #' Photoshop教程/a
保险商实验所
Lia=' # '基础教程/a/li
Lia=' #' 5步示例教程/a/li
Lia=' # '文本和按钮教程/a/li
Lia=' # '图片教程/a/li
Lia=' # '画笔和其他下载/a/li
Lia=' # '源文件下载/a/li
Lia=' #' font下载/a/li
/ul
/李
Lia=' # '博客代码/a
保险商实验所
Lia=' # '博客总线模板/a/li
Lia=' # '博客总线代码/a/li
Lia=' # '贺勋博客代码/a/li
/ul
/李
Lia=' # '网店运营/a/li
Href=' # '网络营销研究/a/李
/ul
/div
/body
/html
希望这篇文章对大家的jquery编程有所帮助。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。