除非用户将鼠标悬停在小屏幕上,否则无法显示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>