The realization of the effect of clicking on the left vertical navigation bar

　　Most of the website navigation bars are at the top of the web page. This type of navigation bar looks very general, and some navigation bars displayed vertically on the left side are better, but today I will introduce you to the left vertical bar. The navigation bar realizes the effect of clicking, that is, only the navigation is displayed at the beginning, and the category bar is not displayed, and the category bar can be displayed by clicking the navigation. Let's take a look at the realization of the source code.
<!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>

　　Seeing the details here, you can already predict the actual effect. Is this effect more attractive than the traditional navigation bar? Then let's try it out quickly. If there is still something you don't understand, you can leave a message Consult.

　　This article is organized and published by Yixuan Technology, a professional app development quotation, if you need to reprint, please indicate the source!

The realization of the effect of clicking on the left vertical navigation bar

Guess you like