下拉菜单

最新推荐文章于 2024-09-10 16:20:19 发布
前端小菜鸟
最新推荐文章于 2024-09-10 16:20:19 发布
阅读量444
点赞数
分类专栏： jQuery 文章标签： jquery
本文链接：https://blog.csdn.net/learninginJAVA/article/details/44876629
版权
jQuery 专栏收录该内容
4 篇文章 0 订阅
订阅专栏
重点是看jQuery部分
<span style="font-size:14px;"><!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>
    <title>特效菜单</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <style type="text/css">
            html, body, div, span {margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}


.header{width:1105px;margin:0 auto;height:111px;padding:12px 0 18px;position:relative;*z-index:1;}
.header .logo{height:86px;width:256px;margin-top:25px}

.top-nav .navlist-wrap{width:1050px;margin:0 auto;position:relative}
.top-nav .navlist{position:absolute;right:130PX;top:-40PX}
.top-nav .navlist .nav-btn{float:left;margin-left:60px;color:#666;vertical-align:middle;text-decoration:none}
.navlist .nav-btn span{background:url(images/broswer_home.png) no-repeat -29px -145px;display:inline-block;width:16px;height:16px;margin-left:4px;vertical-align:middle;*height:12px;*vertical-align:middle;*cursor:pointer;*letter-spacing:0;*margin-left:0;*background-position:-26px -145px}
.navlist .btn-active span{background:url(images/broswer_home.png) no-repeat -8px -145px;*background-position:-5px -145px}
.top-nav .expand{height:0px;background-color:#333d4d;overflow:hidden;position:relative;width:100%}
.expand .expdiv{height:130px;width:500%;}
.expand .expdiv .item{float:left;width:20%}
.expand .expdiv .item-active{display:block}
.expand .close-btn{width:120px;height:20px;background:url(images/broswer_home.png) no-repeat -13px -117px;position:absolute;left:50%;bottom:-2px;margin-left:-60px;cursor:pointer;}
.expdiv .expdiv-list{text-align:center;height:56px;padding:37px;color:White}
.expdiv .expdiv-list .btn{display:inline-block;text-decoration:none;color:#586e91;font-size:18px;line-height:24px;margin:0 28px;cursor:pointer}
.expdiv .expdiv-list .btn:hover{color:#7896af}
.expdiv-list .btn .icon{background-repeat:no-repeat;background-image:url(images/broswer_home.png);height:56px;width:56px;float:left}
.expdiv-list .btn .text{float:left;padding:16px 0 16px 16px}
.expdiv-list .zj .icon{background-position:-4px 0}
.expdiv .expdiv-list .zj{}
.expdiv .expdiv-list .zj:hover .icon{background-position:-5px -57px}
.expdiv .expdiv-list .sjgj{}
.expdiv .expdiv-list .sjgj .icon{background-position:-58px 0}
.expdiv .expdiv-list .sjgj:hover .icon{background-position:-59px -58px}
.expdiv .expdiv-list .wdj{}
.expdiv-list .wdj .icon{background-position:-169px -4px}
.expdiv-list .wdj:hover .icon{background-position:-169px -64px}
.expdiv .expdiv-list .jy{}
.expdiv-list .jy .icon{background-position:-114px 0}
.expdiv-list .jy:hover .icon{background-position:-114px -62px}
.expdiv-list .apple .icon{background-position:-225px -1px;width:38px}
.expdiv-list .apple:hover .icon{background-position:-225px -58px}
.expdiv-list .itools .icon{background-position:-270px 0}
.expdiv-list .itools:hover .icon{background-position:-270px -57px}
.top-nav .nav-bottom-bg{height:7px;_font-size:1px;background-color:#fff}

.btm{ margin:30px auto;}
.btm p{ font:normal 12px/24px 'Microsoft YaHei'; text-align:center;}
        </style>
    <script type="text/javascript" src="../Scripts/jquery.js"></script>
</head>
<script language="javascript" type="text/javascript">
    $(function () {
        $("#navList").on("click",".nav-btn", function () {
            if($(this).hasClass("btn-active")){
                $("#closeBtn").click();
                return false;
               <span style="color:#cc0000;"> //这里不知道为什么一定要有return false不然，收回去了马上展开</span>
            }
            var index = $(this).index();
            <span style="color:#cc0000;">//index可以获得位置，从0开始。未找到元素返回-1
            //这里target是nav-btn，所以this指向的是nav-btn!返回的是nav-btn的相对位置</span>
            var ml = "-" + index * 100 +"%";
            if($("#expandZone").hasClass("active")) {
                $("#expandZone .expdiv").animate({marginLeft: ml});
            }
            else {
                $("#expandZone .expdiv").css({marginLeft: ml});
                $("#expandZone").animate({height: "130px"}).addClass("active");
            }
            $(this).addClass("btn-active").siblings().removeClass("btn-active");
            event.preventDefault();
            <span style="color:#cc0000;">//这里原本是return false的，用来阻止浏览器的默认事件。如阻止<a>的默认打开链接</span>
        });
        $("#closeBtn").on("click", function () {
            $("#expandZone").animate({height: "0px"}).removeClass("active");
            $(".nav-btn").removeClass("btn-active");
             <span style="color:#cc0000;">// 这是最简单的方法，直接找到.btn-active类，删除</span>
        });
    });
</script>
<body>
    <!-- 代码 开始 -->
    <div class="wrap">
        <div class="header">
            <h1 class="logo">
                慕课网
            </h1>
        </div>
        <div class="top-nav">
            <div id="navList" class="navlist-wrap">
                <div class="navlist clearfix">
                    <a href="" class="nav-btn" data-device="#homeItem">首页<span>   </span></a>
                    <a href="" class="nav-btn" data-device="#courseItem">课程大厅<span>   </span></a>
                    <a href="" class="nav-btn" data-device="#learnItem">学习中心<span>   </span></a>
                    <a href="" class="nav-btn" data-device="#personalItem">个人中心<span>   </span></a>
                    <a href="" class="nav-btn" data-device="#aboutItem">关于我们<span>   </span></a>
                </div>
            </div>
            <div id="expandZone" class="expand">
                <div class="expdiv">
                    <div id="homeItem" class="item">
                        <div class="expdiv-list">
                            <a href="#" target="_blank" class="btn zj" id="download-link"><span class="icon"></span>
                                <span class="text">慕课网主页</span></a>
                        </div>
                    </div>
                    <div id="courseItem" class="item">
                        <div class="expdiv-list">
                        <a href="#" target="_blank" class="btn zj" id="A4"><span class="icon"></span>
                                <span class="text">前端课程</span></a>
                                <a href="#" target="_blank" class="btn zj" id="A5"><span class="icon"></span>
                                <span class="text">手机开发</span></a>
                                <a href="#" target="_blank" class="btn zj" id="A6"><span class="icon"></span>
                                <span class="text">后台编程</span></a>
                        </div>
                    </div>
                    <div id="learnItem" class="item">
                        <div class="expdiv-list">
                           <a href="#" target="_blank" class="btn zj" id="A1"><span class="icon"></span>
                                <span class="text">Javascript</span></a>
                                <a href="#" target="_blank" class="btn zj" id="A2"><span class="icon"></span>
                                <span class="text">CSS</span></a>
                                <a href="#" target="_blank" class="btn zj" id="A3"><span class="icon"></span>
                                <span class="text">JQuery</span></a>
                        </div>
                    </div>
                    <div id="personalItem" class="item">
                        <div class="expdiv-list">
                          个人信息：
                        </div>
                    </div>
                    <div id="aboutItem" class="item">
                        <div class="expdiv-list">
                            公司地址：北京市西城区德外大街10号
                        </div>
                    </div>
                </div>
                <div id="closeBtn" class="close-btn">
                </div>
            </div>
            <div class="nav-bottom-bg">
            </div>
        </div>
    </div>
    <!-- 代码 结束 -->
</body>
</html>
</span>