Angular 7 отзывчивое выпадающее меню - PullRequest
Новая
       26

Angular 7 отзывчивое выпадающее меню

0 голосов
/ 15 декабря 2018

Я создаю отзывчивый пользовательский topnav в Angular 7 

<nav id="nav" class="sticky" #stickyMenu [class.fixed] = "fixed">
        <ul>
          <li><a routerLink='home' routerLinkActive='activado'>Home</a></li>
          <li><a routerLink='projects' routerLinkActive='activado'>Projects and stuff</a></li>
          <li><a routerLink='contact' routerLinkActive='activado'>Contact</a></li>
        </ul>

        <ul [ngClass]="{'toggleMenuStyle': toggleMenu === true}">
             <i class="fa fa-bars icon" (click)="onToggleMenu()"></i>
          <li><a routerLink='home' routerLinkActive='activado'>Home</a></li>
          <li><a routerLink='projects' routerLinkActive='activado'>Projects and stuff</a></li>
          <li><a routerLink='contact' routerLinkActive='activado'>Contact</a></li>
        </ul>
      </nav>

в menu.component.ts ... 

toggleMenu = false;

onToggleMenu(){
    if(this.toggleMenu === true){
       this.toggleMenu = false;
    }else{
      this.toggleMenu = true;
    }
    console.log('click');
  }

и мой css ... 

nav i {
  display: none;
  color:white;
}
.toggleMenuStyle{
  display: block;
  margin-bottom: 5px;
}

@media screen and (max-width:800px) {
   nav ul li{
     display: none
   }
   nav i{
     display: block;
   }
}

когда я делаю щелчок, изменения класса и консоль регистрируют щелчок, но в теле ничего не происходит .. Спасибо и всего наилучшего!

1 Ответ

0 голосов
/ 15 декабря 2018

Это потому, что ваш класс, добавленный к элементу <ul>, ничего не делает, просто посмотрите поближе: 

.toggleMenuStyle {
  display: block;
  margin-bottom: 5px;
}

1. display: block.Элемент <ul> уже имеет то же значение по умолчанию, как описано в Настройки CSS по умолчанию * Блок 1010 *.

2. margin-bottom: 5px.Это применимо, но в этом случае ничего не делает.

Вы можете проверить это STACKBLITZ с более выразительными стилями (background-color: red в этом примере).

...