» Как сделать меню на Бутстрап

Как сделать меню на Бутстрап

0 676

меню Бутстрап

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

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

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

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

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

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

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

Код для меню
<!-- Горизонтальное Меню  -->
<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>
<!-- Конец Меню  -->

За раскрывающийся список пунктов меню отвечает этот код:

Код для раскрывающегося списка меню
<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, то избавиться от него можно легко, - просто удалите эту ссылку:

Код для Brand
<a class="navbar-brand" href="#">Brand</a>

И то же самое можно сделать с формой поиска, которое расположено в правой части меню. Либо удалите код формы, либо замените на что-то своё, не забыв прописать для нового элемента такой же класс class="navbar-right", как и у самой формы поиска.

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

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

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

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

Код для фиксированного меню бутстрап
<!-- Фиксированное в самом верху страницы  -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<!-- Фиксированное в самом низу страницы  -->
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">

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

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

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

Для отображения вертикального меню на сайте, нужно прописать вот этот код html:

Код для вертикальное меню бутстрап
<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>

Как вы видите всё то же самое, только меняется класс для списка меню и оно уже становится в вертикальном положение.

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

Либо как альтернативу, можно использовать эффект свертывания, пример которого, вы можете наблюдать у меня в левой колонке Содержание.

 

Код для свертывания
<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>

Последний код подойдёт для свертывания любой текстовой информации.

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

Скачать готовое меню на Бутстрап

Ссылка на файл: menu_bootstrap.zip 17

Похожие новости