如何用Angular制作汉堡菜单？

Question

如何可以使汉堡菜单与Angular的？我不明白如何在Typescript中做我是一个相当的初学者。

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

首页.组件.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>

首页.组件.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。我创建 演示 在链接中。

和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，说的是最大到992px的css，这个查询将被接受，然后你只需要把输入和标签放在里面。

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

Answer 2

你这是什么意思？

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

通常情况下，当你在笔记本屏幕上时，你希望将导航栏显示为一个正常的菜单栏，而当你在智能手机上时，则将其折叠为一个汉堡包菜单。

如果你使用bootstrap，你会得到这个行为的导航条的盒子。请查看这个资源。https:/mdbootstrap.comdocsangularnavigationnavbar。