Кастомизируем bootstrap 4 меню

Содержание

Создание одно уровневого меню с социальными иконками
Несколько bootstrap navbar на 1 странице
Выпадающая по клику поисковая строка
Дорабатываем прочие меленькие недоработки

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

Создание одно уровневого меню с социальными иконками

За основу берем стандартный bootstrap 4 navbar: getbootstrap.com/docs/4.3/components/navbar/.

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

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <div class="container">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item active">
                <a class="nav-link" href="#">Об авторе</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Мои услуги</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Мое портфолио</a>
              </li>
            </ul>
        </div>
        <div class="navbar-text">
            <ul class="nav mom-social-icons">
                <li class="twitter"><a target="_blank" href="#"><i class="fab fa-twitter"></i></a></li>
                <li class="facebook"><a target="_blank" href="#"><i class="fab fa-facebook-f"></i></a></li>
                <li class="gplus"><a target="_blank" href="#"><i class="fab fa-google-plus-g"></i></a></li>
                <li class="youtube"><a target="_blank" href="#"><i class="fab fa-youtube"></i></a></li>
                <li class="instagram"><a target="_blank" href="#"><i class="fab fa-instagram"></i></a></li>
                <li class="pinterest"><a target="_blank" href="#"><i class="fab fa-pinterest-p"></i></a></li>
                <li class="skype"><a target="_blank" href="#"><i class="fab fa-skype"></i></a></li>
                <li class="vk"><a target="_blank" rel="fa-icon-vk" href="#"><i class="fab fa-vk"></i></a></li>
             </ul>
        </div>
    </div>
</nav>

Итак здесь я изменил:

Цветовую схему меню, для этого заменил navbar-light bg-light на navbar-dark bg-dark см. getbootstrap.com/docs/4.3/components/navbar/#color-schemes
Убрал логотип (блок navbar-brand): getbootstrap.com/docs/4.3/components/navbar/#brand
Блок с формой form: getbootstrap.com/docs/4.3/components/navbar/#forms заменил на текстовый блок getbootstrap.com/docs/4.3/components/navbar/#text и добавил в него меню с шрифтовыми иконками.
подключил сами иконки <script defer src=»https://use.fontawesome.com/releases/v5.6.3/js/all.js» integrity=»sha384-EIHISlAOj4zgYieurP0SdoiBYfGJKkgWedPHH4jCzpCXLmzVsw1ouK59MuUtP4a1″ crossorigin=»anonymous»></script>.

Если сейчас посмотреть в браузере, то все это добро выглядит так.

Что здесь сразу не нравится мне: выделение активного элементы, тускловатый цвет неактивных элементов, кнопки друг на друга и т.д. давайте это исправим, для этого добавим следующие css строки

.navbar{padding:0} /* убираем стандартные отступы */
.navbar-dark .navbar-nav .nav-link{color:#fff;font-weight:600} /* меняем цвет ссылок в меню и толщину шрифта */
li.nav-item.active,li.nav-item:hover,li.nav-item:focus{background-color:#007bff} /* делаем заливку для активного этлементы и элементов при наведении */
.mom-social-icons li a{width:30px;height:30px;display:block;text-align:center;line-height:30px;font-size:18px;color:#f0f0f0} /* задаем оформление для ссылок элементов меню с соц сетями */
.twitter:hover{background-color:#1DA1F2} /* заливка при наведении на соц сеть */
.facebook:hover{background-color:#4267B2}
.gplus:hover{background-color:#CE463B}
.youtube:hover{background-color:#FF0000}
.instagram:hover{background-color:#D12E90}
.pinterest:hover{background-color:#C00111}
.skype:hover{background-color:#1EB7EC}
.vk:hover{background-color:#5181B8}

получаем

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

<nav id="navigation" class="navbar sticky-top navbar-expand-lg navbar-light bg-light" role="navigation">
    <div class="container">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Главная</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">CMS</a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">ImageCMS</a>
              <a class="dropdown-item" href="#">MODX Revo</a>
              <a class="dropdown-item" href="#">WordPress</a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#" tabindex="-1" aria-disabled="true">SEO</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">social media</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Сайтостроение</a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Основы</a>
              <a class="dropdown-item" href="#">Домен и хостинг</a>
              <a class="dropdown-item" href="#">Прочее</a>
            </div>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Инструментарий</a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Сервисы</a>
              <a class="dropdown-item" href="#">Программы</a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Монетизация</a>
          </li>
          </ul>
      </div>
      <ul class="nav nav-search">
          <li class="search">
              <a class="btn-search" href="javascript:;" title="поиск по сайту"><i class="fas fa-search"></i></a>
              <div class="search-box d-none">
                 <form class="navbar-form" action="#">
                     <div class="input-group">
                         <input type="text" class="form-control" placeholder="Поисковой запрос..." name="search" id="search" value="">
                         <input type="hidden" name="id" value="">
                         <span class="input-group-btn search">
                             <button class="btn btn-default" type="submit" value="sisea.search"><i class="fas fa-search"></i></button>
                         </span>
                     </div>
                  </form>
              </div> 
          </li>
       </ul>
    </div>
</nav>

здесь я

убрал логотип (блок navbar-brand)
у блок с формой form: getbootstrap.com/docs/4.3/components/navbar/#forms, заменил его на собственный блок
сделал меню липким (после прокрутки чтобы прилипало к верху, для этого добавил класс sticky-top: getbootstrap.com/docs/4.3/utilities/position/#sticky-top

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

в принципе неплохо, активные элементы подхватили выше добавленный css код, но цвет ссылок активных элементов не белый а черный, по сути не работает форма поиска (она должна выпадать), в мобильном виде при клике на тоглер (кнопку открытия меню), открывается сразу 2 меню:

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

Чтобы избавится от открытия сразу 2х меню нужно изменить атрибуты data-target, aria-controls и id меню

т.е. просто переименовываем их на уникальные к примеру для верхнего меню ставим navbarTop а для второго меню navbarTop2 (либо оставляем стандартное название).

Выпадающая по клику поисковая строка

Дорабатываем поисковую строку, для этого добавляем следующий css:

.nav-search{position:absolute;right:15px;top:0}
li.search{background:#007bff;border:1px solid #dfdfdf;border-left-width:0;border-top:0;border-bottom:0;height:40px;min-width:45px;line-height:42px;text-align:center;cursor:pointer}
li.search a{font-size:20px;color:#ffffff}
.search .search-box{right:0;left:auto;padding:11px;background-color:#f8f9fa;position:absolute;box-shadow:5px 5px rgba(91,91,91,0.2);width:274px;margin-top:-3px;z-index:22}
.btn-search{background-color:#007bff;border-radius:0 5px 5px 0;color:#fff;margin-top:-8px;}
.navbar>.container{position:relative}

и добавляем небольшой скрипт, который отвечает за открытие формы при клике

<script>$(document).ready(function(){
	$(".btn-search").click(function(){
		$(".d-none").toggleClass("d-block"); return false;
	});
});</script>

добавляем в конец документа, перед закрытием </body>.

Дорабатываем прочие меленькие недоработки

.navbar-light .navbar-nav .nav-link{color:#000;font-weight:600}
li.nav-item.active,li.nav-item:hover,li.nav-item:focus{background-color:#007bff}
li.nav-item.active a.nav-link,li.nav-item:hover a.nav-link,li.nav-item:focus a.nav-link,li.nav-item a.nav-link:hover,li.nav-item a.nav-link:focus{color:#fff!important}
.dropdown-menu{border-radius:0}
#navigation{border:1px solid #dfdfdf;border-left:0;border-right:0}
.navbar-text{position:absolute;top:-3px;right:15px}
.navbar-toggler{margin-left:15px}  
@media (min-width: 991px) {
.dropdown-toggle::after{display:block;margin-left:auto;margin-right:auto;vertical-align:0;width:3px}
}
@media (max-width: 991px) {
#navbarTop2{border-top:1px solid;margin:0 15px}
li.nav-item{padding:0 15px}
}
@media (max-width: 767px) {
#navbarTop{margin:0 15px}
}

посмотреть демо

скачать демо

< Как начать свой фриланс-бизнес и создавать сайты на заказ

Верстка шапки сайта при помощи Bootstrap 5 >