Как сделать hamburger menu?

Для создания hamburger menu на веб-странице с использованием Bootstrap есть несколько способов. Рассмотрим два наиболее распространенных подхода.

Первый способ:
1. Подключите необходимые файлы Bootstrap к вашей странице. Можно скачать файлы с официального сайта Bootstrap или использовать CDN ссылки.
2. Создайте HTML разметку для вашего меню. Обычно используется элемент <nav> с классами "navbar" и "navbar-expand-lg", а также вложенный элемент <button> с атрибутами "navbar-toggler" и "collapsed".

<nav class="navbar navbar-expand-lg">
  <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <!-- Ваше меню здесь -->
    </ul>
  </div>
</nav>

3. Добавьте ваше меню внутри списка <ul> внутри элемента с классом "navbar-collapse".
4. Настройте стили меню с помощью CSS.
5. Подключите jQuery и файлы Bootstrap JavaScript к вашей странице, чтобы обеспечить работу hamburger menu.

Второй способ:
1. Подключите необходимые файлы Bootstrap к вашей странице, как описано выше.
2. Создайте HTML разметку для вашего меню.

<div class="navbar">
  <input type="checkbox" id="navbar-toggle" class="navbar-toggle">
  <label for="navbar-toggle" class="navbar-toggle-label">
    <span class="navbar-toggle-icon"></span>
  </label>
  <div class="navbar-collapse">
    <ul class="navbar-nav">
      <!-- Ваше меню здесь -->
    </ul>
  </div>
</div>

3. Добавьте ваше меню внутри списка <ul> внутри элемента с классом "navbar-collapse".
4. Настройте стили меню с помощью CSS. Используйте классы "navbar-toggle" и "navbar-toggle-label" для стилизации элементов меню.
5. Подключите jQuery и файлы Bootstrap JavaScript к вашей странице, чтобы обеспечить работу hamburger menu.

В обоих случаях, если вы хотите добавить функционал открытия / закрытия меню по нажатию, вам необходимо будет включить скрипты Bootstrap и инициализировать их на вашей странице. Это можно сделать, добавив следующий код внутри тега <script> перед закрывающим тегом </body>:

$(document).ready(function(){
  $('.navbar-toggler').click(function(){
    $('.navbar-collapse').toggleClass('show');
  });
});

Помимо вышеперечисленных способов, есть и другие варианты создания hamburger menu с использованием Bootstrap. Подходы могут отличаться в зависимости от версии Bootstrap и ваших специфических потребностей. Однако, эти два способа являются наиболее популярными и часто используются в проектах на Bootstrap.