1. 程式人生 > >左側豎條導航欄點擊出現效果的實現

左側豎條導航欄點擊出現效果的實現

導航欄

大部分的網站導航欄都是在網頁的頂端,這類導航欄看起來非常一般,而有些在左側豎著顯示的導航欄就比較好看一些了,但是今天為大家介紹的是左側豎條導航欄實現點擊出現的效果,也就是剛開始只顯示導航,不顯示分類欄,而點擊導航就可以顯示分類欄了,下面一起來看下源代碼的實現吧。
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<style>
html,
body {
padding: 0;
margin: 0;
}

    main {
        width: 100%;
    }

    .main {
        width: 100%;
        min-height: 100vh;
        background-color: #ccc;
    }

    .x_left {
        position: fixed;
        left: 0;
        top: 100px;
        width: 100px;
        /* border: 1px solid red; */
    }

    .x_left_title {
        padding: 10px 0;
        margin: 2px 0;
        width: 50px;
        background-color: white;
        box-shadow:  0 0 5px 1px rgb(99, 99, 99);
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }

    .x_left_main {
        display: flex;
        flex-flow: column;
        /* border: 1px solid red; */
        position: relative;
        width: 0;
    }

    .x_left_main span {
        padding: 10px 0;
        margin: 3px 0;
        width: 100px;
        background-color: white;
        box-shadow:  0 0 5px 1px rgb(122, 147, 160);
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        left: -100px;
    }
</style>

</head>

<body>
<main>
<div class="main">
<div class="x_left">
<div class="x_left_title">
導航
</div>
<div class="x_left_main">
<span>aaa11111111</span>
<span>aaa22222222</span>
<span>aaa33333333</span>
<span>aaa44444444</span>
<span>aaa55555555</span>
<span>aaa66666666</span>
<span>aaa77777777</span>
<span>aaa88888888</span>
<span>aaa99999999</span>
</div>
</div>
</div>
</main>
<script>
var show = "";
var hidden = ""
var hidden_top = "";
var hidden_top_num = "";
var hidden_bottom_num = "";
var length = $(".x_left_main span").length;
var num = 0;
var whether = 99;
var qsb = 99

    $(".x_left_title").click(function(){
        if(whether==99&&qsb==99){
            qsb = 1
            $(this).stop().animate({width:"100px"},1000)
            var num = 0;
            $(".x_left_main span").eq(num).stop().animate({
                left:"0"
            },150)
            show = setInterval(function(){
                if(num!=length){
                    num++
                    $(".x_left_main span").eq(num).stop().animate({
                        left:"0"
                    },150)
                }else{
                    clearInterval(show)
                    whether = 1
                    qsb = 99
                }
            },150)
        }else{
            if(qsb==99&&whether==1){
                qsb = 1
                $(this).stop().animate({width:"50px"},1000)
                var num = 0;
                $(".x_left_main span").eq(num).stop().animate({
                    left:"-100px"
                },150)
                show = setInterval(function(){
                    if(num!=length){
                        num++
                        $(".x_left_main span").eq(num).stop().animate({
                            left:"-100px"
                        },150)
                    }else{
                        clearInterval(show)
                        whether = 99
                        qsb = 99
                    }
                },150)
            }

        }

    })
    $(".x_left_main span").each(function(i){
        $(this).click(function(){
            $(".x_left_title").stop().animate({width:"50px"},1000)
            hidden_top_num = i
            hidden_bottom_num = i
            $(this).stop().animate({
                left:"-100px"
            })
            hidden_top = setInterval(function(){
                if(hidden_top_num!=0){
                    hidden_top_num--
                    $(".x_left_main span").eq(hidden_top_num).stop().animate({
                        left:"-100px"
                    })
                }else{
                    clearInterval(hidden_top)
                    whether = 99
                    qsb = 99
                }
            },150)
            hidden_bottom = setInterval(function(){
                if(hidden_bottom_num!=length){
                    hidden_bottom_num++
                    $(".x_left_main span").eq(hidden_bottom_num).stop().animate({
                        left:"-100px"
                    })
                }else{
                    clearInterval(hidden_bottom)
                    whether = 99
                    qsb = 99
                }
            },150)
        })
    })

</script>

</body>

</html>

  看到這裏詳細大家已經可以預測出實際效果了吧,這種效果是不是要比傳統的導航欄更加具有吸引力呢?那麽大家也趕緊動手嘗試一下吧,如果還存在不理解的地方,可以留言咨詢哦。

  本文由專業的app開發報價燚軒科技整理發布,如需轉載請註明出處!

左側豎條導航欄點擊出現效果的實現