his-menu/src/index.less

his menu for vue with element-ui

.menu {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 180px;
  z-index: 99;
  background-color: #283152;
  transition: all .3s ease-in-out;

  .icon-menu {
    position: absolute;
    top: 30px;
    right: -32px;
    transform: translateY(-50%);
    cursor: pointer;
    width: 12px;
    height: 14px;
    background: url(./images/icon-menu.png) no-repeat center;
  }

  .tit {
    padding-top: 13px;
    height: 107px;
    overflow: hidden;

    p {
      width: 45px;
      height: 45px;
      margin: 0 auto 7px;
      background: #76A6EF;
      border-radius: 50%;
      overflow: hidden;

      img {
        display: block;
        width: 100%;
        height: 100%;
      }
    }

    h3 {
      font-size: 16px;
      color: #FFFFFF;
      line-height: 20px;
      height: 40px;
      text-align: center;
      font-weight: normal;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      margin: 0 12px;
    }
  }

  .listbox {
    position: absolute;
    top: 120px;
    left: 0;
    right: 0;
    bottom: 10px;   
    
    /deep/ .el-scrollbar__wrap {
      overflow: hidden;
      overflow-y: scroll;
    }
  }

  .list {
    
    > li {
      line-height: 40px;
      font-size: 14px;
      color: #A5B0C2;
      cursor: pointer;
      position: relative;

      &.current {
        h3 {
          background-color: #76A6EF;

          a {
            color: #fff;

            .icon {
              background-position: 0 -16px;
            }
          }
        }

        .more {
          color: #fff;
        }
      }

      &:hover {
        h3 {
          border-left-color: #76a6ef;
          background-color: #434F73;
        }

        .more {
          color: #fff;
        }
      }

      h3 {
        font-size: 14px;
        height: 40px;
        font-weight: normal;
        border-left: 3px solid transparent;

        a {
          color: #A5B0C2;
          display: block;
          padding-left: 41px;
          white-space: nowrap;
          transition: all .3s ease-in;
          position: relative;

          .icon {
            position: absolute;
            top: 20px;
            left: 20px;
            transform: translateY(-50%);
            width: 16px;
            height: 16px;
            background-repeat: no-repeat;
            background-size: 16px 33px;
            background-position: 0 0;
          }
        }
      }

      .more {
        position: absolute;
        top: 20px;
        right: 20px;
        width: 12px;
        height: 12px;
        line-height: 12px;
        transform: translateY(-50%);
      }

      ul {
        background-color: rgba(95,112,144,0.40);
        padding: 5px 0;

        li {
          padding-left: 40px;
          height: 30px;
          line-height: 30px;
          margin-bottom: 10px;
          position: relative;

          &:last-child {
            margin-bottom: 0;
          }

          a {
            color: #A5B0C2;
            transition: all .3s ease-in;
          }

          &.cur, &:hover {
            &.cur {
              background: url(./images/left.png) no-repeat right center;
              background-size: 5px 10px;
            }

            a {
              color: #76A6EF;
              display: block;
              height: 100%;
            }

            .round {
              border-color: #76A6EF;
              background-color: #76A6EF;
            }
          }

          .round {
            position: absolute;
            top: 50%;
            left: 20px;
            transform: translateY(-50%);
            width: 6px;
            height: 6px;
            border: 1px solid #A5B0C2;
            border-radius: 50%;
            transition: all .3s ease-in;
          }
        }
      }
    }

    /deep/ li.small {
      height: 40px;

      h3 {
        a {
          padding-left: 67px;
          overflow: hidden;
        }
      }

      .more {
        display: none;
      }

      ul {
        display: none;
      }

      &.current {
        h3 {
          background-image: url(./images/left.png);
          background-repeat: no-repeat;
          background-position: right center;
          background-size: 5px 10px;
        }
      }
    }
  }
}