cari

Rumah >hujung hadapan web >tutorial js >Kod kesan bar navigasi sekunder biru dilaksanakan oleh jquery_jquery

Kod kesan bar navigasi sekunder biru dilaksanakan oleh jquery_jquery

WBOY
WBOYasal
2016-05-16 15:43:151868semak imbas

Contoh dalam artikel ini menerangkan kod kesan bar navigasi sekunder biru yang dilaksanakan oleh jquery. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Ini ialah kod kesan bar navigasi laman web Menu boleh menyokong sehingga dua tahap, yang sesuai untuk banyak jenis tapak web Jika anda tidak suka biru, anda boleh mengubahnya kepada warna lain bagus, dan ia adalah navigasi laman web yang sangat mudah.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

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

Kod khusus adalah seperti berikut: 

<!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>

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan jquery semua orang.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Cara melaksanakan lompat halaman separa dan pulangan hasil dengan kemahiran ajax_javascriptArtikel seterusnya：Cara melaksanakan lompat halaman separa dan pulangan hasil dengan kemahiran ajax_javascript

Artikel berkaitan

Lihat lagi