jQuery宽屏下拉导航菜单特效代码下载


jQuery宽屏下拉导航菜单特效代码下载
jQuery宽屏下拉导航菜单特效代码下载以及宽屏下拉导航等js/jquery网页特效代码下载。

1. 引入CSS

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

2. 引入JS

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>

3. HTML代码

<!--top-->
<div class="top01">
	<div class="top02">
    	<div class="top02_l"><img src="images/logo.jpg" width="327" height="108"></div>
        <div class="top02_c">
<!--daohang-->
        	<div class="dh">
                <ul>
                    <li><a href="#" class="a01">首 页</a></li>
                    <li id="a01"><a href="#" class="a01">关于我们</a>
<!--xiala-->
<div class="dh_xl01" id="b01">
    <div class="dh_xl02">
    	<div class="dh_xl02_l">
        	<a href="#">关于我们</a>
            <a href="#">关于我们</a>
            <a href="#">关于我们</a>
            <a href="#">关于我们</a>
            <div class="clear"></div>
        </div>
        <div class="dh_xl02_r"><img src="images/dh01.jpg" width="480" height="210"></div>
    </div>
</div>
<!--xiala end-->
                    </li>
                    <li id="a02"><a href="#" class="a01">课程体系</a>
<!--xiala-->
<div class="dh_xl01" id="b02">
    <div class="dh_xl02">
    	<div class="dh_xl02_l">
        	<a href="#">课程体系</a>
            <a href="#">课程体系</a>
            <a href="#">课程体系</a>
            <a href="#">课程体系</a>
            <div class="clear"></div>
        </div>
        <div class="dh_xl02_r"><img src="images/dh01.jpg" width="480" height="210"></div>
    </div>
</div>
<!--xiala end-->
                    </li>
                    <li id="a03"><a href="#" class="a01">经典案例</a>
<!--xiala-->
<div class="dh_xl01" id="b03">
    <div class="dh_xl02">
    	<div class="dh_xl02_l">
        	<a href="#">经典案例</a>
            <a href="#">经典案例</a>
            <a href="#">经典案例</a>
            <a href="#">经典案例</a>
            <div class="clear"></div>
        </div>
        <div class="dh_xl02_r"><img src="images/dh01.jpg" width="480" height="210"></div>
    </div>
</div>
<!--xiala end-->
                    </li>
                    <li id="a04"><a href="#" class="a01">名师团队</a>
<!--xiala-->
<div class="dh_xl01" id="b04">
    <div class="dh_xl02">
    	<div class="dh_xl02_l">
        	<a href="#">名师团队</a>
            <a href="#">名师团队</a>
            <a href="#">名师团队</a>
            <a href="#">名师团队</a>
            <div class="clear"></div>
        </div>
        <div class="dh_xl02_r"><img src="images/dh01.jpg" width="480" height="210"></div>
    </div>
</div>
<!--xiala end-->
                    </li>
                    <li id="a05"><a href="#" class="a01">新闻资讯</a>
<!--xiala-->
<div class="dh_xl01" id="b05">
    <div class="dh_xl02">
    	<div class="dh_xl02_l">
        	<a href="#">新闻资讯</a>
            <a href="#">新闻资讯</a>
            <a href="#">新闻资讯</a>
            <a href="#">新闻资讯</a>
            <div class="clear"></div>
        </div>
        <div class="dh_xl02_r"><img src="images/dh01.jpg" width="480" height="210"></div>
    </div>
</div>
<!--xiala end-->
                    </li>
                    <li id="a06"><a href="#" class="a01">联系我们</a>
<!--xiala-->
<div class="dh_xl01" id="b06">
    <div class="dh_xl02">
    	<div class="dh_xl02_l">
        	<a href="#">联系我们</a>
            <a href="#">联系我们</a>
            <a href="#">联系我们</a>
            <a href="#">联系我们</a>
            <div class="clear"></div>
        </div>
        <div class="dh_xl02_r"><img src="images/dh01.jpg" width="480" height="210"></div>
    </div>
</div>
<!--xiala end-->
                    </li>
                    <div class="clear"></div>
                </ul>
            </div>
<script type="text/javascript">
$(document).ready(function(){
	$("#a01").hover(function(){
		$(this).children("#b01").stop(true, false).slideToggle(500);
	})
	$("#a02").hover(function(){
		$(this).children("#b02").stop(true, false).slideToggle(500);
	})
	$("#a03").hover(function(){
		//$("#b03").slideToggle(300);
		$(this).children("#b03").stop(true, false).slideToggle(500);
	})
	$("#a04").hover(function(){
		$(this).children("#b04").stop(true, false).slideToggle(500);
	})
	$("#a05").hover(function(){
		$(this).children("#b05").stop(true, false).slideToggle(500);
	})
	$("#a06").hover(function(){
		$(this).children("#b06").stop(true, false).slideToggle(500);
	})
});
</script>
<!--daohang-->
        </div>
        <div class="top02_r"><img src="images/sousuo.png" class="search_dk"><img src="images/sousuo01.png" class="search_gb"></div>
        <!--搜索-->
        <div class="search02">
        	<div class="search03">
            	<div class="search05"><a href="#"><img src="images/sousuo03.png" width="38" height="30"></a></div>
            	<div class="search04"><input name="" type="text" class="in"></div>
                <div class="clear"></div>
            </div>
        </div>
		<script type="text/javascript">
        $(document).ready(function(){
            $(".search_dk").click(function(){
                $(".search02").slideToggle();
				$(".search_dk").hide();
				$(".search_gb").show();
            })
			$(".search_gb").click(function(){
                $(".search02").slideUp();
				$(".search_dk").show();
				$(".search_gb").hide();
            })
            $(".search05").click(function(){
                $(".search02").slideUp();
				$(".search_dk").show();
				$(".search_gb").hide();
            })
        });
        </script>
        <!--搜索 end-->
        <div class="clear"></div>
    </div>
</div>
<!--top end-->
<!--banner-->
<div class="banner"></div>
<!--banner end-->

相关推荐

发表评论

相关文章