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 相关文章推荐
jquery队列queue与原生模仿其实现方法分享
Mar 25 Javascript
js 通过cookie实现刷新不变化树形菜单
Oct 30 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
Mar 03 Javascript
JavaScript对数组进行随机重排的方法
Jul 22 Javascript
js获取图片宽高的方法
Nov 25 Javascript
JavaScript的new date等日期函数在safari中遇到的坑
Oct 24 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
Jan 23 Javascript
利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)
Feb 16 Javascript
Easyui Datagrid自定义按钮列(最后面的操作列)
Jul 13 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
Jul 21 Javascript
vue使用Sass时报错问题的解决方法
Oct 14 Javascript
微信小程序实现首页弹出广告
Dec 03 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
Win2000+Apache+MySql+PHP4+PERL安装使用小结
2006/10/09 PHP
php下连接ftp实现文件的上传、下载、删除文件实例代码
2010/06/03 PHP
php定时计划任务与fsockopen持续进程实例
2014/05/23 PHP
php源码分析之DZX1.5字符串截断函数cutstr用法
2015/06/17 PHP
详解PHP中的状态模式编程
2015/08/11 PHP
ZF框架实现发送邮件的方法
2015/12/03 PHP
Symfony学习十分钟入门经典教程
2016/02/03 PHP
在Mac OS上搭建PHP的Yii框架及相关测试环境
2016/02/14 PHP
PHP邮件群发机实现代码
2016/02/16 PHP
javascript静态的url如何传递
2007/05/03 Javascript
javascript document.execCommand() 常用解析
2009/12/14 Javascript
jquery 如何动态添加、删除class样式方法介绍
2012/11/07 Javascript
js onload处理html页面加载之后的事件
2013/10/30 Javascript
用jquery中插件dialog实现弹框效果实例代码
2013/11/15 Javascript
JavaScript的21条基本知识点
2014/03/04 Javascript
纯javascript实现四方向文本无缝滚动效果
2015/06/16 Javascript
JavaScript中Require调用js的实例分享
2017/10/27 Javascript
vue头部导航动态点击处理方法
2018/11/02 Javascript
vue 实现左右拖拽元素并且不超过他的父元素的宽度
2018/11/30 Javascript
vue中配置scss全局变量的步骤
2020/12/28 Vue.js
[01:02:06]LGD vs Mineski Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
Python性能优化的20条建议
2014/10/25 Python
python if not in 多条件判断代码
2016/09/21 Python
Python爬虫获取整个站点中的所有外部链接代码示例
2017/12/26 Python
学习Python selenium自动化网页抓取器
2018/01/20 Python
python实现图书管理系统
2018/03/12 Python
Window10+Python3.5安装opencv的教程推荐
2018/04/02 Python
python爬取cnvd漏洞库信息的实例
2019/02/14 Python
python 获取sqlite3数据库的表名和表字段名的实例
2019/07/17 Python
html5使用canvas画一条线
2014/12/15 HTML / CSS
数据库的约束含义
2012/09/09 面试题
企业文化建设实施方案
2014/03/22 职场文书
师范学院毕业生求职信
2014/06/24 职场文书
幼儿园安全教育随笔
2015/08/14 职场文书
五年级语文教学反思
2016/03/03 职场文书
速龙x4-860k处理器相当于i几
2022/04/20 数码科技