除非用户将鼠标悬停在小屏幕上,否则无法显示汉堡菜单

时间:2019-11-16 21:18:17

标签: angular bulma

除非用户将鼠标悬停在小屏幕上,否则无法显示Burger Menu。在Bulma.css中使用Angular。如果用户知道将鼠标悬停在哪里,则Burger菜单将按照指示工作。

期望用户在小屏幕(例如电话)的右上角看到汉堡菜单。除非用户知道将鼠标悬停在该位置上,否则什么都不会出现。一旦用户触摸,就会出现汉堡菜单。用户可以进行选择。出现“ X”,因此菜单将消失。

以下HTML代码

    <nav class="navbar is-link" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="#">
      <img src="assets/img/bible2.png" />
    </a>

    <a
      (click)="toggleNavbar()"
      role="button"
      #navBurger
      class="navbar-burger burger is-active"
      aria-label="menu"
      aria-expanded="true"
      data-target="navbarBasicExample"
    >
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
  </div>

  <div id="navbarBasicExample" class="navbar-menu is-active" #navMenu>
    <div class="navbar-start">
      <a class="navbar-item" routerLink="">Home</a>
      <a class="navbar-item" routerLink="networksupport">Quotes</a>
      <a class="navbar-item" routerLink="databackup">Verses</a>
      <a class="navbar-item" routerLink="managementreportsm">Photos</a>

      <div class="navbar-item has-dropdown is-hoverable">
        <a class="navbar-link">
          More
        </a>
        <div class="navbar-dropdown">
          <a class="navbar-item" routerLink="about">About</a>
          <!-- <a class="navbar-item" routerLink="test">test</a>   -->
          <!-- <a class="navbar-item" href="https://github.com/">
                GitHub
              </a> -->
          <!-- <a class="navbar-item" routerLink="contact">Contact</a>
  -->
          <hr class="navbar-divider" />
          <a class="navbar-item" href="http://www.Shelbysys.com/">
            Classic Shelbysys.com
          </a>
        </div>
      </div>
    </div>

    <div class="navbar-end">
      <div class="navbar-item">
        <!-- <div class="buttons">
            <a class="button is-primary">
              <strong>Sign up</strong>
            </a>
            <a class="button is-light">
              Log in
            </a>
          </div> -->
      </div>
    </div>
  </div>
</nav>

0 个答案:

没有答案