如何用棱角制作汉堡菜单?

Question

如何使用Angular制作汉堡菜单？ 我不明白如何在打字稿中做什么，我是一个初学者。

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

首页组件.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行，用于动画。

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

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

Answer 2

这是什么意思？

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

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

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