jquery_jquery로 구현된 파란색 보조 탐색 막대 효과 코드
- WBOY원래의
- 2016-05-16 15:43:151802검색
이 문서의 예에서는 jquery로 구현된 파란색 보조 탐색 막대 효과 코드를 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.
이것은 웹사이트 탐색바 효과 코드입니다. 메뉴는 최대 2가지 레벨을 지원할 수 있으며, 이는 다양한 유형의 웹사이트에 적합합니다. 파란색이 마음에 들지 않으면 전체적인 효과는 다음과 같습니다. 좋습니다. 매우 간단한 웹사이트 탐색입니다.
런닝 효과 스크린샷은 다음과 같습니다.
온라인 데모 주소는 다음과 같습니다.
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 프로그래밍 설계에 도움이 되기를 바랍니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.