Blauer sekundärer Navigationsleisteneffektcode, implementiert von jquery

Blauer sekundärer Navigationsleisteneffektcode, implementiert von jquery_jquery

WBOY

Freigeben： 2016-05-16 15:43:15

Original

1876 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt den von jquery implementierten blauen Effektcode für die sekundäre Navigationsleiste. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Dies ist ein Website-Navigationsleisten-Effektcode, der für viele Arten von Websites geeignet ist. Wenn Sie Blau nicht mögen, können Sie den Gesamteffekt ändern gut, und es ist eine sehr einfache Website-Navigation.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

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

Der spezifische Code lautet wie folgt:

<!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&#63; 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'))&#63; $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)&#63; '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>

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für das JQuery-Programmierungsdesign aller hilfreich sein wird.