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 相关文章推荐
浅谈Javascript如何实现匀速运动
Dec 19 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
Mar 24 Javascript
分享两段简单的JS代码防止SQL注入
Apr 12 Javascript
Bootstrap3.0建站教程(一)之bootstrap表单元素排版
Jun 01 Javascript
js本地图片预览实现代码
Oct 09 Javascript
Bootstrap源码解读媒体对象、列表组和面板(10)
Dec 26 Javascript
B/S(Web)实时通讯解决方案分享
Apr 06 Javascript
React Native 搭建开发环境的方法步骤
Oct 30 Javascript
javascript高仿热血传奇游戏实现代码
Feb 22 Javascript
Vue组件中prop属性使用说明实例代码详解
May 31 Javascript
详解vue-loader在项目中是如何配置的
Jun 04 Javascript
Nuxt默认模板、默认布局和自定义错误页面的实现
May 11 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语法(5)
2006/10/09 PHP
PHP 获取文件权限函数介绍
2013/07/11 PHP
yii2超好用的日期组件和时间组件
2016/05/05 PHP
php实现简单加入购物车功能
2017/03/07 PHP
PHP编程获取各个时间段具体时间的方法
2017/05/26 PHP
jquery $.ajax各个事件执行顺序
2010/10/15 Javascript
情人节之礼 js项链效果
2012/02/13 Javascript
ff下JQuery无法监听input的keyup事件的解决方法
2013/12/12 Javascript
js闭包实现按秒计数
2015/04/23 Javascript
js实现鼠标经过表格行变色的方法
2015/05/12 Javascript
通过实例理解javascript中没有函数重载的概念
2015/06/03 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
2015/11/29 Javascript
JS hashMap实例详解
2016/05/26 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(三)
2016/09/14 Javascript
Javascript从数组中随机取出不同元素的两种方法
2016/09/22 Javascript
Bootstrap源码解读按钮(5)
2016/12/23 Javascript
Vue2.x中的父子组件相互通信的实现方法
2017/05/02 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
2018/07/13 Javascript
Layer弹出层动态获取数据的方法
2018/08/20 Javascript
快速解决Vue项目在IE浏览器中显示空白的问题
2018/09/04 Javascript
Vue项目实现简单的权限控制管理功能
2019/07/17 Javascript
Python生成器的使用方法和示例代码
2019/03/04 Python
Python学习笔记之自定义函数用法详解
2019/06/08 Python
将Pytorch模型从CPU转换成GPU的实现方法
2019/08/19 Python
Python 网络编程之UDP发送接收数据功能示例【基于socket套接字】
2019/10/11 Python
numpy创建单位矩阵和对角矩阵的实例
2019/11/29 Python
Python pyautogui模块实现鼠标键盘自动化方法详解
2020/02/17 Python
推荐技术人员一款Python开源库(造数据神器)
2020/07/08 Python
python 常用日期处理-- datetime 模块的使用
2020/09/02 Python
大二法学专业职业生涯规划范文
2014/02/12 职场文书
人事部经理岗位职责
2014/03/07 职场文书
2014新课程改革心得体会
2014/03/10 职场文书
高考诚信考试承诺书
2015/04/29 职场文书
护士岗位竞聘书
2015/09/15 职场文书
创业计划书之家教托管
2019/09/25 职场文书
MySQL时间设置注意事项的深入总结
2021/05/06 MySQL