如何用 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

你这是什么意思？

when i switch my screen to smartphone mode should i hide the nav menu ?

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

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

Answer 2

您只需使用 html 和 css 即可。我在 link.

创建 Demo

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

如果您只想要移动应用程序，则需要为此设置媒体查询。您可以在 link 查看示例。

<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>

对于下面的媒体查询，最大为 992px css insde 这个查询将被接受然后你只需要在其中放入输入和标签

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

如何用 Angular 制作汉堡菜单？

how can make Burger Menu with Angular?

typescript

hamburger-menu

angular