Question

当我在小屏幕上单击汉堡菜单时，什么也没有发生。当然，它在大屏幕上也可以正常工作。我已经尝试了几种“导航栏”配置。包含的代码至少可以编译。我定义了一个目标：class =“ navbar-burger is active” data-target =“ navbar-menu”和class =“ navbar-menu”的id =“ navbar-menu” 我想念什么？

  <!-- logo -->
  <div class="navbar-brand is-large">
  <a class="navbar-item" href="#">
      <img src="assets/img/Grayscale_cloud.png">
    </a>
    <div class="navbar-burger is active" data-target="navbar-menu">
    <span></span>
    <span></span>
    <span></span>
  </div>
  </div>
  <!-- menu -->
  <div class="navbar-menu" id = "navbar-menu">
    <div class="navbar-start">
    <a class="navbar-item" routerLink="">Home</a>
    <a class="navbar-item" routerLink="contact">Contact</a>
    <a class="navbar-item" routerLink="networksupport">Network</a>
    <a class="navbar-item" routerLink="managemnentreports">Management Reports</a>
    </div>

  </div>
</nav>

`，

我在这里尝试代码无济于事。 https://medium.com/@edigleyssonsilva/bulma-css-framework-with-angular-6-responsive-menu-and-navbar-burger-dff747ed2dc1

这里有几个很好的例子，但我无法使它们与布尔玛和Angular一起使用：I'm trying to use hamburger menu on bulma css, but it doesn't work. What is wrong?

路由在大型浏览器上可以正常工作。汉堡菜单显示在小屏幕上，但按时不显示。

Answer 1

有几件事可能会引起您的原因-由于您没有粘贴MCV示例，因此我将全部列出

您没有粘贴用于显示主导航或汉堡导航的切换功能...这是媒体文章链接中的切换功能（在 app.component.ts 中）你粘贴了 toggleNavbar() { this.navBurger.nativeElement.classList.toggle('is-active'); this.navMenu.nativeElement.classList.toggle('is-active'); }
要使此切换功能起作用，您必须在 app.component.html
中分配名称
- 您有<div class="navbar-menu" id = "navbar-menu"> ...，应该有<div class="navbar-menu" id = "navbar-menu" #navMen>
- 和<a class="navbar-item" href="#"> .... </a> ...应该具有 <a (click)="toggleNavbar()" role="button" #navBurger data-target="navbar-menu"> ... </a>
此外，我们不得不做npm install bulma
将css添加到我们的angular.json中：
"styles": ["node_modules/bulma/css/bulma.min.css" ],

您可以检查working sample here

如何使navbar-burger菜单在小屏幕（如iPhone）上使用Angular和Bulma工作？

1 个答案: