css - 如何使用 angular 和 bulma 使 navbar-burger 菜单在像 iPhone 这样的小屏幕上工作？

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

这里有几个很好的例子，但我无法让它们与 Bulma 和 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

• 在我们的 angular.json 中添加 css:
  "styles": ["node_modules/bulma/css/bulma.min.css" ],

你可以查看 working sample here