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 02 Javascript
node.js中的fs.truncateSync方法使用说明
Dec 15 Javascript
浅谈Javascript数组索引
Jul 29 Javascript
js带前后翻页的图片切换效果代码分享
Sep 08 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
Apr 21 Javascript
js代码规范之Eslint安装与配置详解
Sep 08 Javascript
vue-cli3.0 环境变量与模式配置方法
Nov 08 Javascript
node.js的Express服务器基本使用教程
Jan 09 Javascript
JavaScript禁止右击保存图片,禁止拖拽图片的实现代码
Apr 28 Javascript
vue中解决拖拽改变存在iframe的div大小时卡顿问题
Jul 22 Javascript
vue实现简易计算器功能
Jan 20 Vue.js
js中实现继承的五种方法
Jan 25 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下实现农历日历的代码
2007/03/07 PHP
php2html php生成静态页函数
2008/12/08 PHP
php中实现用数组妩媚地生成要执行的sql语句
2015/07/10 PHP
10个超级有用的PHP代码片段果断收藏
2015/09/23 PHP
PHP实现数组的笛卡尔积运算示例
2017/12/15 PHP
PHP yield关键字功能与用法分析
2019/01/03 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
使用时间戳解决ie缓存的问题
2014/08/20 Javascript
jquery使用each方法遍历json格式数据实例
2015/05/18 Javascript
Js遍历键值对形式对象或Map形式的方法
2016/08/08 Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
2017/01/14 Javascript
jQuery实现获取选中复选框的值实例详解
2018/06/28 jQuery
vue中导出Excel表格的实现代码
2018/10/18 Javascript
JS/jQuery实现简单的开关灯效果【案例】
2019/02/19 jQuery
node微信开发之获取access_token+自定义菜单
2019/03/17 Javascript
原生javascript制作的拼图游戏实现方法详解
2020/02/23 Javascript
如何基于jQuery实现五角星评分
2020/09/02 jQuery
[04:40]2016个国际邀请赛中国区预选赛场地——华西村观战指南
2016/06/25 DOTA
[05:09]DOTA2-DPC中国联赛2月22日Recap集锦
2021/03/11 DOTA
Python入门_浅谈字符串的分片与索引、字符串的方法
2017/05/16 Python
Python编程实现微信企业号文本消息推送功能示例
2017/08/21 Python
python将秒数转化为时间格式的实例
2018/09/16 Python
python基础梳理(一)(推荐)
2019/04/06 Python
python 实现将Numpy数组保存为图像
2020/01/09 Python
Python3.6安装卸载、执行命令、执行py文件的方法详解
2020/02/20 Python
Python Matplotlib简易教程(小白教程)
2020/07/28 Python
python安装及变量名介绍详解
2020/12/12 Python
全球领先的鞋类零售商:The Walking Company
2016/07/21 全球购物
俄罗斯旅游网站:Tripadvisor俄罗斯
2017/03/21 全球购物
希腊品牌鞋类销售网站:epapoutsia.gr
2020/03/18 全球购物
农救科工作职责
2013/11/27 职场文书
五四演讲稿范文
2014/09/03 职场文书
致800米运动员广播稿(10篇)
2014/10/17 职场文书
期末复习计划
2015/01/19 职场文书
2017新年晚会开幕词
2016/03/03 职场文书
golang elasticsearch Client的使用详解
2021/05/05 Golang