这篇文章主要介绍了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编程有所帮助。
