如何仅在 mobile-Angular 上显示汉堡菜单？

Question

我在大屏幕上有一个常规的导航栏。我只想在移动设备上有一个汉堡菜单，菜单图标只在移动设备上显示。我想用 Angular（我是初学者）来实现。我该怎么做，不想使用 Angular material。这是我的代码。

<div class="b-navbar">
    <div class="b-navbar__toggle">
      <button (click)="onToggle()" class="b-navbar__button">
        <fa-icon [icon]="hamburgerBars" class="b-navbar__icon"></fa-icon>
      </button>
    </div>
    <ul class="b-navbar__nav" *ngIf="showToggle">
      <li class="b-navbar__nav">
        <a routerLink="/home" class="b-navbar__link">Home</a>
      </li>
      <li class="b-navbar__nav">
        <a class="b-navbar__link" href="#">Services</a>
      </li>
      <li class="b-navbar__nav">
        <a routerLink="/about" class="b-navbar__link">About</a>
      </li>
      <li class="b-navbar__nav">
        <a class="b-navbar__link" href="#">Reviews</a>
      </li>
      <li class="b-navbar__nav">
        <a class="b-navbar__link" href="#">Locations</a>
      </li>
      <li class="b-navbar__nav">
        <a routerLink="/contact" class="b-navbar__link">Contacts</a>
      </li>
    </ul>
  </div>

Angular代码`

hamburgerBars = faBars;
onToggle() {
    this.showToggle = !this.showToggle;
}

Answer 1

如果只想在小屏幕上显示某些内容，可以在 CSS 中使用媒体查询。

.hamburger {
  display: block;
}

@media (max-width: 600px) {
  .hamburger {
    display: none;
  }
}

这是Stackbiltz

中的最终解决方案

Answer 2

通常，使用媒体查询是更好的方法：“首先移动，然后针对更大的设备调整设计”

.b-navbar__nav { //by defect not show
  display: none;
}

@media (min-width: 600px) { //when larger screen
  .b-navbar__nav {
    display: block;
  }
}

如何仅在 mobile-Angular 上显示汉堡菜单？

How to show hamburger menu only on mobile-Angular?

toggle

hamburger-menu

angular