Содержание страницы
домикГлавная / Элементы html и css / Меню бутстрап
меню на БутстрапЭто третий урок, как сделать сайт на бутстрап, и в нём мы поговорим о горизонтальном и вертикальном меню Бутстрап. Рассмотрим какой код необходимо прописать для раскрывающихся списков меню и как сделать меню фиксированным на Бутстрап.

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

И давайте подробно рассмотрим наиболее востребованные варианты меню на Бутстрап.

Горизонтальное меню на бутстрап с выпадающим списком

Горизонтальное меню на бутстрап с выпадающим списком
Откройте файл index.html (ссылка внизу) для просмотра в своём браузере и для редактирования в текстовом редакторе.

В том месте на странице, где планируете вывести горизонтальное меню Бутстрап, пропишите следующий код для меню:
htmlCOPY
<!-- Горизонтальное Меню --> <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <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="bs-example-navbar-collapse-1"> <!-- Вывод ссылок (пункты меню) --> <ul class="nav navbar-nav"> <li class="active"><a href="#">Главная</a></li> <li><a href="#">Обо мне</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Хобби <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Первая ссылка</a></li> <li><a href="#">Вторая ссылка</a></li> <li class="divider"></li> <li><a href="#">Отдельная ссылка</a></li> </ul> </li> </ul> <!-- Конец Ссылки --> <!-- Форма Поиска --> <form class="navbar-form navbar-right" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Поиск ..."> </div> <button type="submit" class="btn btn-default">Искать</button> </form> <!-- Конец Форма Поиск --> </div> </div> </nav> <!-- Конец Меню -->
За раскрывающийся список пунктов меню отвечает этот код:
htmlCOPY
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Хобби <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Первая ссылка</a></li> <li><a href="#">Вторая ссылка</a></li> <li class="divider"></li> <li><a href="#">Отдельная ссылка</a></li> </ul> </li>
И если вы не планируете на сайте раскрывающееся меню, то просто удалите этот код.

Если вы не желаете иметь в начале меню пункт с Brand, то избавиться от него можно легко, - просто удалите эту ссылку:
htmlCOPY
<a class="navbar-brand" href="#">Brand</a>
И то же самое можно сделать с формой поиска, которое расположено в правой части меню. Либо удалите код формы, либо замените на что-то своё, не забыв прописать для нового элемента такой же класс class="navbar-right", как и у самой формы поиска.

Добавляйте пункты меню, изменяйте их название и ваше меню бутстрап полностью готово!

Оформление меню и пунктов меню можно редактировать либо в файле bootstrap.css, либо прописать новые значения в файле main.css

Фиксированное меню на бутстрап

Для того, чтобы зафиксировать меню бутстрап, нужно просто добавить к тегу nav дополнительный класс:
htmlCOPY
<!-- Фиксированное в самом верху страницы --> <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <!-- Фиксированное в самом низу страницы --> <nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
Обратите внимание на тот факт, что при фиксированном меню, вам необходимо будет немного увеличить отступ сверху, или снизу у главного контента на странице.

Вертикальное меню бутстрап

Вертикальное меню бутстрап
Для отображения вертикального меню на сайте, нужно прописать вот этот код html:
htmlCOPY
<ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#">Первый пункт меню</a></li> <li><a href="#">Второй пункт меню</a></li> <li><a href="#">Третий пункт меню</a></li> </ul>
Как вы видите всё то же самое, только меняется класс для списка меню и оно уже становится в вертикальном положение.

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

Либо как альтернативу, можно использовать эффект свертывания, пример которого, вы можете наблюдать у меня в левой колонке Содержание.
htmlCOPY
<div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Группа один</a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body"> <a class="list-group-item" href="#">Первая ссылка</a> <a class="list-group-item" href="#">Вторая ссылка</a> <a class="list-group-item" href="#">Третья ссылка</a> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Группа два</a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body"> <a class="list-group-item" href="#">Первая ссылка</a> <a class="list-group-item" href="#">Вторая ссылка</a> <a class="list-group-item" href="#">Третья ссылка</a> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">Группа три</a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse"> <div class="panel-body"> <a class="list-group-item" href="#">Первая ссылка</a> <a class="list-group-item" href="#">Вторая ссылка</a> <a class="list-group-item" href="#">Третья ссылка</a> </div> </div> </div> </div>
Последний код подойдёт для свертывания любой текстовой информации.

стрелка вниз Скачать меню на Бутстрап

Ссылка на файл: скачать архив
Дата публикации: 12.07.2018
Комментарии
Добавить комментарий
Комментарий не отправлен!
Комментарий успешно отправлен!
После модерации он будет опубликован!
Имя - только русские буквы!
Это обязательное поле!