如何在手机上只显示汉堡菜单-Angular？
如何在手机上只显示汉堡菜单-Angular？
提问于 2021-01-23 18: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-23 19:40:22
如果您只想在小屏幕上显示某些内容，则可以在CSS中使用媒体查询。
.hamburger {
display: block;
}
@media (max-width: 600px) {
.hamburger {
display: none;
}
}以下是Stackbiltz的最终解决方案
Stack Overflow用户
发布于 2021-01-28 09: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
复制相关文章
![[TDD] 如何测试 React 异步组件？](https://ask.qcloudimg.com/http-save/yehe-1739614/0f503028a00cb0fd3f1581d1b3480a19.png)
点击加载更多
相似问题
私有路由不呈现组件
在useEffect挂钩完成之前呈现ReactJS身份验证路由组件
在呈现私有路由之前等待API调用
私有路由( render )在能够检索用户信息以进行身份验证之前呈现
在呈现组件之前，不会获取数据。
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
