Bootstrap 4 - Navbar (основное меню)

Александр Мальцев
Александр Мальцев
47K
36
Bootstrap 4 - Navbar (основное меню)
Содержание:
  1. Как с помощью Navbar создать основное вертикальное меню для сайта
  2. Как изменить расположение кнопки «гамбургер»
  3. Как выровнять пункты в мобильном виде меню
  4. Комментарии

Статья, в которой рассмотрим, как с помощью компонента Navbar создать вертикальное схлопывающееся меню для сайта.

Как с помощью Navbar создать основное вертикальное меню для сайта

Для создания основного вертикального меню необходимо:

  • подключить на страницу CSS код, который будет определять вид меню на больших экранах;
  • определённым образом организовать HTML код, который будет задавать нужное положение элементов.

HTML и CSS код вертикального меню для сайте на базе Navbar:

...
<!-- CSS -->
<style>
@media (min-width: 768px) {
  .navbar-container {
    position: sticky;
    top: 0;
    overflow-y: auto;
    height: 100vh;
  }
  .navbar-container .navbar {
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: nowrap;
    flex-direction: column;
    height: 100%;
  }
  .navbar-container .navbar-collapse {
    align-items: flex-start;
  }
  .navbar-container .nav {
    flex-direction: column;
    flex-wrap: nowrap;
  }
  .navbar-container .navbar-nav {
    flex-direction: column !important;
  }
}
</style>
...
<!-- HTML -->
<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-4 col-lg-3 navbar-container bg-light">
        <!-- Вертикальное меню -->
        <nav class="navbar navbar-expand-md navbar-light">
          <a class="navbar-brand" href="#">Navbar</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbar">
            <!-- Пункты вертикального меню -->
            <ul class="navbar-nav">
              <li class="nav-item">
              <a class="nav-link" href="#link-1">Ссылка 1</a>
              </li>
              <li class="nav-item">
              <a class="nav-link" href="#link-2">Ссылка 2</a>
              </li>
              <li class="nav-item">
              <a class="nav-link" href="#link-3">Ссылка 3</a>
              </li>
              <li class="nav-item">
              <a class="nav-link" href="#link-4">Ссылка 4</a>
              </li>
              <li class="nav-item">
              <a class="nav-link" href="#link-5">Ссылка 5</a>
              </li>
            </ul>
          </div>
        </nav>
      </div>
      <div class="col-md-8 col-lg-9 content-container" style="background-color: #ffe0b2">
        <!-- Основной контент страницы  -->
        ...
      </div>
    </div>
  </div>
</body>
...

Демо меню

Bootstrap 4 Navbar - Вертикальное схлопывающеесяы меню для сайта

Как изменить расположение кнопки «гамбургер»

Например, для того чтобы расположить кнопку «гамбургер» в левой части меню, достаточно её просто расположить до бренда:

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

Например, для того чтобы кнопку поместить по центру, оставшегося после бренда пространства в меню, к ней необходимо добавить классы ml-auto и mr-auto:

...
<button class="navbar-toggler ml-auto mr-auto" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
...

Как выровнять пункты в мобильном виде меню

Выравнивание пунктов в мобильном представлении меню выполняется посредством добавления класса text-right или text-center к элементу с классом navbar-nav:

...
<!-- Выравнивание пунктов по правому краю -->
<ul class="navbar-nav text-right">
...
...
<!-- Выравнивание пунктов по центру -->
<ul class="navbar-nav text-center">
...

Комментарии:

  1. Ulbos
    Ulbos
    06.03.2022, 20:26
    как сделать чтобы меню выпадало в право.т.е подменю
    1. Ulbos
      Ulbos
      06.03.2022, 19:48
      Здравствуйте, а как можно чтоб меню выпадающе было
      1. Виталий
        Виталий
        27.05.2021, 13:39
        Здравствуйте, можете помочь организовать вот такое меню www.codeply.com/go/wKWHgsMXah для версии 4.0 альфа 4? Принцип работы меню: при сужении экрана ссылки перемещаются в выпадающий список, при расширении — наоборот.
        1. Александр Мальцев
          Александр Мальцев
          15.01.2022, 06:44
          В Bootstrap 4.0 альфа 4 меню построена с использованием float, а в релизной версии Bootstrap 4 с использованием flexbox. Изменил скрипт чтобы он корректно работал с float. Пример: https://disk.yandex.ru/d/WhDpjmUiKLyAqw
          1. Виталий
            Виталий
            15.01.2022, 12:40
            Скажите пожалуйста, если сузить экран, то при перезагрузке страницы хоть и доли секунды, но сначала видно все пункты меню, а потом уже в свернутом виде, это как-то лечится?
            1. Александр Мальцев
              Александр Мальцев
              15.01.2022, 14:17
              Если скрипты подключаются внизу страницы, то сначала загружается страница, потом скрипты, а затем они выполняются. Поэтому конечно меню отображается как есть, и только после того как скрипты выполнятся, меню принимает такой вид какой нужно.

              Можно перенести подключение скриптов в head, тогда такого можно избежать. Но в этом случае увеличится время метрики FCP (первой отрисовки контента).
              <!doctype html>
              <html lang="ru">
              <head>
                 ...
                <link rel="stylesheet" href="css/bootstrap.min.css">
                <style>...</style>
                <script src="js/jquery-3.6.0.min.js"></script>
                <script src="js/bootstrap.min.js"></script>
                <script>
                  document.addEventListener('DOMContentLoaded', function() {
                    // ...  
                  });
                </script>
              </head>
              ...
              1. Виталий
                Виталий
                15.01.2022, 20:00
                У меня есть еще подобный скрипт и меню тоже дергалось,
                в js я удалил $(window).load(function() и теперь работает все ровно, может и тут в js можно что-то поправить\изменить?
                1. Виталий
                  Виталий
                  17.01.2022, 01:11
                  Вот версия, которая хорошо работает на версии 3.3.7, если не затруднит, адаптируйте пожалуйста под нужную мне.
                  
                  <div class="navbar navbar-inverse navbar-fixed-top">
                  	<div class="container">
                  		<div class="navbar-header">
                  			<a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                  				<span class="icon-bar"></span>
                  				<span class="icon-bar"></span>
                  				<span class="icon-bar"></span>
                  			</a>
                  			<a href="#" class="navbar-brand">WebSite Logo</a>
                  		</div>
                  		<div class="navbar-collapse collapse navbar-right" id="nav-collapse">
                  		        <ul class="nav navbar-nav">
                  				<li><a href="#"><i class="fa fa-link"></i> Item 1</a></li>
                  				<li><a href="#"><i class="fa fa-link"></i> Item 2</a></li>
                  				<li class="dropdown">
                  					<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-list"></i> Item 3 <b class="caret"></b></a>
                  					<ul class="dropdown-menu">
                  						<li><a href="#">Item 3.1</a></li>
                  						<li><a href="#">Item 3.2</a></li>
                  						<li><a href="#">Item 3.3</a></li>
                  						<li><a href="#">Item 3.4</a></li>
                  					</ul>
                  				</li>
                  				<li><a href="#"><i class="fa fa-link"></i> Item 3</a></li>
                  				<li><a href="#"><i class="fa fa-link"></i> Item 4</a></li>
                  				<li class="dropdown">
                  					<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-list"></i> Item 5 <b class="caret"></b></a>
                  					<ul class="dropdown-menu">
                  						<li><a href="#">Item 5.1</a></li>
                  						<li><a href="#">Item 5.2</a></li>
                  						<li><a href="#">Item 5.3</a></li>
                  						<li><a href="#">Item 5.4</a></li>
                  					</ul>
                  				</li>
                  				<li><a href="#"><i class="fa fa-link"></i> Item 6</a></li>
                  				<li><a href="#"><i class="fa fa-link"></i> Item 7</a></li>
                          			<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-bars"></i> More <b class="caret"></b></a><ul class="dropdown-menu dropdown-menu-right"><li><a href="#"><i class="fa fa-link"></i> Item 8</a></li><li class="dropdown">
                  					<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> User <b class="caret"></b></a>
                  					<ul class="dropdown-menu">
                  						<li><a href="#">Profile</a></li>
                  						<li class="divider"></li>
                  						<li><a href="#">Logout</a></li>
                  					</ul>
                  				</li>
                  				</ul>
                  				</li>
                  			</ul>
                  		</div>
                  	</div>
                  </div>
                  
                  <script type="text/javascript">
                  $('ul.navbar-nav').responsiveCollapse();
                  </script>
                  
                  Файл js disk.yandex.ru/d/5-VgNxgVKS4Z-g
          2. Виталий
            Виталий
            14.01.2022, 14:56
            Александр здравствуйте, вопрос по прежнему актуален, поможете? С меня на пиво.
            1. Александр Мальцев
              Александр Мальцев
              14.01.2022, 15:25
              Здравствуйте! Посмотрю в ближайшее время.
            2. Станислав
              Станислав
              27.05.2021, 14:57
              Виталий, по умолчанию меню такое и идет. Доки по бутстрапу
              1. Виталий
                Виталий
                27.05.2021, 15:39
                Мне нужно под вот эту версию
                Пример меню в папке docs/examples/navbar/
                ==========
                Немного неверно описал принцип работы меню в первом сообщении, правильно так: при сужении экрана ссылки перемещаются в dropdown, при расширении — возвращаются на место.
                1. Станислав
                  Станислав
                  27.05.2021, 20:10
                  ну так и есть по умолчанию, адаптивное меню, Вот пример существенных отличий нет
                  1. Виталий
                    Виталий
                    28.05.2021, 00:45
                    Отличия есть-во всех версиях bootstrap функционал примерно одинаков, а вот классы без конца переименовываются непонятно зачем…
                    =====
                    Пример меню из папки docs/examples/navbar/ в версии 4.0 альфа 4 — это пример меню, которое сейчас у меня и из него мне нужно сделать вот такое меню: www.codeply.com/go/wKWHgsMXah
                    В стандартном bootstrap такого функционала нет.
                    1. Станислав
                      Станислав
                      28.05.2021, 06:17
                      добавляешь в меню
                      <li class="nav-item dropdown d-none">
                                      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        Dropdown
                                      </a>
                                      <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenu">
                                      </ul>
                                  </li>
                      и скрипт
                      1. Виталий
                        Виталий
                        28.05.2021, 15:02
                        Станислав, пожалуйста, оставь меня в покое…
                        1. Я задал вопрос автору сайта, а не тебе.
                        2. Если хочеш кому-то помочь-научись читать текст, а не между строк…
                        1. Станислав
                          Станислав
                          28.05.2021, 18:25
                          Научись читать код, Все работает на 4 версии https://codepen.io/irbees2008/pen/BaWwpmv
                          1. Виталий
                            Виталий
                            29.05.2021, 17:49
                            Скачай версию 4.0 альфа 4, вставь там в примерах свой код и сам увидиш-НЕ РАБОТАЕТ!!!

                            Например класса
                            navbar-expand-sm, navbar-collapse, navbar-toggler-icon
                            там в помине нет… и т. д…
            3. Станислав
              Станислав
              18.08.2020, 09:27
              здравствуйте, есть меню, написано под бутстрап 3, но работает и в 4
              <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
              
              <div class="nav-side-menu">
                  <div class="brand">Brand Logo</div>
                  <i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
                
                      <div class="menu-list">
                
                          <ul id="menu-content" class="menu-content collapse out">
                              <li>
                                <a href="#">
                                <i class="fa fa-dashboard fa-lg"></i> Dashboard
                                </a>
                              </li>
              
                              <li  data-toggle="collapse" data-target="#products" class="collapsed active">
                                <a href="#"><i class="fa fa-gift fa-lg"></i> UI Elements <span class="arrow"></span></a>
                              </li>
                              <ul class="sub-menu collapse" id="products">
                                  <li class="active"><a href="#">CSS3 Animation</a></li>
                                  <li><a href="#">General</a></li>
                                  <li><a href="#">Buttons</a></li>
                                  <li><a href="#">Tabs & Accordions</a></li>
                                  <li><a href="#">Typography</a></li>
                                  <li><a href="#">FontAwesome</a></li>
                                  <li><a href="#">Slider</a></li>
                                  <li><a href="#">Panels</a></li>
                                  <li><a href="#">Widgets</a></li>
                                  <li><a href="#">Bootstrap Model</a></li>
                              </ul>
              
              
                              <li data-toggle="collapse" data-target="#service" class="collapsed">
                                <a href="#"><i class="fa fa-globe fa-lg"></i> Services <span class="arrow"></span></a>
                              </li>  
                              <ul class="sub-menu collapse" id="service">
                                <li>New Service 1</li>
                                <li>New Service 2</li>
                                <li>New Service 3</li>
                              </ul>
              
              
                              <li data-toggle="collapse" data-target="#new" class="collapsed">
                                <a href="#"><i class="fa fa-car fa-lg"></i> New <span class="arrow"></span></a>
                              </li>
                              <ul class="sub-menu collapse" id="new">
                                <li>New New 1</li>
                                <li>New New 2</li>
                                <li>New New 3</li>
                              </ul>
              
              
                               <li>
                                <a href="#">
                                <i class="fa fa-user fa-lg"></i> Profile
                                </a>
                                </li>
              
                               <li>
                                <a href="#">
                                <i class="fa fa-users fa-lg"></i> Users
                                </a>
                              </li>
                          </ul>
                   </div>
              </div>
              .nav-side-menu {
                overflow: auto;
                font-family: verdana;
                font-size: 12px;
                font-weight: 200;
                background-color: #2e353d;
                position: fixed;
                top: 0px;
                width: 300px;
                height: 100%;
                color: #e1ffff;
              }
              .nav-side-menu .brand {
                background-color: #23282e;
                line-height: 50px;
                display: block;
                text-align: center;
                font-size: 14px;
              }
              .nav-side-menu .toggle-btn {
                display: none;
              }
              .nav-side-menu ul,
              .nav-side-menu li {
                list-style: none;
                padding: 0px;
                margin: 0px;
                line-height: 35px;
                cursor: pointer;
                /*    
                  .collapsed{
                     .arrow:before{
                               font-family: FontAwesome;
                               content: "\f053";
                               display: inline-block;
                               padding-left:10px;
                               padding-right: 10px;
                               vertical-align: middle;
                               float:right;
                          }
                   }
              */
              }
              .nav-side-menu ul :not(collapsed) .arrow:before,
              .nav-side-menu li :not(collapsed) .arrow:before {
                font-family: FontAwesome;
                content: "\f078";
                display: inline-block;
                padding-left: 10px;
                padding-right: 10px;
                vertical-align: middle;
                float: right;
              }
              .nav-side-menu ul .active,
              .nav-side-menu li .active {
                border-left: 3px solid #d19b3d;
                background-color: #4f5b69;
              }
              .nav-side-menu ul .sub-menu li.active,
              .nav-side-menu li .sub-menu li.active {
                color: #d19b3d;
              }
              .nav-side-menu ul .sub-menu li.active a,
              .nav-side-menu li .sub-menu li.active a {
                color: #d19b3d;
              }
              .nav-side-menu ul .sub-menu li,
              .nav-side-menu li .sub-menu li {
                background-color: #181c20;
                border: none;
                line-height: 28px;
                border-bottom: 1px solid #23282e;
                margin-left: 0px;
              }
              .nav-side-menu ul .sub-menu li:hover,
              .nav-side-menu li .sub-menu li:hover {
                background-color: #020203;
              }
              .nav-side-menu ul .sub-menu li:before,
              .nav-side-menu li .sub-menu li:before {
                font-family: FontAwesome;
                content: "\f105";
                display: inline-block;
                padding-left: 10px;
                padding-right: 10px;
                vertical-align: middle;
              }
              .nav-side-menu li {
                padding-left: 0px;
                border-left: 3px solid #2e353d;
                border-bottom: 1px solid #23282e;
              }
              .nav-side-menu li a {
                text-decoration: none;
                color: #e1ffff;
              }
              .nav-side-menu li a i {
                padding-left: 10px;
                width: 20px;
                padding-right: 20px;
              }
              .nav-side-menu li:hover {
                border-left: 3px solid #d19b3d;
                background-color: #4f5b69;
                -webkit-transition: all 1s ease;
                -moz-transition: all 1s ease;
                -o-transition: all 1s ease;
                -ms-transition: all 1s ease;
                transition: all 1s ease;
              }
              @media (max-width: 767px) {
                .nav-side-menu {
                  position: relative;
                  width: 100%;
                  margin-bottom: 10px;
                }
                .nav-side-menu .toggle-btn {
                  display: block;
                  cursor: pointer;
                  position: absolute;
                  right: 10px;
                  top: 10px;
                  z-index: 10 !important;
                  padding: 3px;
                  background-color: #ffffff;
                  color: #000;
                  width: 40px;
                  text-align: center;
                }
                .brand {
                  text-align: left !important;
                  font-size: 22px;
                  padding-left: 20px;
                  line-height: 50px !important;
                }
              }
              @media (min-width: 767px) {
                .nav-side-menu .menu-list .menu-content {
                  display: block;
                }
              }
              body {
                margin: 0px;
                padding: 0px;
              }
              
              Хотел заставить что бы при нажати на другой пункт меню сворачивались открытые sub-menu

              Пробывал
              $(function() {
                  $('ul#menu-content > ul').on('show.bs.collapse', function (e,obj) {
                  $("ul#menu-content > ul").not(this).removeClass("in");
                  var currentHead = $(this).prev("li");
                  $("ul#menu-content > li").not(currentHead).removeClass("active");
                  $(currentHead).addClass("active");
              })
              })
              но неработает на jquery 3.2
              1. Александр Мальцев
                Александр Мальцев
                23.08.2020, 10:46
                Привет! Тут проблема не в jquery, а с кодом.
                Чтобы эту задачу решить, нужно просто удалить класс show у других открытых пунктов кроме открываемого:
                $('#menu-content .sub-menu').on('show.bs.collapse', function () {
                  $('#menu-content .sub-menu.show').not(this).removeClass('show');
                });
                
                Готовый пример в песочнице: b4-navbar-2
                1. Станислав
                  Станислав
                  23.08.2020, 19:31
                  Благодарю, как все просто
              2. sky
                sky
                08.08.2020, 22:45
                Здравствуйте, подскажите пожалуйста, как реализовать в мобильной версии фиксированную навигацию сверху?
                1. Александр Мальцев
                  Александр Мальцев
                  10.08.2020, 05:16
                  Здравствуйте!
                  Для этого можно добавить класс fixed-top к элементу:
                  <div class="col-md-4 col-lg-3 navbar-container bg-light">
                  
                  А также добавить padding сверху к основному контейнеру для мобильной версии, чтобы сдвинуть контент немного ниже.
                  Например:
                  <div class="container-fluid pt-5 pt-md-0">
                  
                  1. sky
                    sky
                    12.08.2020, 20:04
                    Спасибо! Получилось)
                2. Константин
                  Константин
                  01.02.2020, 08:55
                  Здравствуйте немного не по теме.

                  Есть стандартный html.

                  <ul class="nav navbar-nav col-lg-ul-nav"> 
                  <li class="dropdown">
                  <a href="<?= $item_one['url']; ?>" ><?= $item_one['name']; ?>Услуги</a>
                  <ul class="dropdown-menu">
                  <li><a href="/uslugy/sekcya">Секция плавания</a></li>
                  <li><a href="/uslugy/sekcya">Секция бадминтона</a></li>
                  </ul>
                  </li>
                  
                  При наведении на раздел Услуги появляется выпадающий список услуг и в сам раздел Услуги можно перейти!
                  Выпадающие услуги таким образом реализованы

                  .dropdown:hover > .dropdown-menu {
                  display: block;
                  }

                  Как на компьютере все отлично. Но вот в мобильной версии при клике на раздел, переходит в сам раздел, а выпадающее меню появляется лишь на мгновение.

                  Посмотрел документацию bootstap 3 и добавил к тегу А такое

                  <a class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="<?= $item_one['url']; ?>" ><?= $item_one['name']; ?>Услуги</a>
                  
                  И вроде бы хорошо, в мобильной раскрывается список услуг, на компьютере тоже самое. А вот сам раздел Услуги становиться не кликабельным.

                  Подскажите пожалуйста, что можно с этим сделать?
                  1. Александр Мальцев
                    Александр Мальцев
                    01.02.2020, 14:47
                    Здравствуйте. На мобильных устройствах нет hover. Не знаю, как вы хотите, чтобы это выглядело. Можно использовать кнопку с разделителем, т.е., по факту, 2 кнопки. При нажатии на первую кнопку переходите в раздел, а при нажатии на вторую (стрелочку вниз) открывается выпадающий список.
                    1. Константин
                      Константин
                      01.02.2020, 15:04
                      Ну да видимо придется со стрелочкой делать. Доки посмотрел в принципе ничего сложного. Извините толком не разобрался я понаписал тут
                      1. Александр Мальцев
                        Александр Мальцев
                        01.02.2020, 15:09
                        Всё отлично, хорошо, что разобрался.
                  2. Антон
                    Антон
                    20.03.2019, 19:24
                    А как сделать чтобы при меню выезжало слева а не сверху?
                    1. Александр Мальцев
                      Александр Мальцев
                      21.03.2019, 14:01
                      Посмотрите этот пример.
                      1. Антон
                        Антон
                        25.03.2019, 14:28
                        Вот лучше пример
                        <!DOCTYPE html>
                        <html>
                          <head>
                            <title>Bootstrap 101 Template</title>
                            <meta name="viewport" content="width=device-width, initial-scale=1.0">
                            <!-- Bootstrap -->
                            <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
                            <link href="css/jasny-bootstrap.min.css" rel="stylesheet" media="screen">
                        
                            <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
                            <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
                            <!--[if lt IE 9]>
                              <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
                              <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
                            <![endif]-->
                        	
                        <style>
                        html, body {
                          height: 100%;
                          }
                        body {
                          padding: 70px 0 0 0;
                          }
                        
                        .navbar {
                          display: block;
                          text-align: center;
                          }
                        .navbar-brand {
                          display: inline-block;
                          float: none;
                          }
                        .navbar-toggler {
                          position: absolute;
                          float: left;
                          }
                        .navmenu {
                        	margin-top: 56px;
                            }
                        .container {
                          max-width: 100%;
                          }
                        
                        @media (min-width: 1px) {
                          .navbar-toggler {
                            display: block !important;
                            }
                          }
                        
                        @media (min-width: 992px) {
                          body {
                            padding: 0 0 0 300px;
                            }
                          .navmenu {
                        	margin-top: 0;
                            }
                          .navbar {
                            display: none !important; /* IE8 fix */
                            }
                          }
                        	</style>
                        	
                          </head>
                          <body>
                            
                        	<div class="navmenu navmenu-default navmenu-fixed-left offcanvas-sm">
                        	<a class="navmenu-brand d-none d-lg-block" href="#">Project name</a>
                        
                              <ul class="nav navmenu-nav flex-column">
                                <li class="nav-item active"><a class="nav-link" href="../navmenu/">Slide in</a></li>
                                <li class="nav-item"><a class="nav-link" href="../navmenu-push/">Push</a></li>
                                <li class="nav-item"><a class="nav-link" href="../navmenu-reveal/">Reveal</a></li>
                                <li class="nav-item"><a class="nav-link" href="../navbar-offcanvas/">Off canvas navbar</a></li>
                              </ul>
                              <ul class="nav navmenu-nav flex-column">
                                <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
                                <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
                                <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
                                <li class="nav-item dropdown">
                                  <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                                  <ul class="dropdown-menu navmenu-nav">
                                    <li class="nav-item"><a class="nav-link" href="#">Action</a></li>
                                    <li class="nav-item"><a class="nav-link" href="#">Another action</a></li>
                                    <li class="nav-item"><a class="nav-link" href="#">Something else here</a></li>
                                    <li class="dropdown-divider"></li>
                                    <li class="dropdown-header">Nav header</li>
                                    <li class="nav-item"><a class="nav-link" href="#">Separated link</a></li>
                                    <li class="nav-item"><a class="nav-link" href="#">One more separated link</a></li>
                                  </ul>
                                </li>
                              </ul>
                            </div>
                        
                            <header class="navbar navbar-light bg-light fixed-top hidden-md hidden-lg">
                              <button class="navbar-toggler" type="button" data-toggle="offcanvas" data-target=".navmenu">
                                <span class="navbar-toggler-icon"></span>
                              </button>
                        		<a class="navbar-brand" href="#">Project name</a>
                            </header>
                        
                            <div class="container">
                              <div class="page-header">
                                <h1>Off Canvas Slide-in Menu Template</h1>
                              </div>
                              <p class="lead">This example shows the navmenu element. If the viewport is <b>less than 992px</b> the menu will be placed the off canvas and will be shown with a slide in effect.</p>
                              <p>Also take a look at the examples for a navmenu with <a href="../navmenu-push">push effect</a> and <a href="../navmenu-reveal">reveal effect</a>.</p>
                            </div><!-- /.container -->
                        	
                        	
                            <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
                            <script src="js/jquery-3.3.1.min.js"></script>
                        	<script src="js/popper.min.js"></script>
                            <!-- Include all compiled plugins (below), or include individual files as needed -->
                            <script src="js/bootstrap.min.js"></script>
                        	
                            <script src="js/jasny-bootstrap.min.js"></script>
                          </body>
                        </html>
                        
                        1. Антон
                          Антон
                          22.03.2019, 14:55
                          Пасиба большое!
                      2. Ян
                        Ян
                        31.10.2018, 10:15
                        Здравствуйте! Подскажите пожалуйста, есть ли у Вас видео-курсы по Bootstrap или другим модулям? Спасибо.
                        1. Александр Мальцев
                          Александр Мальцев
                          31.10.2018, 12:56
                          Здравствуйте! Видеокурсы — это конечно очень здорово! Но их нет. Создавать курсы по Bootstrap и другим темам пока не планирую.
                        2. Сергей
                          Сергей
                          18.10.2018, 10:03
                          Ага, хорошо расписано. А как разместить гамбургер слева или в центре, а подпункты которые раскрываются выровнять по центру или справа?
                          1. Александр Мальцев
                            Александр Мальцев
                            18.10.2018, 14:41
                            Ответы на эти вопросы добавлены в статью.
                          Войдите, пожалуйста, в аккаунт, чтобы оставить комментарий.