如何在手机上只显示汉堡菜单-Angular？
如何在手机上只显示汉堡菜单-Angular？
提问于 2021-01-24 02:09:11
我在大屏幕上有一个普通的导航栏。我想只在移动设备上有一个汉堡包菜单，菜单图标只在移动设备上显示。我想用Angular来实现这一点(我是初学者)。我该怎么做呢，我不想使用角度材料。这是我的代码。
<div class="b-navbar">
<div class="b-navbar__toggle">
<button (click)="onToggle()" class="b-navbar__button">
<fa-icon [icon]="hamburgerBars" class="b-navbar__icon"></fa-icon>
</button>
</div>
<ul class="b-navbar__nav" *ngIf="showToggle">
<li class="b-navbar__nav">
<a routerLink="/home" class="b-navbar__link">Home</a>
</li>
<li class="b-navbar__nav">
<a class="b-navbar__link" href="#">Services</a>
</li>
<li class="b-navbar__nav">
<a routerLink="/about" class="b-navbar__link">About</a>
</li>
<li class="b-navbar__nav">
<a class="b-navbar__link" href="#">Reviews</a>
</li>
<li class="b-navbar__nav">
<a class="b-navbar__link" href="#">Locations</a>
</li>
<li class="b-navbar__nav">
<a routerLink="/contact" class="b-navbar__link">Contacts</a>
</li>
</ul>
</div>角度代码`
hamburgerBars = faBars;
onToggle() {
this.showToggle = !this.showToggle;
}回答 2
Stack Overflow用户
回答已采纳
发布于 2021-01-24 03:40:22
如果您只想在小屏幕上显示某些内容，则可以在CSS中使用媒体查询。
.hamburger {
display: block;
}
@media (max-width: 600px) {
.hamburger {
display: none;
}
}以下是Stackbiltz的最终解决方案
Stack Overflow用户
发布于 2021-01-28 17:04:49
一般来说，使用媒体查询的方法更好：“先移动，然后调整设计，以适应更大的设备”。
.b-navbar__nav { //by defect not show
display: none;
}
@media (min-width: 600px) { //when larger screen
.b-navbar__nav {
display: block;
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65862683
复制相关文章
相似问题
腾讯云开发者
