CODEWITHSUNDEEP
angulartypescripthamburger-menu
user13491010
user13491010

Reputation:

how can make Burger Menu with Angular?

How can make Burger Menu with Angular ? I do not understand how to do in Typescript I am quite a beginner.

when i switch my screen to smartphone mode should i hide the nav menu ?

homepage.component.html 

<div class="wrapper">
        <div class="sidebar-wrapper">
            <div class="title-content">
                <h1 class="title-wrapper">Furniture</h1>
                <button (click)="burgerMenuClick">&#9776;</button>
            </div>
            <nav class="sidebar-wrapper-nav">
                <ul>
                    <li class="list-wrapper">
                        Home
                    </li>
                    <li class="list-wrapper">
                        Shop
                    </li>
                    <li class="list-wrapper">
                        Product
                    </li>
                    <li class="list-wrapper">
                        Cart
                    </li>
                </ul>
            </nav>
        </div>
        <div class="main-content-wrapper">
            <img src="https://colorlib.com/preview/theme/amado/img/product-img/pro-big-1.jpg">
            <img src="https://colorlib.com/preview/theme/amado/img/product-img/pro-big-1.jpg">
            <img src="https://colorlib.com/preview/theme/amado/img/product-img/pro-big-1.jpg">
        </div>
    </div>

homepage.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-homepage',
  templateUrl: './homepage.component.html',
  styleUrls: ['./homepage.component.css']
})
export class HomepageComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    this.burgerMenuClick();
  }

  burgerMenuClick() {

  }

}

Upvotes: 3

Views: 23088

Answers (2)

Cagri Tacyildiz
Cagri Tacyildiz

Reputation: 17610

You can do it with just html and css . I create Demo at link.

As in html you can use checkbox as show or hide nav menu depend of checked or not. label part includes 3 line which is for animation.

If you want only for mobile applications you need to put mediaquery for this. You can check example at link. 

<input type="checkbox" [(ngModel)]="model" class="openSidebarMenu" id="openSidebarMenu">
  <label for="openSidebarMenu" class="sidebarIconToggle">
      <div class="spinner diagonal part-1"></div>
      <div class="spinner horizontal"></div>
      <div class="spinner diagonal part-2"></div>
  </label>
  <div id="sidebarMenu">
        <div class="main-content-wrapper">
        </div>
    </div>

for mediaquery below says max to 992px css insde this query will be accepted then you just need to put input and label inside it

.sidebarIconToggle{
      display:none
}
@media screen and (max-width: 750px) {
  .sidebarIconToggle{
      display:block
   }
}

Upvotes: 5

Jens
Jens

Reputation: 168

What do you mean by this?

when i switch my screen to smartphone mode should i hide the nav menu ?

Usually you want to show the nav bar as a normal menu bar when you are on a laptop screen and collaps it to an hamburger menu when you are on a smartphone.

If you use bootstrap you will get this behaviour out of the box with the navbar. Please check out this resource: https://mdbootstrap.com/docs/angular/navigation/navbar/

Upvotes: 0

Related Questions