首页

左侧竖条导航栏点击出现效果的实现

导航栏 2018-05-08 2425

大部分的网站导航栏都是在网页的顶端,这类导航栏看起来非常一般,而有些在左侧竖着显示的导航栏就比较好看一些了,但是今天为大家介绍的是左侧竖条导航栏实现点击出现的效果,也就是刚开始只显示导航,不显示分类栏,而点击导航就可以显示分类栏了,下面app开发报价燚轩科技就来跟大家分享一下源代码的实现吧。

<!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>

看到这里详细大家已经可以预测出实际效果了吧,这种效果是不是要比传统的导航栏更加具有吸引力呢?那么大家也赶紧动手尝试一下吧,如果还存在不理解的地方,可以留言咨询哦。

分享到微信朋友圈 +
打开微信,点击底部的“发现”,使用 “扫一扫” 即可将网页分享到我的朋友圈。 如何使用?
推荐文章

热贴More +

服务范围More +

联系我们

请扫二维码联系客服

854221200@qq.com

185-3825-9583

QQ客服

关于  ·  招聘  ·  案例中心  ·  网站地图

©@2018 燚轩科技版权所有 豫ICP备16015002号-4

百度提供搜索支持