jquery SuperSlide.js带下划线滑动的二级下拉导航菜单代码



113 451 151



特效描述:下划线滑动 二级下拉导航 导航菜单,

代码结构

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

加群请备注:从官网了解到