jquery SuperSlide.js帶下劃線滑動的二級下拉導航菜單代碼



116 462 155



特效描述:下劃線滑動 二級下拉導航 導航菜單,

代碼結構

1. 引入CSS

<link href="css/style.css" rel="stylesheet" type="text/css" />

2. 引入JS

<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/SuperSlide.2.1.js"></script>

3. HTML代碼

<div class="navBar">
	<ul class="nav clearfix">
		<li class="m">
			<h3><a href="http://www.dijiuzhanzhang.com/">網站首頁</a></h3>
		</li>
		<li class="s">|</li>
		<li class="m">
			<h3><a href="http://www.dijiuzhanzhang.com/">關于我們</a></h3>
			<ul class="sub">
				<li><a href="http://www.dijiuzhanzhang.com/">企業簡介</a></li>
				<li><a href="http://www.dijiuzhanzhang.com/">組織架構</a></li>
				<li><a href="http://www.dijiuzhanzhang.com/">企業資質</a></li>
				<li><a href="http://www.dijiuzhanzhang.com/">企業文化</a></li>
			</ul>
		</li>
		<li class="s">|</li>
		<li class="m">
			<h3><a href="http://www.dijiuzhanzhang.com/">資質認定</a></h3>
			<ul class="sub">
				<li><a href="http://www.dijiuzhanzhang.com/">國家高新認證</a></li>
				<li><a href="http://www.dijiuzhanzhang.com/">軟件企業認證</a></li>
				<li><a href="http://www.dijiuzhanzhang.com/">深圳市高企認證</a></li>
				<li><a href="http://www.dijiuzhanzhang.com/">其它認證</a></li>
			</ul>
		</li>
		<li class="s">|</li>
		<li class="m">
			<h3><a href="http://www.dijiuzhanzhang.com/">政府扶持</a></h3>
			<ul class="sub" style="display: none;">
				<li><a href="http://www.dijiuzhanzhang.com/">深圳市級扶持</a></li>
				<li><a href="http://www.dijiuzhanzhang.com/">各區級扶持</a></li>
				<li><a href="http://www.dijiuzhanzhang.com/">廣東省級扶持</a></li>
				<li><a href="http://www.dijiuzhanzhang.com/">國家和部級扶持</a></li>
			</ul>
		</li>
		<li class="s">|</li>
		<li class="m">
			<h3><a href="http://www.dijiuzhanzhang.com/">知識產權</a></h3>
			<ul class="sub" style="display: none;">
				<li><a href="http://www.dijiuzhanzhang.com/">知識產權申請</a></li>
				<li><a href="http://www.dijiuzhanzhang.com/">知識產權轉讓</a></li>
				<li><a href="http://www.dijiuzhanzhang.com/">技術咨詢</a></li>
				<li><a href="http://www.dijiuzhanzhang.com/">技術成果鑒定</a></li>
			</ul>
		</li>
		<li class="s">|</li>
		<li class="m">
			<h3><a href="http://www.dijiuzhanzhang.com/">上市服務</a></h3>
			<ul class="sub" style="display: none;">
				<li><a href="http://www.dijiuzhanzhang.com/">上市條件及流程</a></li>
				<li><a href="http://www.dijiuzhanzhang.com/">上市顧問</a></li>
				<li><a href="http://www.dijiuzhanzhang.com/">稅收籌劃</a></li>
				<li><a href="http://www.dijiuzhanzhang.com/">資產重組</a></li>
			</ul>
		</li>
		<li class="s">|</li>
		<li class="m">
			<h3><a href="http://www.dijiuzhanzhang.com/">人才招聘</a></h3>
		</li>
		<li class="s">|</li>
		<li class="m">
			<h3><a href="http://www.dijiuzhanzhang.com/">聯系我們</a></h3>
		</li>
		<li class="block" style="left:251px;"></li>
	</ul>
</div>
<script type="text/javascript">
$(function(){
    var nav = $(".nav");
    var init = $(".nav .m").eq(ind);
    var block = $(".nav .block");
    block.css({
        "left": init.position().left - 3
    });
    nav.hover(function() {},
    function() {
        block.stop().animate({
            "left": init.position().left - 3
        },
        100);
    });
    $(".nav").slide({
        type: "menu",
        titCell: ".m",
        targetCell: ".sub",
        delayTime: 300,
        triggerTime: 0,
        returnDefault: true,
        defaultIndex: ind,
        startFun: function(i, c, s, tit) {
            block.stop().animate({
                "left": tit.eq(i).position().left - 3
            },
            100);
        }
    });
});
var ind = 0;
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 滑動導航菜單 滑動導航 滑動菜單
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

湖北30选5开奖结果走势图表