Как выровнять меню по центру плюс стилизация
Всем привет, друзья! Сегодня поговорим о том, как выровнять меню по центру и придать ему нормальный вид. За основу я буду брать bootstrap-верстку. И прежде чём мы начнём, хочу немного объяснить, почему так долго не было новых статей.
Последние недели были насыщены работой и новыми знакомствами в сфере программирования. Я, как волк-одиночка в работе, решил впустить в свои владения других волков. К сожалению, в этот период я не писал статьи, но очень хотелось это сделать. Постараюсь исправиться, и публиковать интересный контент хотя бы раз в неделю. Итак, приступим.
Введение и логика построения
У многих из вас есть проблемы с вёрсткой меню, а именно с центрированием. Я уже писал о создании меню в статье «Учимся использовать тег nav». И если вы прочли ту статью, то выровнять меню по центру будет проще простого.
Как правило, меню навигации создаётся внутри тега ul с классом nav. При этом каждый элемент списка должен быть обвернут тегом a. Далее, меню необходимо поместить в div с классом conteiner, а контейнер вложить в div с идентификатором, например, header-top. И даже header-top должен располагаться внутри тега header, который, в свою очередь, лежит внутри тега body. На практике это выглядит следующим образом:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Navigation</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="jquery-3.3.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="main.js"></script>
</head>
<body>
<header>
<div id="header-top">
<div class="container">
<ul class="d-flex nav menu-top">
<a href="#"><li>Home</li></a>
<a href="#"><li>News</li></a>
<a href="#"><li>Catalog</li></a>
<a href="#"><li>Delivery</li></a>
<a href="#"><li>About us</li></a>
<a href="#"><li>Donate</li></a>
</ul>
</div>
</div>
</header>
</body>
</html>
к оглавлению ↑
Меню без стилей
Кому лень проверять код, вот так выглядит меню без верстки:
Как видим, структура меню готова. Обратите внимание, я добавил к тегу ul свой класс menu-top, чтобы вносить правки в обход стилей bootstrap. Осталось подверстать меню навигации, чтобы оно имело достойный вид, например, вот такой:
Выравнивание
Привожу стили, которые я применил к меню:
#header-top {
background: rgb(52, 165, 52);
min-height: 100px;
display: flex;
align-items: center;
}
#header-top .menu-top {
justify-content: center;
}
#header-top .menu-top a {
text-decoration: none;
text-transform: uppercase;
color: #fff;
border-right: 1px solid #fff;
padding: 0 15px;
font-size: 18px;
font-weight: bold;
}
#header-top .menu-top a:last-child {
border-right: 0;
padding-right: 0;
}
#header-top a:hover {
color: rgb(174, 243, 174);
transition: 0.5s;
}
Я специально прописал минимальную высоту блока header-top, чтобы увеличить его размер по вертикали и продемонстрировать выравнивание меню по центру при помощи свойства align-items со значением center. Без вертикального выравнивания блок conteiner находится не посередине. А чтобы выровнять по центру элементы меню, я применил к блоку menu-top свойство justify-content, и тоже со значением center. В итоге: выравнивание меню по центру, как по вертикали так и по горизонтали, прошло успешно. А всё это реализовать нам помогло свойство display со значением flex. То есть мы сделали из блока header-top флекс контейнер, где вся магия с выравниванием становится реальной.
к оглавлению ↑Дополнительная стилизация
Дополнительно я сделал шрифт элементов меню жирным, задал им белый цвет, и немного изменил цвет при наведении, установив задержку смены состояний в 0.5 секунд. Задержка реализуется свойством transition. А также я добавил правую границу ссылкам, чтобы получилась чёрточка. Последнему элементу она не нужна, поэтому я убрал её с помощью псевдокласса last-child, и дополнительно убрал внутренний отступ.
Всем ссылкам я убрал подчёркивание при наведении и применил к ним верхний регистр.
к оглавлению ↑Без высоты и с отступами
Если не задавать высоту главного родителя в котором находится меню и не применять свойство align-items, советую прописать header-top внутренние отступы. Обычно отступы меряются в макете. А вот результат без высоты и с отступами в 15рх:
Как видим, нам всё равно удалось выровнять меню по центру без дополнительного свойства hight.
На заметку: не задавайте жёсткую высоту контейнера, если элементы внутри блока будут перестраиваться на меньших разрешениях экрана. Я задал нужную мне минимальную ширину, и вот результат:
Как видим адаптивность присутствует. А при жёсткой высоте наше меню будет выглядеть вот так:
При перестраивании меню чёрточки можно убрать правилом @media. Но при таком подходе будет пробел в несколько пикселей, где чёрточки исчезнут ещё до перестраивания меню. Этот нюанс убирается в bootstrap системой сеток (Grid system).
Чёрточки были внедрены в качестве примера. Но макетов где они используются довольно много, лучше будьте готовы.
Спасибо за внимание. Надеюсь статья была для вас полезной. Жду ваших комментариев.
А куда этот код вставлять? в Таблицу стилей?? и что именно нужно вставить, как это понять? Мой сайт вот http://foto-hudozhnik.site/
Ирина, Ваш сайта на WordPress и у Вас уже есть меню. Я привел пример для самописного сайта. Поэтому вставлять это никуда не нужно. Если вы желаете выровнять элементы меню в WordPress, то это уже другой вопрос.