JQuery模擬FLASH導航菜單動畫效果

本文章來介紹一款基于JQuery模擬FLASH導航菜單動畫效果,flash效果雖然不錯,但是有些浏覽器是不支持的,利用jquery可以模擬出flash動態效果哦,有需要學習的朋友可參考。
代碼如下

<div class="navBox">
<ul class="nav fr cf fw" id="nav">
<li>
<a class="cur" href="http://www.111cn.net" target="_blank"><strong>首頁</strong></a>
</li>
<li class="">
<a href="#"><strong>公司簡介</strong></a>
<div class="snav">
<a href="#" title="" class="cur">公司簡介</a>
<a href="#" title="">公司簡介</a>
<a href="#" title="">公司簡介</a>
<a href="#" title="">公司簡介</a>
<a href="#" title="">公司簡介</a>
<a href="#" title="">公司簡介</a>
<a href="#" title="">公司簡介</a>
<a href="#" title="">公司簡介</a>
<a href="#" title="">公司簡介</a>
</div>
</li>
<li>
<a href="#" ><strong>産品展示</strong></a>
<div class="snav">
<a href="#" title="" class="cur">産品展示</a>
<a href="#" title="">産品展示</a>
<a href="#" title="">産品展示</a>
<a href="#" title="">産品展示</a>
<a href="#" title="">産品展示</a>
<a href="#" title="">産品展示</a>
<a href="#" title="">産品展示</a>
<a href="#" title="">産品展示</a>
<a href="#" title="">産品展示</a>
</div>
</li>
<li>
<a href="#" ><strong>資訊快報</strong></a>
<div class="snav">
<a href="#" title="" class="cur">資訊快報</a>
<a href="#" title="">資訊快報</a>
<a href="#" title="">資訊快報</a>
<a href="#" title="">資訊快報</a>
<a href="#" title="">資訊快報</a>
<a href="#" title="">資訊快報</a>
<a href="#" title="">資訊快報</a>
<a href="#" title="">資訊快報</a>
<a href="#" title="">資訊快報</a>
</div>
</li>
<li>
<a href="#" ><strong>産品評測</strong></a>
<div class="snav">
<a href="#" title="" class="cur">産品評測</a>
<a href="#" title="">産品評測</a>
<a href="#" title="">産品評測</a>
<a href="#" title="">産品評測</a>
<a href="#" title="">産品評測</a>
<a href="#" title="">産品評測</a>
<a href="#" title="">産品評測</a>
<a href="#" title="">産品評測</a>
<a href="#" title="">産品評測</a>
</div>
</li>
<li>
<a href="#" ><strong>新品推介</strong></a>
<div class="snav">
<a href="#" title="" class="cur">新品推介</a>
<a href="#" title="">新品推介</a>
<a href="#" title="">新品推介</a>
<a href="#" title="">新品推介</a>
<a href="#" title="">新品推介</a>
<a href="#" title="">新品推介</a>
<a href="#" title="">新品推介</a>
<a href="#" title="">新品推介</a>
<a href="#" title="">新品推介</a>
</div>
</li>
<li>
<a href="#" ><strong>客戶服務</strong></a>
<div class="snav">
<a href="#" title="" class="cur">客戶服務</a>
<a href="#" title="">客戶服務</a>
<a href="#" title="">客戶服務</a>
<a href="#" title="">客戶服務</a>
<a href="#" title="">客戶服務</a>
<a href="#" title="">客戶服務</a>
<a href="#" title="">客戶服務</a>
<a href="#" title="">客戶服務</a>
<a href="#" title="">客戶服務</a>
</div>
</li>
<li><a href="http://www.111cn.net" target="_blank"><strong>專業論壇</strong></a></li>
</ul>
<div class="navBg"></div>
</div>a{text-decoration:none;}
.navBox{border-bottom:2px solid #FF3C00; height:65px; position:relative; margin:0px 10px 50px; padding:0 0 0 10px;}
.nav { height:65px; position:relative; z-index:3}
.nav li { float:left; position:relative; text-align: center; }
.nav li a { float:left; position:relative; font-weight:bold; ; color:#676767; height:65px; line-height:65px; width:90px; overflow:hidden; z-index:4:}
.nav li a span { position:absolute; left: 0; width: 90px; height:65px; cursor:pointer;}
.nav li a span.out { top:0px; }
.nav li a span strong { display:block; margin:0 10px; height:30px; line-height:30px; padding-top:20px; }
.nav li a span.over, .nav li a span.bg { top: 65px; }
.nav li a span.over { color:#FFF; }
.nav li a span.over strong { border-bottom:1px solid #FFFFD6; }
.nav li a span.bg { height: 65px; background:url(s/nav.jpg) repeat-x left bottom; }
.nav li a.cur span.over, .nav li a.cur span.bg { top: 0; }

.nav li .snav {; width:730px; height:44px; position:absolute; left:-200px; top:65px; border-top:2px solid #FF3C00; display:none;}
.nav li .snav a{ position:relative; margin:0 0px; width:70px; color:#444; height:44px; line-height:40px; display:inline-block; ; font-weight:normal;}
.nav li .snav a span {position:absolute; left:0; width:70px; height:39px; line-height:39px; width:70px; cursor:pointer;}
.nav li .snav a span.out {top:0px;}
.nav li .snav a span.over,.nav li .snav a span.bg {top: -44px; }
.nav li .snav a span.over {color:#FFF;}
.nav li .snav a span.bg {height:44px; background:#FF510C; border-radius:0 0 5px 5px;}
.nav li .snav a.cur span.over,.nav li .snav a.cur span.bg {top: 0;}
.navBg { background:url(s/snavBg.jpg) no-repeat; width:1000px; height:0px; overflow:hidden; position:absolute; top:67px; left:0; text-align:center; z-index:2; }$("#nav>li>a").wrapInner( '<span class="out"></span>' ).append( '<span class="bg"></span>' );
$("#nav>li>a").each(function() {
$( '<span class="over"><strong>' + $(this).text() + '</strong></span>' ).appendTo( this );
});

$("#nav>li>a:not('.cur')").hover(function() {
$(".out",this).stop().animate({'top':'65px'},250); // 向下滑動 - 隱藏
$(".over",this).stop().animate({'top':'0px'},250); // 向下滑動 - 顯示
$(".bg",this).stop().animate({'top':'0px'}, 120); // 向下滑動 - 顯示
}, function() {
$(".out",this).stop().animate({'top':'0px'},250); // 向上滑動 - 顯示
$(".over",this).stop().animate({'top':'65px'},250); // 向上滑動 - 隱藏
$(".bg",this).stop().animate({'top':'65px'},120); // 向上滑動 - 隱藏
});

$("#nav>li:not(':first'):not(':last')").hover(function() {
$(".navBg").stop().animate({'height':'44px'},120);
$(this).children(".snav").stop(true).css({"left":- $(this).position().left}).show();
}, function() {
$(".navBg").stop().animate({'height':'0px'},120);
$(this).children(".snav").stop(true).hide();
});


$(".snav>a").wrapInner( '<span class="out"></span>' ).append( '<span class="bg"></span>' );
$(".snav>a").each(function() {
$( '<span class="over">' + $(this).text() + '</span>' ).appendTo( this );
});

$(".snav>a:not('.cur')").hover(function() {
$(".out",this).stop().animate({'top':'-44px'},250); // 向上滑動 - 隱藏
$(".over",this).stop().animate({'top':'0px'},250); // 向上滑動 - 顯示
$(".bg",this).stop().animate({'top':'0px'}, 120); // 向上滑動 - 顯示
}, function() {
$(".out",this).stop().animate({'top':'0px'},250); // 向下滑動 - 顯示
$(".over",this).stop().animate({'top':'-44px'},250); // 向下滑動 - 隱藏
$(".bg",this).stop().animate({'top':'-44px'},120); // 向下滑動 - 隱藏
});

更多相關文章
一周排行