CODEWITHSUNDEEP
angulardrop-down-menuresponsive-designangular7
Santiago Spinetto Jung
Santiago Spinetto Jung

Reputation: 198

Angular 7 responsive dropdown menu

Im building a responsive custom topnav in 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>

in menu.component.ts...

toggleMenu = false;

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

and my 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;
   }
}

when I make click the class changes and the console logs the click but in the body nothings happen.. Thanks and regards!

Upvotes: 4

Views: 3558

Answers (1)

P.S.
P.S.

Reputation: 16384

That's because your class added to <ul> element does totally nothing, just take a look closer:

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

1. display: block. Element <ul> already has the same default value, as described in Default CSS Settings block.

2. margin-bottom: 5px. It applies but does totally nothing in this case.

You can check this STACKBLITZ with more expressive styles (background-color: red in this example).

Upvotes: 2

Related Questions