Блог

У меня есть панель навигации bootstrap 4 в моей базе кода angular, когда размер экрана просмотра становится маленьким, тогда я хотел скрыть панель навигации и добавить значок гамбургера и боковое меню.

Я попробовал несколько раз, но у меня ничего не получилось, поэтому я искал руководство о том, как этого добиться !.

У меня есть мой HTML, TS и CSS для вашей справки.

Мой HTML-код:

 <nav class = "navbar navbar-expand-md navbar-fixed-top nav-border" role="navigation">
    <ul class="navbar-nav mx-auto" *ngFor="let menu of menus">
        <li class="nav-item dropdown">
            <a class="nav-link" data-toggle="dropdown" data-target="{{menu.heading}}">{{menu.heading}}</a>
            <div class="dropdown-menu" aria-labelledby="{{menu.heading}}">
                <a *ngFor="let option of menu.options" href="{{option.link}}" target="_blank" class="dropdown-item">{{option.name}}</a>
            </div>
        </li>
    </ul>
</nav>
 

Мои TS:

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

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

  menus : any = [
    {
      
        heading: "MENU1",
        options: 
        [
          {name: "GOOGLE",link: "https://google.com/", order: 1},
          {name: "GitHub",link: "https://github.com", order: 2},
        ]
      
    }
  ];
  
  isDropdownOpen: boolean = false;
  constructor() { }

  ngOnInit(): void {
  }

}
 

Мой CSS:

 .navbar{
    padding:0px;
}
.nav-border {
    border-bottom:1px solid #ccc;
}
li { cursor: pointer; }

li:hover{
    background-color: black;
}

a {
    color: black;
}

.navbar-nav {
    padding: .9rem 0 0;
}

.nav-link:hover {color:white;}

.widthd{
    width: 100%;
}
 

Мой экран:

Проблема в вашем классе navbar-fixed-top , измените его на fixed-top , и вам также нужно добавить кнопку гамбургера в свою панель навигации.

Вы можете попробовать это:

 <nav class="navbar navbar-expand-md fixed-top navbar-light bg-light">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mx-auto" *ngFor="let menu of menus">
                <li class="nav-item dropdown">
                    <a class="nav-link" data-toggle="dropdown" data-target="{{menu.heading}}">{{menu.heading}}</a>
                    <div class="dropdown-menu" aria-labelledby="{{menu.heading}}">
                        <a *ngFor="let option of menu.options" href="{{option.link}}" target="_blank"
                            class="dropdown-item">{{option.name}}</a>
                    </div>
                </li>
            </ul>
       </div>
</nav>