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

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-blue-2level-nav-style-codes/

具体代码如下：

<!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程序设计有所帮助。

赞 (0)

相关推荐

  • jQuery侧边栏实现代码

    jQuery侧边栏实现代码

    先给大家展示下实现效果图,如果亲感觉是您想要的效果,请参考本代码. 实现代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JavaScript菜单侧边展开(改良版)</title> </head> <body> <ul id="navigation"> <li>&

  • jQuery实现智能判断固定导航条或侧边栏的方法

    jQuery实现智能判断固定导航条或侧边栏的方法

    本文实例讲述了jQuery实现智能判断固定导航条或侧边栏的方法.分享给大家供大家参考,具体如下: 这是一个jQuery智能判断固定DIV层的特效代码,通过这个jQuery智能代码,你可以设置导航栏.侧边栏.任何DIV层的固定显示:现在蓝叶的站就用的这个jQuery智能判断固定的导航条,要看演示的就请下拉页面滚动条,就会看到导航条固定了:使用这个代码需要在页面里引用jQuery库的JS文件,现在的网站一般都引用了jQuery库代码,如果没有那就打开你网站的模板,在页头或者页位加上<script s

  • Jquery实现侧边栏跟随滚动条固定（兼容IE6）

    部分购物网站用这个功能放购物车或商品分类导航,使产品页面很长的时候,侧边栏能始终固定发挥它应有的作用,有的网站用这个功能来边栏的广告. jQuery代码: 复制代码 代码如下: var rollSet = $('#Roll');// 检查对象,#sidebar-tab是要随滚动条固定的ID,可根据需要更改var offset = rollSet.offset();$(window).scroll(function () { // 检查对象的顶部是否在游览器可见的范围内 var scrollTop

  • jQuery关于导航条背景切换效果实现示例

    jQuery关于导航条背景切换效果实现示例

    效果如下:   复制代码 代码如下: <DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script> <meta charset="UTF-8"> <style> .nav{height:40px; width: 100%;background: #E6E6

  • 基于jquery的一个OutlookBar类，动态创建导航条

    基于jquery的一个OutlookBar类，动态创建导航条

    图示效果:演示地址:http://demo.jb51.net/js/menu_jquery/index.html下载地址:http://xiazai.jb51.net/201011/yuanma/menu_jquery.rarOutlookBar.js 复制代码 代码如下: function OutlookBar(targetName)//targetName:右侧iframe的name { //创建标题 this.AddTitle=function(menuid,menutitle,openo

  • 博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)

    当一个页面内容很长的时候,侧边栏栏目可能显得太短,当窗口滑动到靠下的位置,则侧边即失去了展示内容的机会.很多新闻资讯类网站如新浪.网易.CSDN等,会在边栏的右下角以固定的小弹窗形式,以提供更多的内容展示方式,但这并不适合博客和web2.0风格的网站. 现在很多的独立博客和网站如人人网等,都使用了让侧边栏模块随滚动条滑动而位置固定的效果.就是当一个页面很长的时候,设定侧栏内容会跟随滚动条,这种效果适用于评论较多.内容较长的网站.志文工作室调研了几种类似功能的实现方法,摘录之以供参考. 参考一.提

  • jQuery固定浮动侧边栏实现思路及代码

    这个功能现在应用的非常普遍,如果页面比较高,当滚动条拖到页面的下面的时候,侧边栏会出现一个固定跟随浏览器的DIV框,现思路是这样的:首先获取需要跟随的DIV距离页面顶部的距离,然后判断,当浏览器滚动的距离大于该DIV本身距离顶部距离的时候,则添加CSS属性fixed即可. 代码如下 HTML代码: <div id="header">header</div> <div id="sidebarWrap"> <div id=&qu

  • jquery 导航条的效果(css选择器控制)

    标题1 标题2 标题3 标题4 标题5 标题6 进入之后才能看到效果! $(document).ready(function () { myHide(); }); function myHide() { //alert("hello"); //注册事件 $(".m1").bind('mouseover', m1_mouseover); $(".m1").bind('mouseout', m1_mouseout); $(".m2"

  • jquery scrollTop方法根据滚动像素显示隐藏顶部导航条

    本文使用jquery的scrollTop方法监视页面垂直滚动像素,并根据像素隐藏或者显示顶部的导航条. 效果预览网址:http://www.keleyi.com/keleyi/phtml/scrolloversee.htm scrollTop的介绍: 语法 $(selector).scrollTop(offset) 参数 offset 描述 可选.规定相对滚动条顶部的偏移,以像素计. 定义和用法 scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置. scroll top offse

  • 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=&qu

随机推荐