快捷導(dǎo)航

jQuery實(shí)現(xiàn)帶展開(kāi)動(dòng)畫(huà)的導(dǎo)航欄效果

更新時(shí)間：2021年07月26日 15:47:48 作者：ccessl

這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)帶展開(kāi)動(dòng)畫(huà)的導(dǎo)航欄效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

設(shè)計(jì)和自定義一個(gè)帶展開(kāi)動(dòng)畫(huà)效果的導(dǎo)航欄，嘗試寫(xiě)了一個(gè)demo，加上設(shè)計(jì)和調(diào)試差不多寫(xiě)了一天吧。
這里就來(lái)講講如何從設(shè)計(jì)->寫(xiě)布局->寫(xiě)樣式->寫(xiě)JS代碼完成一個(gè)完全自己設(shè)計(jì)的導(dǎo)航欄。

HTML寫(xiě)布局，CSS寫(xiě)樣式，JS寫(xiě)動(dòng)畫(huà)效果和事件響應(yīng)等，考慮到JQuery對(duì)DOM操作的便利性，這里選擇用JQuery可以達(dá)到事半功倍的效果。

設(shè)計(jì)：

如果覺(jué)得自己下載的一些導(dǎo)航欄插件太千篇一律了，那么就設(shè)計(jì)一個(gè)自己喜歡的導(dǎo)航欄。可以先拿張紙畫(huà)畫(huà)自己希望要一個(gè)什么樣的導(dǎo)航最終想要達(dá)到什么樣的效果。
比如這里想要寫(xiě)一個(gè)導(dǎo)航欄，鼠標(biāo)懸浮在每一章節(jié)上面，可以橫向伸展出下面的每一個(gè)節(jié)點(diǎn)，節(jié)點(diǎn)的出現(xiàn)有一個(gè)跳躍的動(dòng)作。

寫(xiě)布局：

在理清楚思路以后，開(kāi)始寫(xiě)HTML，這步相對(duì)比較簡(jiǎn)單。 一般用到<div> <span> <a> 這幾個(gè)標(biāo)簽就可以了。寫(xiě)清楚層次關(guān)系是很重要的，這里

要說(shuō)明幾點(diǎn)：

<div> 是一個(gè)塊級(jí)元素。這意味著它的內(nèi)容自動(dòng)地開(kāi)始一個(gè)新行。
<span>標(biāo)簽不會(huì)獨(dú)自占一行，一般用來(lái)包裹內(nèi)容。因?yàn)椴皇菈K級(jí)元素設(shè)置width、height屬性無(wú)效
<a>標(biāo)簽當(dāng)然是用來(lái)放鏈接的啦

寫(xiě)樣式：

樣式需要慢慢的調(diào)試，要用耐心。配色可以參考一些經(jīng)典的配色方案。因?yàn)槲覀兿胍獙?shí)現(xiàn)橫向伸展出下面的每一個(gè)節(jié)點(diǎn)，必定會(huì)需要類似于多欄布局那樣的效果，<span> 和<div>標(biāo)簽設(shè)置樣式 display:inline-block可以將對(duì)象呈遞為內(nèi)聯(lián)對(duì)象，但是對(duì)象的內(nèi)容作為塊對(duì)象呈遞。簡(jiǎn)單的說(shuō)就是既一個(gè)設(shè)置width、height又不會(huì)強(qiáng)制占據(jù)一行。也可以用 display:flex這個(gè)牛逼的CSS3布局屬性，實(shí)現(xiàn)多欄多列布局。

寫(xiě)JS：

布局寫(xiě)好之后就需要實(shí)現(xiàn)功能了。前面提到導(dǎo)航欄實(shí)現(xiàn)鼠標(biāo)懸浮在每一章節(jié)上面，可以橫向伸展出下面的每一個(gè)節(jié)點(diǎn)。自然會(huì)用到hover事件，來(lái)看看jQuery的hover事件。

$(selector).hover(inFunction,outFunction)

括號(hào)內(nèi)第一個(gè)function必需寫(xiě)，規(guī)定 mouseover 事件發(fā)生時(shí)運(yùn)行的函數(shù)。
第二個(gè)function可選，規(guī)定 mouseout 事件發(fā)生時(shí)運(yùn)行的函數(shù)。

jQuery同樣可以方便的實(shí)現(xiàn)動(dòng)畫(huà)效果， animate() 方法通過(guò)CSS樣式將元素從一個(gè)狀態(tài)改變?yōu)榱硪粋€(gè)狀態(tài)。
CSS屬性值是逐漸改變的，這樣就可以創(chuàng)建動(dòng)畫(huà)效果，這里不再贅述。

因?yàn)橄胍?jié)點(diǎn)按順序依次出現(xiàn)，但又不想用animate的排隊(duì)，所以我寫(xiě)了一個(gè) 回調(diào)函數(shù)，在回調(diào)函數(shù)中寫(xiě)了setTimeout延時(shí)，用addClass給響應(yīng)的節(jié)點(diǎn)加上animation動(dòng)畫(huà)樣式。

代碼：

<!--Created by CC on 2017/10/14-->
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>~myNav~</title>
    <script type="text/javascript" src="jquery.js"></script>
    <!--樣式-->
    <style type="text/css">
 
        .triangle-right {
            width: 0;
            height: 0;
            border-left: 20px solid #FF7800;
            border-bottom: 20px solid transparent;
            border-top:2px dotted #333333;
            display: inline-block;
            margin-top:10px;
            vertical-align: top;
        }
        .mynav
        {
            font-family: punctuation,"PingFangSC-Regular","Microsoft Yahei","sans-serif";
            -webkit-font-smoothing: subpixel-antialiased;
            margin:10px 2%;
            width:90%;
            heigth:450px;
            display:flex;
        }
        .nav-left{
             flex:auto;
            heigth:200px;
            font-size:20px;
            font-weight: 700;
            text-align: center;
            background-color:#505050 ;
            color:#FF7800;
            border-right:3px solid #FF7800;
            width:80px;
            padding-top:40px;
        }
        .nav-right{
             flex:auto;
             width:90%
        }
        .nav-right div{
            position:relative;
        }
        .cap{
            display:inline-block;
            width:70px;
            height:30px;
            background-color: #FF7800;
            margin:10px 0;
            border-bottom:2px dotted #333333;
            border-top:2px dotted #333333;
        }
 
        .child{
            display:inline-block;
            width:0px;
            border-top:2px dotted #333333;
            vertical-align: top;
            margin-top: 10px;
        }
        span.cap-child
        {
            position:absolute;
            border:2px solid #333333;
            background-color: #505050;
            color: #ffffff;
            -webkit-border-radius: 8px;
            -moz-border-radius: 8px;
            border-radius: 8px;
            /*top:5px;*/
            left:0px;
 
        }
        span.cap-child a{
            font-size:15px;
            color:white;
        }
        span.cap-child a:hover{
            color: #ffc8aa;
        }
        .hr-over{
            position:absolute;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
            background-color: #FF7800;
            width:20px;
            height:20px;
            margin-top:-10px;
            border:1px solid #333333;
        }
        .showit{
            animation: cho-show .5s;
        }
        @keyframes cho-show {
            0% {
                -webkit-transform-origin: right bottom;
                transform-origin: right bottom;
                -webkit-transform: rotate3d(0, 0, 1, 45deg);
                transform: rotate3d(0, 0, 1, 45deg);
                opacity:0;
            }
            100% {
                -webkit-transform-origin: right bottom;
                transform-origin: right bottom;
                -webkit-transform: none;
                transform: none;
                opacity:1;
            }
        }
 
    </style>
</head>
<body>
<!--布局-->
<div class="mynav">
    <div class="nav-left">
        目<br/>錄<br>
        <span style="font-size:6px">
            by cc
        </span>
    </div>
    <div class="nav-right" >
        <div >
            <span class="cap ">Chapter1</span><div class="triangle-right"></div>
            <div class="child">
            </div>
        </div>
        <div >
            <span class="cap">Chapter2</span><div class="triangle-right"></div>
            <div class="child">
            </div>
        </div>
        <div >
            <span class="cap">Chapter3</span><div class="triangle-right"></div>
            <div class="child">
            </div>
        </div>
    </div>
</div>
 
<script type="text/javascript">
    var active='';
    var space=80;
    var myNodes =[{ name:'Chapter1',
                    children: [{name:'字符集',url:'https://baike.baidu.com/item/%E5%AD%97%E7%AC%A6%E9%9B%86/946585?fr=aladdin'},
                    {name:'注釋',url:'cc/sd1/index'},
                    {name:'直接量',url:'cc/sd2/index'}
        ]},
        {name:'Chapter2',
        children:[{name:'數(shù)字',url:'#'},
        {name:'文本',url:'#'},
        {name:'布爾值',url:'#'},
        {name:'全局對(duì)象',url:'#'},
        {name:'包裝對(duì)象',url:'#'}
        ]},
        {
            name:'Chapter3',
            children: [{name:'貓貓',url:'#'},
            {name:'狗狗',url:'#'}
        ]}
    ];
 
    $('.cap').hover(function(){
        var cap=this;
        var mybox=$(cap.parentNode).find('.child');
        if(active!=this.innerHTML)
        {
            //變色
            $(cap).css('background-color','#ffc8aa');
            $(cap).next().css('border-left-color','#ffc8aa');
            //清理原來(lái)的內(nèi)容
           for(var j=0;j<$('.child').length;j++)
            {
                //console.log($('.child')[j]);
                $($('.child')[j]).empty();
                $($('.child')[j]).css('width','0px');
            }
 
            active=this.innerHTML;
            myNodes.forEach(function(item){
                    if(active==item.name)
                    {
                        myAnimate(item.children,mybox);
 
                    }
                }
            );
        }
         //順序顯示
        orderShow($(mybox),$(mybox).children().length-1);
 
    }, function(){
        //變色
        $(this).css('background-color','#FF7800');
        $(this).next().css('border-left-color','#FF7800');
 
    });
 
 
    function myAnimate(arr,ele)
    {
       // console.log(ele);
        var $ele=$(ele);
        var pos;
        arr.forEach(function(item,index){
            pos=space*index+20;
            addOne(item,pos+'px');
        });
        $ele.animate({width:pos+100+'px'},200,'linear',function(){
            var left=pos+80+'px';
            $ele.append("<span class='hr-over' style='left:"+left+"'></span>");
        });
        function addOne(item,pos)
        {
            var mylink="<a href='"+item.url+"'>"+item.name+"</a>";
            $ele.append("<span class='cap-child' style='display:none;left:"+pos+"'>"+mylink+"</span>")
        }
    }
 
    function orderShow($it,times)
    {
        if(times>=0)
        {
            setTimeout(function(){
                $($it.children()[times]).css('display','block')
                $($it.children()[times]).addClass('showit');
            orderShow($it,times-1)
        },100);
        }
        else
            return;
 
    }
</script>
 
</body>
</html>

效果：