jquery实现的蓝色二级导航条效果代码


Posted in Javascript onAugust 24, 2015

本文实例讲述了jquery实现的蓝色二级导航条效果代码。分享给大家供大家参考。具体如下:

这是一款网站导航条效果代码,菜单最多可支持两级,适合较多类型的网站使用,不喜欢蓝色的可自己修改成其它颜色,整体效果不错,挺简单的网站导航。

运行效果截图如下:

jquery实现的蓝色二级导航条效果代码

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>css+jquery打造二级横向菜单</title>
<style type="text/css" />
#droplinebar {overflow: hidden;}
.droplinebar ul{
margin: 0;
padding: 0;
float: left;
width: 100%;
font: bold 14px Arial, Helvetica, sans-serif,微软雅黑;
text-align:center;
background: #006b96 url(images/blueactive.gif) center center repeat-x;}
.droplinebar ul li{display: inline;}
.droplinebar ul li a{
float: left;
display: block;
color: white;
width: 127px;
padding:11px 2px;
text-decoration: none;}
.droplinebar ul li a:visited{color: white;}
.droplinebar ul li a:hover, .droplinebar ul li .current{
color: white;background: transparent url(images/bluedefault.gif) center center repeat-x;padding:11px 2px;}
.droplinebar ul li ul{
position: absolute;
z-index: 100;
padding: 5px 0;
top: 0;
background: #006791;
visibility: hidden;}
.droplinebar ul li ul li a{
font: bold 14px 微软雅黑,Arial, Helvetica, sans-serif;
padding:5px 0;
margin: 0;}
.droplinebar ul li ul li a:hover{
background: #024662;}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
var droplinemenu={
arrowimage: {classname: 'downarrowclass', src: 'images/down.gif', leftpadding: 5},
animateduration: {over: 200, out: 100},
buildmenu:function(menuid){
 jQuery(document).ready(function($){
  var $mainmenu=$("#"+menuid+">ul")
  var $headers=$mainmenu.find("ul").parent()
  $headers.each(function(i){
   var $curobj=$(this)
   var $subul=$(this).find('ul:eq(0)')
   this._dimensions={h:$curobj.find('a:eq(0)').outerHeight()}
   this.istopheader=$curobj.parents("ul").length==1? true : false
   if (!this.istopheader)
    $subul.css({left:0, top:this._dimensions.h})
   var $innerheader=$curobj.children('a').eq(0)
   $innerheader=($innerheader.children().eq(0).is('span'))? $innerheader.children().eq(0) : $innerheader
   $innerheader.append(
    '<img src="'+ droplinemenu.arrowimage.src
    +'" class="' + droplinemenu.arrowimage.classname
    + '" style="border:0; padding-left: '+droplinemenu.arrowimage.leftpadding+'px" />'
   )
   $curobj.hover(
    function(e){
     var $targetul=$(this).children("ul:eq(0)")
     if ($targetul.queue().length<=1) //if 1 or less queued animations
      if (this.istopheader)
       $targetul.css({left: $mainmenu.offset().left, top: $mainmenu.offset().top+this._dimensions.h})
      if (document.all && !window.XMLHttpRequest) //detect IE6 or less, fix issue with overflow
       $mainmenu.find('ul').css({overflow: (this.istopheader)? 'hidden' : 'visible'})
      $targetul.slideDown(droplinemenu.animateduration.over)
    },
    function(e){
     var $targetul=$(this).children("ul:eq(0)")
     $targetul.slideUp(droplinemenu.animateduration.out)
    }
   ) //end hover
  }) //end $headers.each()
  $mainmenu.find("ul").css({display:'none', visibility:'visible', width:$mainmenu.width()})
 }) //end document.ready
}
}</script>
<script type="text/javascript">
droplinemenu.buildmenu("mydroplinemenu")
</script>
</head>
<body>
<div id="mydroplinemenu" class="droplinebar">
<ul>
<li><a href="#" >网站首页</a></li>
<li><a href="#" >网络营销教程</a>
<ul>
 <li><a href="#">基础知识教程</a></li>
 <li><a href="#">课内实践教程</a></li>
 <li><a href="#">专项实践教程</a></li>
 <li><a href="#">毕业论文安排</a></li>
 </ul>
</li>
<li><a href="#" >Flash源码</a></li>
<li><a href="#" >Photoshop教程</a>
<ul>
 <li><a href="#">基础教程</a></li>
<li><a href="#">5步实例教程</a></li>
 <li><a href="#">文字与按钮教程</a></li>
 <li><a href="#">图片教程</a></li>
 <li><a href="#">笔刷等下载</a></li>
 <li><a href="#">源文件下载</a></li>
 <li><a href="#">字体下载</a></li>
 </ul>
</li>
<li><a href="#" >博客代码</a>
<ul>
 <li><a href="#">博客大巴模板</a></li>
 <li><a href="#">博客大巴代码</a></li>
 <li><a href="#">和讯博客代码</a></li>
 </ul>
</li>
<li><a href="#" >网店经营</a></li>
<li><a href="#" >网络营销研究</a> </li>
</ul>
</div>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
js 刷新页面的代码小结 推荐
Apr 02 Javascript
js+xml生成级联下拉框代码
Jul 24 Javascript
点击页面其它地方隐藏该div的两种思路
Nov 18 Javascript
常用的JS验证和函数汇总
Dec 23 Javascript
JS实现的文字与图片定时切换效果代码
Oct 06 Javascript
Jquery插件easyUi实现表单验证示例
Dec 15 Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
Dec 08 Javascript
Angular中自定义Debounce Click指令防止重复点击
Jul 26 Javascript
基于Two.js实现星球环绕动画效果的示例
Nov 06 Javascript
详解Chart.js轻量级图表库的使用经验
May 22 Javascript
解决layui table表单提示数据接口请求异常的问题
Sep 24 Javascript
Vuejs中的watch实例详解(监听者)
Jan 05 Javascript
纯javascript判断查询日期是否为有效日期
Aug 24 #Javascript
jquery实现的仿天猫侧导航tab切换效果
Aug 24 #Javascript
js实现类似MSN提示的页面效果代码分享
Aug 24 #Javascript
jquery实现适用于门户站的导航下拉菜单效果代码
Aug 24 #Javascript
jquery性能优化高级技巧
Aug 24 #Javascript
javascript实现支持移动设备画廊
Aug 24 #Javascript
js实现带圆角的两级导航菜单效果代码
Aug 24 #Javascript
You might like
PHP防盗链代码实例
2014/08/27 PHP
PHP序列化/对象注入漏洞分析
2016/04/18 PHP
PHP中Laravel 关联查询返回错误id的解决方法
2017/04/01 PHP
THINKPHP5.1 Config的配置与获取详解
2020/06/08 PHP
js宝典学习笔记(上)
2007/01/10 Javascript
js操作ajax返回的json的注意问题!
2010/02/23 Javascript
javascript高级学习笔记整理
2011/08/14 Javascript
原生javascript和jquery判断浏览器版本等信息
2013/07/04 Javascript
js获取url中指定参数值的示例代码
2013/12/14 Javascript
js中style.display=&quot;&quot;无效的解决方法
2014/10/30 Javascript
JSON格式化输出
2014/11/10 Javascript
JQuery实现展开关闭层的方法
2015/02/17 Javascript
jQuery选择器源码解读(四):tokenize方法的Expr.preFilter
2015/03/31 Javascript
javascript中类的定义方式详解(四种方式)
2015/12/22 Javascript
基于JavaScript Array数组方法(新手必看篇)
2016/08/20 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
2017/01/23 Javascript
JS中Safari浏览器中的Date
2017/07/17 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
2020/02/03 Javascript
从表单校验看JavaScript策略模式的使用详解
2020/10/17 Javascript
Python3中的列表,元组,字典,字符串相关知识小结
2017/11/10 Python
Python编程之gui程序实现简单文件浏览器代码
2017/12/08 Python
Python+OpenCV实现旋转文本校正方式
2020/01/09 Python
Python实现AI换脸功能
2020/04/10 Python
经验丰富程序员才知道的8种高级Python技巧
2020/07/27 Python
Python如何使用神经网络进行简单文本分类
2021/02/25 Python
Ootori在线按摩椅店:一家专业的按摩椅制造商
2019/04/10 全球购物
管理科学大学生求职信
2013/11/13 职场文书
大学英语演讲稿(中英文对照)
2014/01/14 职场文书
红旗团支部事迹材料
2014/01/27 职场文书
十八届三中全会学习方案
2014/02/16 职场文书
党委领导班子整改方案
2014/09/30 职场文书
2014年办公室人员工作总结
2014/12/09 职场文书
团队合作精神学习心得体会
2016/01/19 职场文书
子女赡养老人协议书
2016/03/23 职场文书
Java实现二维数组和稀疏数组之间的转换
2021/06/27 Java/Android
Go 语言结构实例分析
2021/07/04 Golang