Question

所以，我现在要做的是一个全屏菜单，它将打开整个屏幕（菜单标题栏以外的标题）。可以在这里看到：因此，当我在较小的屏幕上打开它时，它会变大。无法在一个屏幕上显示：

当我向下滚动时，我可以到达菜单6，但是缺少菜单7：

这是代码： app.component.html

<div [ngClass]="{'app__header-container-fixed' : isContententFixed}" >
 <app-header [tabMenu]="true" [menuTabs]="mockData.tabsMenuItems" (tabsMenuFix)="isContententFixed = $event" ></app-header>

<router-outlet></router-outlet>

<app-footer [linkTitles]="mockData.linkTitles" [linkItems]="mockData.linkItems"></app-footer>

</div>

app.component.scss

.app__header-container-fixed{
  height: 100%;
  overflow: hidden;
}

header.component.html

<header class="header">
  <div class="container header__container">


    <div class="header__actions">

      <nav class="header__menu" *ngIf="withMenu" (click)="onMenuButtonClicked()">
        <div class="header__menu-burger" *ngIf="!menuIsOpened">
          <img src="../../assets/img/menu.svg" alt="" />
        </div>

        <div class="header__menu-close" *ngIf="menuIsOpened">
          <img src="../../assets/img/close-button.svg" alt="" />
        </div>

      </nav>
    </div>
  </div>
</header>
<div >
  <app-tabs-menu *ngIf="tabMenu" [menuTabs]="menuTabs" (menuOpened)="onTabMenuOpen($event)"></app-tabs-menu>
  <app-hamburger-menu *ngIf="withMenu && menuIsOpened" [menuItems]="menuItems" ></app-hamburger-menu>
</div>

header.component.scss

@import '../../../variables.scss';
@import '../../../assets/scss/tools/mixins.scss';

.header {
  background-color: $dark-blue;
}

.header__container {
  margin: 0 auto;
  padding: 52px 30px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;

  @include responsive($md) {
    padding: 28px 30px;
  }
}

.header__logo {
  img {
    width: 96px;
    height: 36px;

    @include responsive($md) {
      width: 70px;
      height: 26px;
    }
  }
}

.header__actions {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.header__help {
  img {
    width: 36px;
    height: 36px;
  }

  @include responsive($md) {
    transform: scale(0.8);
  }
}

.header__menu {
  position: relative;
  z-index: 20;

  &:hover {
    .header__menu-list {
      display: flex;
    }
  }
}

.header__menu-burger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 34px;
  height: 18px;
  cursor: pointer;
  margin-left: 30px;

  @include responsive($md) {
    margin-left: 15px;
    height: 16px;
  }
}

.header__menu-burger-bar {
  display: block;
  width: 24px;
  height: 2px;
  background-color: $dark-7;

  @include responsive($md) {
    width: 20px;
  }
}

.header__menu-list-container {
  position: absolute;
  top: 100%;
  right: 0;
  padding-top: 20px;
}

.header__menu-list {
  width: 160px;
  display: none;
  flex-direction: column;
  box-shadow: 0px 2px 14px 0px rgba(0, 0, 0, 0.15);

  .header__menu-list-item:first-child {
    .header__menu-list-link {
      border-top-left-radius: $border-radius;
      border-top-right-radius: $border-radius;
    }
  }

  .header__menu-list-item:last-child {
    .header__menu-list-link {
      border-bottom-left-radius: $border-radius;
      border-bottom-right-radius: $border-radius;
    }
  }
}

.header__menu-list-link {
  display: block;
  background-color: $dark-7;
  padding: 12px 20px;
  text-decoration: none;
  color: $dark-1;

  &:hover {
    background-color: $dark-3;
  }
}

tabs-menu.component.html

<div class="tabs-menu__container">
  <div class="tabs-menu__tabs-container">
    <div class="row">
      <div class="col-1"></div>
      <div class="col-xl-2 col-3" *ngFor="let menuTab of menuTabs">
        <div class="tabs-menu__tabs-title-container" (click)="onMenuTabClicked(menuTab)">
          <p class="tabs-menu__tabs-title" >{{menuTab.title}}</p>
          <div class="tabs-menu__active-tab-underline" *ngIf="menuTab.isActive"></div>
        </div>
      <div class="col-1"></div>

      </div>
    </div>
  </div>
  <div class="tabs-menu__body-container">
  <app-tabs-menu-body *ngIf="activeMenuTab!==undefined" [menuItems]="activeMenuTab.items" (closed)="onMenuClosed($event)" ></app-tabs-menu-body>
  </div>

</div>

tabs-menu.component.scss

@import "../../variables.scss";



.tabs-menu__tabs-container{
  background: $dark-3;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  position: relative;
  z-index: 1;

}
.tabs-menu__tabs-title{
  margin: 12px 0;
}

.tabs-menu__tabs-title-container{
  width: fit-content;
}


.tabs-menu__active-tab-underline{
  height: 5px;
  width: 100%;
  background-color: $dark-blue;
}

.tabs-menu__body-container{
  z-index: 0;
  display: flex;

}

tabs-menu-body.component.html

    <div class="tabs-menu-body__container">
  <div class="container tabs-menu-body__close-button-container">
    <div class="row">
      <div class="col-xl-11 col-md-10 col-8" col-md ></div>
      <div class="col-xl-1 col-md-2 col-4"> <img src="../../assets/img/Shape.svg" class="tabs-menu-body__close-button" (click)="onClose($event)" /></div>
    </div>
  </div>
  <div class="container tabs-menu-body__item-container">
    <div class="row">
      <div class="col-xl-2 col-md-4 col-6" *ngFor="let menuItem of menuItems" >
        <p class="tabs-menu-body__item-header">{{menuItem.header}}</p>
        <div class="tabs-menu-body__item-link-container">
            <p class="tabs-menu-body__item-link" *ngFor="let menuLink of menuItem.links" [routerLink]="menuLink.path">{{menuLink.title}}</p>
        </div>
      </div>
    </div>
  </div>
</div>

tabs-menu-body.component.scss

.tabs-menu-body__container{
  background-color: $dark-3;
  width: 100%;
  height: stretch;
  position: fixed;
  overflow-y: auto;

}


.tabs-menu-body__item-header{
  font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
  font-style: bold;
  font-size: 22px;
  line-height: normal;
  text-align: left;
  color: $dark-1;
  margin-bottom: 12px;
}

.tabs-menu-body__item-link{
  font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
  font-style: regular;
  font-size: 12px;
  line-height: 25px;
  text-align: left;
  color: $dark-1;


}

.tabs-menu-body__item-link-container{
  margin-bottom: 35px;
}

.tabs-menu-body__item-container{
  margin-top: 120px;

}


.tabs-menu-body__close-button{
  margin-top: 35px;
}

菜单无法滚动，我设置了溢出：隐藏；在父容器上。

如何访问菜单7？

Answer 1

“位置：固定”时，应设置容器高度，我认为最好添加媒体查询

.tabs-menu-body__container{
  background-color: red;
  width: 100%;
  height: stretch;
  position: fixed;
  overflow-y: auto;
  height:100%; 
}

在固定的全屏菜单CSS中滚动

1 个答案: