阅读本文需要了解 scss angular

核心代码

.nav-bar {
    display:flex;
    flex-direction:column;
    .bar-top {
        overflow-y: auto;
        flex: 1;
    }
}

这样就实现中间菜单超长滚动，底部菜单自动增高

效果

代码

注意这个代码是使用在 angular 上的，没有做静态页面，可以考虑自己转化一下

使用的图标是 iconfont 图标

navToggle 是 顶部汉堡按钮 控制菜单收缩用的

router-outlet 是 angular 用来加载右侧内容的标签

<div class="page-box" [ngClass]="{'nav-toggle': navToggle}">
    <div class="nav-bar">
        <i class="iconfont icon-bars nav-toggle-icon" (click)="navToggle = !navToggle"></i>
        <ul class="bar-top">
            <li class="bar-item active">
                <a routerLink="/disk">
                    <i class="iconfont icon-home"></i>
                    <span class="bar-name">首页</span>
                </a>
            </li>
            <li class="bar-item">...