折叠菜单栏选项卡效果

原创已于 2022-04-28 15:16:53 修改 · 2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

于 2018-07-31 16:35:50 首次发布

本文展示了如何使用JavaScript实现一个具有折叠菜单栏和选项卡切换效果的交互设计。点击后，菜单栏会展开并显示选项卡，每个选项卡可点击切换，右上角的关闭按钮可收起菜单栏，恢复初始状态。

先来看看效果图

首先默认显示的是爷爷，点击之后会先展开最下面一栏，然后出来上边的那部分，下面的兄弟五个是一个选项卡的效果，可以点击切换，点击右上角的关闭按钮就可以收回去，回到原来的样子，废话不多说，直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>折叠菜单栏</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        ul li {
            list-style: none;
        }
        #menu li{
            cursor: pointer;
        }
        #application{
            position:fixed;
            left: 0;
            bottom: 50%;
        }
        #icon{
            position: absolute;
            top: 0;
            left: 0;
            font-size: 12px;
            color: #fff;
            width: 30px;
            background: #000;
            padding:  6px 6px;
            cursor: pointer;
        }
        #list{
            position: absolute;
            left:-250px;
            top: 0;
            color: #A9A9A9;
            font-size: 12px;
            width: 250px;
        }
        #list ul{
            background: #222222;
            overflow: hidden;
        }
        #list ul li{
            float: left;
            padding: 6px 0;
            width: 50px;
            text-align: center;
        }
        #list  #menu .active{
            color: #002200;
            background: #eee;
            box-sizing: border-box;
            border-left: 1px solid #666;
            border-right: 1px solid #666;
            border-bottom: 1px solid #666;
        }
        #list #detail{
            position: absolute;
            left: 0;
            bottom: 28px;
            color: #020202;
            width: 100%;
            overflow: hidden;
            background:#666;
            height: 0;
        }
        #list #detail .panel{
            /*height: 100%;*/
            display: none;
            padding: 10px;
            font-size: 30px;
        }
        #list  #detail .active{
            display: block;
            height: 100%;
        }
        #delete{
            display: none;
            color: #ccc;
            padding: 10px ;
            font-size:14px;
            text-decoration: none;
            position: absolute;
            right: -250px;
            top: -220px;
        }
    </style>
</head>
<body>
    <div id="application">
        <div id="icon">爷爷</div>
        <div id="list">
            <ul id="menu">
                <li class="active">大伯</li>
                <li>二伯</li>
                <li>爸爸</li>
                <li>四叔</li>
                <li>五叔</li>
            </ul>
            <div id="detail">
                <div class="panel active">堂哥</div>
                <div class="panel">堂姐</div>
                <div class="panel">自己</div>
                <div class="panel">堂弟</div>
                <div class="panel">堂妹</div>
            </div>
        </div>
        <a href="javascript:;" id="delete" >&times;</a>
    </div>

    <script src="../common.js"></script>
    <script>
        var icon = $('icon'), list = $('list'), detail = $('detail'), menu = $( 'menu'), del = $( 'delete');
        var menuLi = Array.from( menu.children );
        var detailDiv = Array.from( detail.children );

        // 链式运动效果
        icon.onclick = function () {
            bufferMove(icon,{left: -icon.offsetWidth},function (){
                bufferMove(list,{left:0},function(){
                    bufferMove(detail,{height:220},function(){
                        del.style.display = 'block';
                    });
                });
            });
        };

        // 选项卡效果
        menuLi.forEach( (v,k) => {
            v.onclick = function () {
                //切换LI
                menuLi.forEach(n => n.className = '');
                this.className = 'active';

                //切换DIV
                detailDiv.forEach(n => n.style.display = 'none');
                detailDiv[k].style.display = 'block';
            };
        });

        // 删除效果
        del.onclick = function () {
            del.style.display = 'none';
            bufferMove(detail,{height:0},function () {
                bufferMove(list,{left:-250},function(){
                    bufferMove(icon,{left: 0});
                });
            });
        };
    </script>
</body>
</html>