Spacing

Содержание:

Create A Dropdown Sidebar
Подключение расширения Jansy Bootstrap
Скрывающееся навигационное меню
More
Events
Переключение вкладок навигационного меню
Проверка доступности?
DropDown События
- пример
Примеры
More
Images
Нативные раскрывающиеся списки
- По умолчанию
- Использование оболочки
Examples
Когда не использовать выпадающий список (а когда нужно)
Горизонтальное меню для навигации по странице
Images

Create A Dropdown Sidebar

Step 1) Add HTML:

Example

<div class=»sidenav»> <a href=»#about»>About</a> <a href=»#services»>Services</a>
<a href=»#clients»>Clients</a> <a href=»#contact»>Contact</a>
<button class=»dropdown-btn»>Dropdown     <i class=»fa fa-caret-down»></i>
</button> <div class=»dropdown-container»>    <a
href=»#»>Link 1</a>    <a href=»#»>Link 2</a>
<a href=»#»>Link 3</a> </div> <a href=»#contact»>Search</a>
</div>

Example Explained

Use any element to open the dropdown menu, e.g. a <button>, <a>
or <p> element.

Use a container element (like <div>) to create the dropdown menu and add the dropdown links inside
it. We will use the same styling for all links inside the sidenav.

Step 2) Add CSS:

Example

/* Fixed sidenav, full height */.sidenav { height: 100%;
width: 200px; position: fixed; z-index: 1; top:
0; left: 0; background-color: #111; overflow-x:
hidden; padding-top: 20px;}/* Style the sidenav links and the dropdown button */.sidenav a,
.dropdown-btn { padding: 6px 8px 6px 16px;
text-decoration: none; font-size: 20px; color: #818181;
display: block; border: none; background: none;
width:100%; text-align: left; cursor: pointer;
outline: none;}/* On mouse-over */.sidenav a:hover, .dropdown-btn:hover
{ color: #f1f1f1;}/* Main content */.main {
margin-left: 200px; /* Same as the width of the sidenav */
font-size: 20px; /* Increased text to enable scrolling */ padding:
0px 10px;}/* Add an active
class to the active dropdown button */.active {
background-color: green; color: white;}/* Dropdown container (hidden by default).
Optional: add a lighter background color and some left padding to change the
design of the dropdown content */.dropdown-container { display:
none; background-color: #262626; padding-left: 8px;}/* Optional:
Style the caret down icon */.fa-caret-down { float: right;
padding-right: 8px;}

Step 3) Add JavaScript:

Example

//* Loop through all dropdown buttons to toggle between hiding and showing its
dropdown content — This allows the user to have multiple dropdowns without any
conflict */var dropdown = document.getElementsByClassName(«dropdown-btn»);
var i;for (i = 0; i < dropdown.length; i++) { dropdown.addEventListener(«click»,
function() {    this.classList.toggle(«active»);
var dropdownContent = this.nextElementSibling;    if (dropdownContent.style.display
=== «block») {      dropdownContent.style.display
= «none»;    } else {
dropdownContent.style.display = «block»;    } });
}

Tip: Go to our CSS Dropdowns Tutorial to learn more about
dropdowns.

Tip: Go to our Clickable Dropdowns to learn more about clickable dropdowns

Tip: Go to our CSS Navbar Tutorial to learn more about
navbars.

Tip: Go to our Side Navigation Tutorial to learn about how to create closable side navigations.

Подключение расширения Jansy Bootstrap

Для подключения к веб-странице расширения Jansy Bootstrap у Вас должны быть предварительно загружены архивы Twitter Bootstrap 3, jQuery и, конечно же, Jansy Bootstrap. После распаковки данных архивов, их необходимо подключить к веб-странице.

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Jasny Bootstrap</title>

    <!--Подключаем CSS Twitter Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
 
    <!--Подключаем CSS Jasny Bootstrap -->
    <link href="css/jasny-bootstrap.min.css" rel="stylesheet" media="screen">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!-->
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <!-->
  </head>
  <body>
    <h1>Привет, Jasny Bootstrap!</h1>

    <!-- Подключаем jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

    <!-- Подключаем JavaScript Twitter Bootstrap -->
    <script src="js/bootstrap.min.js"></script>

    <!-- Подключаем JavaScript Jasny Bootstrap -->
    <script src="js/jasny-bootstrap.min.js"></script>
  </body>
</html>

Скрывающееся навигационное меню

Скрывающееся навигационное меню работает на основе плагина offcanvas, который позволяет скрыть navmenu с холста. Это особенно полезно для экранов с небольшим размером диагонали.

Рассмотрим следующие примеры navmenu с плагином offcanvas:

Навигационное меню с эффектом толкания (push). Принцип работы данного меню заключается в толкании всей веб-страницы () на величину, равную ширине данного меню. При этом навигационное меню размещается в освободившейся области веб-страницы.

Код HTML:

<nav class="navmenu navmenu-default navmenu-fixed-left offcanvas" role="navigation">
  <a class="navmenu-brand" href="#">Project name</a>
  <ul class="nav navmenu-nav">
  ...
  </ul>  
</nav>
<div class="navbar navbar-default navbar-fixed-top">
  <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".navmenu" data-canvas="body">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
</div>

<div class="container">
<!-- Содержимое веб-страницы-->
</div>

Код CSS:

html, body {
  height: 100%;
}
body {
  padding: 50px 0 0 0;
}
.navbar-toggle {
  float: left;
  margin-left: 15px;
}
@media (min-width: 0) {
  .navbar-toggle {
    display: block;
  }
}
@media (min-width: 992px) {
  body {
    padding: 0;
  }
  .navbar {
    right: auto;
    background: none;
    border: none;
  }
}

Навигационное меню, которое изменяет своё расположение в зависимости от ширины рабочей области окна браузера.

Код HTML:

<div class="navmenu navmenu-default navmenu-fixed-left offcanvas-sm">
  <a class="navmenu-brand visible-md visible-lg" href="#">Название сайта</a>
  <ul class="nav navmenu-nav">
  ...    
  </ul>
</div>
<div class="navbar navbar-default navbar-fixed-top hidden-md hidden-lg">
  <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".navmenu">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="#">Project name</a>
</div>
<div class="container">
<!-- Основное содержимое веб-страницы -->
</div>

Код CSS:

html, body {
  height: 100%;
}
body {
  padding: 50px 0 0 0;
}
.navmenu {
  padding-top: 50px;
}
.navbar {
  display: block;
  text-align: center;
}
.navbar-brand {
  display: inline-block;
  float: none;
}
.navbar-toggle {
  position: absolute;
  float: left;
  margin-left: 15px;
}
.container {
  max-width: 100%;
}
@media (min-width: 1px) {
  .navbar-toggle {
    display: block !important;
  }
}
@media (min-width: 992px) {
  body {
    padding: 0 0 0 300px;
  }
  .navmenu {
    padding-top: 0;
  }
  .navbar {
    display: none !important; /* для IE8 */
  }
}

Навигационное меню с эффектом смещения (reveal). Принцип работы данного меню заключается в смещении блока div с классом canvas (). Данный блок играет роль контейнера, в котором необходимо поместить всё содержимое страницы кроме данного меню. Во время вызова навигационного меню данный блок div смещается влево или вправо на величину, равную ширине этого меню. В освободившейся области экрана будет располагается navmenu (навигационное меню). Также можно отметить, что данный метод является противоположным методу push.

Код HTML:

<div class="navmenu navmenu-default navmenu-fixed-left">
  <a class="navmenu-brand" href="#">Название сайта</a>
  <ul class="nav navmenu-nav">
  ...
  </ul>
</div>
<div class="canvas">
  <div class="navbar navbar-default navbar-fixed-top">
    <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-recalc="false" data-target=".navmenu" data-canvas=".canvas">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
  </div>
  <div class="container">
  <!-- Основное содержимое веб-страницы -->
  </div>
</div>

Код CSS:

html, body {
  height: 100%;
}
.navbar-toggle {
  float: left;
  margin-left: 15px;
}
.navmenu {
  z-index: 1;
}
.canvas {
  position: relative;
  left: 0;
  z-index: 2;
  min-height: 100%;
  padding: 50px 0 0 0;
  background: #fff;
}
@media (min-width: 0) {
  .navbar-toggle {
    display: block; 
  }
}
@media (min-width: 992px) {
  body {
    padding: 0;
  }
  .navbar {
    right: auto;
    background: none;
    border: none;
  }
  .canvas {
    padding: 0;
  }
}

Fullscreen VideoModal BoxesDelete ModalTimelineScroll IndicatorProgress BarsSkill BarRange SlidersTooltipsDisplay Element HoverPopupsCollapsibleCalendarHTML IncludesTo Do ListLoadersStar RatingUser RatingOverlay EffectContact ChipsCardsFlip CardProfile CardProduct CardAlertsCalloutNotesLabelsCirclesStyle HRCouponList GroupList Without BulletsResponsive TextCutout TextGlowing TextFixed FooterSticky ElementEqual HeightClearfixResponsive FloatsSnackbarFullscreen WindowScroll DrawingSmooth ScrollGradient Bg ScrollSticky HeaderShrink Header on ScrollPricing TableParallaxAspect RatioResponsive IframesToggle Like/DislikeToggle Hide/ShowToggle Dark ModeToggle TextToggle ClassAdd ClassRemove ClassActive ClassTree ViewRemove PropertyOffline DetectionFind Hidden ElementRedirect WebpageZoom HoverFlip BoxCenter VerticallyCenter Button in DIVTransition on HoverArrowsShapesDownload LinkFull Height ElementBrowser WindowCustom ScrollbarHide ScrollbarDevice LookContenteditable BorderPlaceholder ColorText Selection ColorBullet ColorVertical LineDividersAnimate IconsCountdown TimerTypewriterComing Soon PageChat MessagesPopup Chat WindowSplit ScreenTestimonialsSection CounterQuotes SlideshowClosable List ItemsTypical Device BreakpointsDraggable HTML ElementJS Media QueriesSyntax HighlighterJS AnimationsGet Iframe Elements

Events

These are the standard Bootstrap events to enhance the dropdown functionality. All dropdown events are fired at the ‘s parent element.

Event	Description
show.bs.dropdown	This event fires immediately when the show instance method is called. You can use the to target the toggling anchor element.
shown.bs.dropdown	This event is fired when the dropdown has been made visible to the user. It will wait for CSS transitions, to complete. You can use the to target the toggling anchor element.
hide.bs.dropdown	This event is fired immediately when the hide instance method has been called. You can use the to target the toggling anchor element.
hidden.bs.dropdown	This event is fired when the dropdown has finished being hidden from the user. It will wait for CSS transitions, to complete. You can use the to target the toggling anchor element.

The following example displays the text content of dropdown link when the users click on it.

Переключение вкладок навигационного меню

<!-- Навигационная панель с 3 вкладками --> 
<ul class="nav nav-tabs" role="tablist" id="myTabExample">
  <li class="active"><a href="#homeExample" role="tab" data-toggle="tab">Главная</a></li>
  <li><a href="#questionsExample" role="tab" data-toggle="tab">Вопросы</a></li>
  <li><a href="#articlesExample" role="tab" data-toggle="tab">Статьи</a></li>
</ul>

<!-- Содержимое вкладок -->
<div class="tab-content">
  <!-- Содержимое 1 вкладки -->
  <div class="tab-pane active" id="homeExample"> 
    Содержание вкладки "Главная"
  </div>
  <!-- Содержимое 2 вкладки -->
  <div class="tab-pane active" id="questionsExample"> 
    Содержание вкладки "Вопросы"
  </div>
  <!-- Содержимое 3 вкладки -->
  <div class="tab-pane active" id="articlesExample"> 
    Содержание вкладки "Статьи"
  </div>
</div>

<!-- Скрипт для активирования работы вкладок -->
<script>
$(function() {
  $('#myTabExample a:last').tab('show')
});
</script>

Вышеприведенный код будет выглядеть следующим образом:

Проверка доступности?

Активное состояние раскрывающегося списка (включая метку) превышает 44px? (Мы учитываем метку, потому что, если вы кликните по метке, раскрывающийся список все равно должен открыться).
Все варианты в раскрывающемся списке имеют высоту более 44px с расстоянием 8px между ними?
Соответствуют ли цвета стандартам доступности AAA?
У вашего раскрывающегося списка есть выделенное состояние?
Убедитесь, что выпадающие списки работают с tabbing map.
Если вы используете кастомный раскрывающийся список, убедитесь, что он может открываться вверх или вниз в том случае, если область просмотра браузера находится слишком низко.

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

Многие ненавидят раскрывающиеся списки– и это правильно. Но иногда существует несколько возможных альтернатив, и, если это так, вы должны улучшить раскрывающиеся списки.

DropDown События

В следующей таблице перечислены все доступные выпадающие события.

Мероприятие	Описание	Попробуй
show.bs.dropdown	Происходит, когда выпадающий собирается показать.	Попробуй
shown.bs.dropdown	Происходит, когда выпадающий полностью показано (после того, как CSS переходы завершено)	Попробуй
hide.bs.dropdown	Происходит, когда выпадающий собирается быть скрыты	Попробуй
hidden.bs.dropdown	Происходит, когда выпадающий полностью скрыт (после того, как CSS переходы завершено)	Попробуй

Совет: Используйте JQuery в event.relatedTarget , чтобы получить элемент , который инициировало выпадающего меню:

пример

$(«.dropdown»).on(«show.bs.dropdown», function(event){
var x = $(event.relatedTarget).text(); // Get the text of the element
alert(x);});

Примеры

пример

/* CSS: */<style>.caret.caret-up {
border-top-width: 0;    border-bottom: 4px solid #fff;
}</style>/* JS: */<script>$(document).ready(function(){
$(«.dropdown»).on(«hide.bs.dropdown», function(){    $(«.btn»).html(‘Dropdown
<span class=»caret»></span>’); }); $(«.dropdown»).on(«show.bs.dropdown»,
function(){    $(«.btn»).html(‘Dropdown <span
class=»caret caret-up»></span>’); });});</script>

пример

<nav class=»navbar navbar-inverse»>
<div class=»container-fluid»>    <div class=»navbar-header»>
<a class=»navbar-brand» href=»#»>WebSiteName</a>
</div>    <div>
<ul class=»nav navbar-nav»>
<li class=»active»><a href=»#»>Home</a></li>        <li
class=»dropdown»>          <a
class=»dropdown-toggle» data-toggle=»dropdown» href=»#»>Page
1          <span class=»caret»></span></a>          <ul
class=»dropdown-menu»>            <li><a href=»#»>Page
1-1</a></li>            <li><a href=»#»>Page
1-2</a></li>            <li><a href=»#»>Page
1-3</a></li>           </ul>        </li>
<li><a href=»#»>Page 2</a></li>
<li><a href=»#»>Page 3</a></li>
</ul>    </div> </div></nav>

Следующий пример добавляет выпадающее меню с формой входа в навигационной панели:

пример

<ul class=»nav navbar-nav navbar-right»> <li class=»dropdown»>
<a class=»dropdown-toggle» data-toggle=»dropdown» href=»#»>Login <span
class=»glyphicon glyphicon-log-in»></span></a>    <div
class=»dropdown-menu»>      <form
id=»formlogin» class=»form container-fluid»>
<div class=»form-group»>
<label for=»usr»>Name:</label>
<input type=»text» class=»form-control» id=»usr»>
</div>        <div
class=»form-group»>
<label for=»pwd»>Password:</label>
<input type=»password» class=»form-control» id=»pwd»>
</div>          <button
type=»button» id=»btnLogin» class=»btn btn-block»>Login</button>
</form>      <div class=»container-fluid»>
<a class=»small» href=»#»>Forgot password?</a>
</div>     </div> </li></ul>

пример

В этом примере мы создали пользовательский класс для выпадающие многоуровневые:

пример

/* CSS: */<style>.dropdown-submenu {
position: relative;}.dropdown-submenu .dropdown-menu {
top: 0;    left: 100%;    margin-top:
-1px;}</style>/* JS: */<script>
$(document).ready(function(){ $(‘.dropdown-submenu a.test’).on(«click»,
function(e){    $(this).next(‘ul’).toggle();
e.stopPropagation();    e.preventDefault(); });
});</script>

Images

SlideshowSlideshow GalleryModal ImagesLightboxResponsive Image GridImage GridTab GalleryImage Overlay FadeImage Overlay SlideImage Overlay ZoomImage Overlay TitleImage Overlay IconImage EffectsBlack and White ImageImage TextImage Text BlocksTransparent Image TextFull Page ImageForm on ImageHero ImageBlur Background ImageChange Bg on ScrollSide-by-Side ImagesRounded ImagesAvatar ImagesResponsive ImagesCenter ImagesThumbnailsBorder Around ImageMeet the TeamSticky ImageFlip an ImageShake an ImagePortfolio GalleryPortfolio with FilteringImage ZoomImage Magnifier GlassImage Comparison Slider

Нативные раскрывающиеся списки

Мы склонны использовать нативные или стандартные варианты, когда время и бюджет ограничены или, когда мы работаем над MVP. Наличие кастомных полей ввода – это глазурь на торте, но иногда у нас нет возможности сделать эту сладкую глазурь. В этом случае полезно знать, с чем вам придется работать.

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

По умолчанию

Как вы можете видеть в этих примерах, все они немного различаются в зависимости от платформы и браузера. Они не красивые, но очень удобны в использовании.

Использование оболочки

«НО, что такое оболочка?», спросите вы. Оболочка – это когда поле выглядит нестандартно, но, когда вы кликаете по нему, оно использует нативный стиль раскрывающегося списка. Это простой способ сохранить стиль страницы в соответствии с вашим брендом и снизить стоимость разработки. Это также помогает решить проблемы UX, которые могут возникнуть с кастомными полями ввода.

Оболочка раскрывающегося списка

Examples

You can wrap the dropdown’s toggle (your button or link) and the dropdown menu within
elements
to better fit your potential needs.

Single button

Any single can be turned into a dropdown toggle with some markup changes. Here’s how you can put
them to work with either element:

Material dropdown
MDB Pro component

Material dropdown with element

MDB Pro component

The Material Design styling for Bootstrap Dropdown component with element

Split button

Similarly, you can create split button dropdowns with virtually the same markup as single button dropdowns, but with
the
addition of the class for proper spacing around the dropdown caret.

We use this extra class to reduce the horizontal on either side of the caret by 25% and remove
the
that’s added for regular button dropdowns. Those extra changes keep the caret centered in
the split
button and provide a more appropriately sized hit area next to the main button.

Material dropdowns
MDB
Pro component

Dropdowns with search field MDB Pro component

It’s very easy to use our dropdown search.

All you have to do is add to the menu wrapper and initiate a function with this JavaScript code.

You can also use material design to style your dropdown with search.

Additional to our dropdown with search you can also add a button to your dropdown filed.

Когда не использовать выпадающий список (а когда нужно)

Этот раздел посвящен всем сайтам, которые заставляют меня вводить год рождения, используя выпадающий список: f *** you. Не нужно напоминать мне о быстро растущем возрасте, пролистывая длинный список месяцев, пока я в конце концов не найду год своего рождения.

Если у вас меньше пяти вариантов

Если у вас меньше пяти вариантов, возможно, проще использовать переключатели, а не дополнительный клик, чтобы перейти ко всем параметрам списка. Потому что список больше пяти вариантов, начинает занимать много места.

Альтернатива выпадающего списка: если у вас меньше пяти вариантов

Примечание: некоторые люди говорят, что должно быть меньше шести вариантов, но вы сами решите какое правило вам подходит.

Если проще напечатать, чем выбрать

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

Альтернатива выпадающего списка: если легче напечатать

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

Если у вас есть два варианта, и это «on» и «off» (или «да» и «нет»)

Раскрывающийся список с двумя вариантами немного раздражает. Особенно с вопросами «да / нет». Переключатели прекрасно подходят для подобных вопросов.

Альтернатива выпадающего списка: если у вас есть вопрос с двумя вариантами ответа

Если варианты ответа числовые

Если варианта ответа числовые, у вас есть несколько вариантов.

Первый – позволить пользователю напечатать ответ. Степперы также полезны, но я бы предложил использовать их только в том случае, если ожидается, что будет не больше пяти вариантов. В противном случае ваш бедный пользователь будет долго сидеть, кликая до 100.

Альтернатива выпадающего списка: если варианты числовые

Второй использует ползунок (слайдер), чтобы выбрать значение. Слайдеры особенно полезны для больших чисел или приблизительных значений.

Альтернатива выпадающего списка: если варианты числовые
Альтернатива выпадающего списка: если варианты имеют диапазон

Если вариантов много

Если в раскрывающемся списке много вариантов (которых по возможности следует избегать), позвольте пользователю «искать» нужный вариант. Чаще всего это можно увидеть в выпадающих списках стран, поскольку они длинные, но на них легко ответить. Как упоминалось ранее, это лучше всего работает в паре с автозаполнением.

Альтернатива выпадающего списка: если вариантов много, НО пользователь знает ответ, прежде чем кликнуть по раскрывающемуся списку

Итак, когда вы должны использовать раскрывающийся список?

Данные ввода должны соответствовать двум требованиям, чтобы рассмотреть возможность использования раскрывающегося списка:

Есть более шести вариантов.
Когда варианты не являются чем-то, что пользователь сразу узнает. Например, представьте, что ваш пользователь загружает видео, а хост должен знать, какую лицензию прикрепить к видео. Среднестатистический пользователь не будет знать все варианты, доступные на платформе, поэтому потребуется раскрывающийся список.

Горизонтальное меню для навигации по странице

Пример создания меню для одностраничного сайта с подсветкой текущего пункта (с использованием компонента ScrollSpy):

<body data-spy="scroll" data-target="#navbar-main" data-offset="90" style="padding-top:70px;">

  <!—Фиксированное горизонтальное меню для навигации по текущей странице -->
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-main" aria-expanded="false">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Brand</a>
      </div>
      <div class="collapse navbar-collapse" id="navbar-main">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#href1">Ссылка 1 <span class="sr-only">(current)</span></a></li>
          <li><a href="#href2">Ссылка 2</a></li>
          <li><a href="#href3">Ссылка 3</a></li>
          <li><a href="#href4">Ссылка 4</a></li>
          <li><a href="#href5">Ссылка 5</a></li>
        </ul>
      </div>
    </div>
  </nav>
  
  <!--Основной контент страницы -->
  <main>
    <div class="container-fluid">
      ...
      <h1>Название страницы</h1>
      ...
      <h2 id="href1">Заголовок 1</h2>
      ...
      <h2 id="href2">Заголовок 2</h2>
      ...
      <h2 id="href3">Заголовок 3</h2>
      ...
      <h2 id="href4">Заголовок 4</h2>
      ...
      <h2 id="href5">Заголовок 5</h2>
      ...
    </div>    
  </main>
  ...
</body>

Дополнительно на страницу необходимо ещё поместить скрипт, который будет в мобильном виде при нажатии на ссылку закрывать collapsed блок:

//при нажатии на ссылку
$(".navbar-collapse a").click(function() {
  //если она не имеет класс dropdown-toggle
  if (!$(this).hasClass("dropdown-toggle")) {
    //то закрыть меню
    $(".navbar-collapse").collapse('hide');
  }
});

Spacing

Create A Dropdown Sidebar

Step 1) Add HTML:

Example

Example Explained

Step 2) Add CSS:

Example

Step 3) Add JavaScript:

Example

Подключение расширения Jansy Bootstrap

Скрывающееся навигационное меню

More

Events

Переключение вкладок навигационного меню

Проверка доступности?

DropDown События

пример

Примеры

пример

пример

пример

пример

пример

More

Images

Нативные раскрывающиеся списки

По умолчанию

Использование оболочки

Examples

Single button

Material dropdown MDB Pro component

Material dropdown with element MDB Pro component

Split button

Material dropdowns MDB Pro component

Dropdowns with search field MDB Pro component

Когда не использовать выпадающий список (а когда нужно)

Если у вас меньше пяти вариантов

Если проще напечатать, чем выбрать

Если у вас есть два варианта, и это «on» и «off» (или «да» и «нет»)

Если варианты ответа числовые

Если вариантов много

Итак, когда вы должны использовать раскрывающийся список?

Горизонтальное меню для навигации по странице

Images

Material dropdown
MDB Pro component

Material dropdown with element

MDB Pro component

Material dropdowns
MDB
Pro component