Как заставить меню navbar-burger работать на маленьком экране, таком как iPhone, используя angular и bulma? - PullRequest
Новая
       37

Как заставить меню navbar-burger работать на маленьком экране, таком как iPhone, используя angular и bulma?

0 голосов
/ 12 мая 2019

Когда я нажимаю на меню бургера на маленьком экране, ничего не происходит.Конечно, отлично работает на большом экране.Я пробовал несколько конфигураций "navbar".Включенный код как минимум компилируется.У меня была определена цель: 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: Я пытаюсь использовать меню гамбургеров на bulma css, но оно не работает.Что не так?

Маршрутизация работает, как и ожидалось, в большом браузере.Бургерное меню появляется на маленьком экране, но не появляется при нажатии.

1 Ответ

0 голосов
/ 12 мая 2019

есть несколько вещей, которые могут вызвать это для вас - поскольку вы не вставили пример 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" ],

. Вы можете проверить рабочий образец здесь

...