angular - 如何用 Angular 制作汉堡菜单？

Question

如何使用 Angular 制作汉堡菜单？我不明白如何使用 Typescript 我是个初学者。

当我将屏幕切换到智能手机模式时，我应该隐藏导航菜单吗？

主页.component.html

<div class="wrapper">
        <div class="sidebar-wrapper">
            <div class="title-content">
                <h1 class="title-wrapper">Furniture</h1>
                <button (click)="burgerMenuClick">&#9776;</button>
            </div>
            <nav class="sidebar-wrapper-nav">
                <ul>
                    <li class="list-wrapper">
                        Home
                    </li>
                    <li class="list-wrapper">
                        Shop
                    </li>
                    <li class="list-wrapper">
                        Product
                    </li>
                    <li class="list-wrapper">
                        Cart
                    </li>
                </ul>
            </nav>
        </div>
        <div class="main-content-wrapper">
            <img src="https://colorlib.com/preview/theme/amado/img/product-img/pro-big-1.jpg">
            <img src="https://colorlib.com/preview/theme/amado/img/product-img/pro-big-1.jpg">
            <img src="https://colorlib.com/preview/theme/amado/img/product-img/pro-big-1.jpg">
        </div>
    </div>

homepage.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-homepage',
  templateUrl: './homepage.component.html',
  styleUrls: ['./homepage.component.css']
})
export class HomepageComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    this.burgerMenuClick();
  }

  burgerMenuClick() {

  }

}

Answer 1

您只需使用 html 和 css 即可。我创建 Demo在链接。

在 html 中，您可以使用 checkbox 来显示或隐藏导航菜单，具体取决于是否选中。 label 部分包括 3 行动画。

如果你只想要移动应用程序，你需要为此放置媒体查询。您可以在链接中查看示例。

<input type="checkbox" [(ngModel)]="model" class="openSidebarMenu" id="openSidebarMenu">
  <label for="openSidebarMenu" class="sidebarIconToggle">
      <div class="spinner diagonal part-1"></div>
      <div class="spinner horizontal"></div>
      <div class="spinner diagonal part-2"></div>
  </label>
  <div id="sidebarMenu">
        <div class="main-content-wrapper">
        </div>
    </div>

下面的 mediaquery 说最大到 992px css insde 这个查询将被接受然后你只需要把输入和标签放在里面

.sidebarIconToggle{
      display:none
}
@media screen and (max-width: 750px) {
  .sidebarIconToggle{
      display:block
   }
}