how can make Burger Menu with Angular?

Question

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() {

  }

}

You can do it with html and css – mr. pc_coder Jun 03 '20 at 09:54 — mr. pc_coder, Jun 03 '20 at 09:54

mr. pc_coder · Accepted Answer · 2020-06-03T19:21:22.673

4

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
   }
}

edited Jun 03 '20 at 19:21

answered Jun 03 '20 at 10:14

mr. pc_coder

16,412
3
32
54

thank you for your help, do you have something simpler without any animations ? – Jun 03 '20 at 15:18
https://stackblitz.com/edit/angular-6iwq2i this is without animation – mr. pc_coder Jun 03 '20 at 15:40
but without the left screen is possible ? just when i clicked show my nav list and when i cliked again hide my nav list thanks a lot for you help – Jun 03 '20 at 15:50
Click link again and check please if it is how u want – mr. pc_coder Jun 03 '20 at 15:52
something like that : https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_mobile_navbar – Jun 03 '20 at 17:14
1

Now I understood. https://stackblitz.com/edit/angular-6iwq2i check please – mr. pc_coder Jun 03 '20 at 19:06

score 0 · Answer 2 · answered Jun 03 '20 at 09:09

0

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/

answered Jun 03 '20 at 09:09

Jens

168
2
13

When I arrive on the page the nav menu is hidden and when I click the menu is displayed I do not use Boostrap possible to do it just in typescript ? – Jun 03 '20 at 09:14
Yes, but it will be more work. For different behavoiur on mobilephone (screen size) read about the @media tag. You can also inspect the page I showed you and copy the necessary styling to your application. – Jens Jun 03 '20 at 09:25

how can make Burger Menu with Angular?

2 Answers2