学习web前端之练习二

web前端练习-模仿DJI首页（新手二篇）

进度有点慢，从昨天到今天就完成了导航条的动态效果，而且其中复杂的菜单效果也没有实现。以我现有的有限的jQuery知识，十分简陋的完成了特效部分。对这部分还是不太满意的，革命尚未成功啊。

• 效果展示
• HTML代码
• css代码

• jQuery代码

  (1)效果图片

• a)点击展开隐藏的菜单栏
  

• b)tab标签
  

• c)搜索
  

  (2)HTML代码

• a)

<li class="personal">
                            <a class="personal-link" href="javascript:void(0);">
                               <span class="personal-center"></span>
                            </a>
                            <ul class="dropdown-menu personal-menu" >
                                <li>
                                    <a class="login-link" href="#" >登录</a>
                                </li>
                                <li>
                                    <a class="regist-link" href="#" >注册</a>
                                </li>
                            </ul>
                        </li>

• b)

 <li>
                            <a href="#" class="tab-2">"悟"INSPIRE1</a>
                            <div class="tab-content">
                                <div class="site-header-content">
                                    <ul class="tab-hover">
                                        <li class="">
                                            <a class="tab-nav" href="#">"悟"INSPIRE1</a>
                                        </li>
                                        <li>
                                            <a class="tab-nav" href="#">"悟"INSPIRE1 PRO/RAW</a>
                                        </li>
                                        <li>
                                            <a class="tab-nav" href="#">禅思X5系列航拍相机</a>
                                        </li>
                                        <li>
                                            <a class="tab-nav" href="#">禅思X系列航拍相机对比</a>
                                        </li>
                                        <li>
                                            <a class="tab-nav" href="#">"悟"INSPIRE1配件</a>
                                        </li>
                                    </ul>
                                    <div class="aside">
                                        <figure class="product-pic">
                                            <a href="#">
                                                <img src="../images/pic-2.png" style="width: 551px">
                                            </a>
                                        </figure>
                                    </div>
                                </div>
                            </div>
                        </li>

• c)

<div id="nav-search">
                        <form class="search-form" target="_blank">
                            <input type="text" autocomplete="off" placeholder="搜索dji.com..." style="width: 753px">
                        </form>
                    </div>
                    <ul class="nav-right">
                        <li class="search-box">
                            <a class="search-box-link">
                                <span class="icon-search"></span>
                            </a>
                        </li>

(3)css代码

这里第二和第三个图片的css布局都比较容易实现，就不贴出来占篇幅了。

.dropdown-menu{
    background-color: #fafcfd;
    background-clip: padding-box;
    float: left;
    font-size: 12px;
    left: 0;
    margin-top: 12px;
    position: absolute;
    text-align: left;
    top: 90%;
    z-index: 1000;
    transition: all 500ms ease 0s;
}

#nav #nav-content #nav-list .personal .personal-menu{
    min-width: 100%;
    right: -20px;
    width: auto;
    display:block;
    overflow: hidden;
    margin-top: 0;
    visibility: hidden;
}

#nav #nav-content #nav-list .personal .personal-menu li{
    min-width: 64px;
    height: 36px;
}

#nav #nav-content #nav-list .personal .personal-menu a{
    display: block;
    padding: 0 20px;
    height: 36px;
    line-height: 36px;
    text-align: left;
}

(4)jquery代码

• a)

$(function() {
    $(".personal-link").click(function () {
        $(".personal-menu").css("visibility", "visible");
    });
    $(".personal-link").mouseover(function () {
        $(".personal-menu").css("visibility", "visible");
    });
    $(".personal-link").mouseout(function () {
        $(".personal-menu").css("visibility", "hidden", 1500);
    });
    $(".personal-menu a").mouseover(function () {
        $(this).css({"background": "#979797", "color": "white"});
    });
    $(".personal-menu a").mouseout(function () {
        $(this).css({"background": "white", "color": "#979797"});
    });

• b)

 $(".tab-2").mouseover(function () {
        $(".tab-2+.tab-content").slideDown();
        $(this).css("color", "black");
    });
    $(".tab-2").mouseout(function () {
        $(".tab-2+.tab-content").slideUp();
        $(this).css("color", "#979797");
    });

• c)

 $(".search-box-link").click(function(){
        $("#nav-search").toggle();
        $("#nav-search input").focus();
    });

总结

（1）第一个效果图片，我想说一下定位的问题，position:absolute;top:90%,把菜单的位置设置为距离父元素的顶端90%的位置，这边90%是父元素高度的90%。

（2）这两天碰到的最大的问题就是jQuery的问题，果然还是没学到家。第一个图片中在显示菜单的时候，有mouseover,mouseout和click这三个事件，我这样的写法是有问题的，鼠标离开a标签的范围后，菜单应该不见，但是鼠标在菜单上的时候，菜单也不见了，不知道这个问题怎么解决！

（3）第二个tab标签切换的时候，jQuery写的比较复杂，每个tab都来了一遍mouseover和mouseout的事件，鬼知道我都试过了什么，真的欲哭无泪啊！求大神解决！！！

（4）最后一张图片中的特效是自己写的，也真正弄懂了toggle的用法，原来是作用在被展示、隐藏的节点上。