如何用 Angular 制作汉堡菜单？

Question

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

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

homepage.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 行动画。

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

<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 说 max to 992px css insde 这个查询将被接受然后你只需要在里面输入输入和标签

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

Answer 2

这是什么意思？

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

通常，当您在笔记本电脑屏幕上时，您希望将导航栏显示为普通菜单栏，而当您在智能手机上时，将其折叠为汉堡菜单。

如果您使用引导程序，您将使用导航栏立即获得此行为。 请查看此资源： https://mdbootstrap.com/docs/angular/navigation/navbar/