Как выровнять горизонтальное меню по центру?
Содержание:
CSS
В файл styles.css добавим несколько стилей для всех элементов:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
Затем примените эти стили к header.
header {
height: 70px;
background-color: #22292F;
padding: 10px 0;
}
Теперь темная панель навигации растягивается на всю ширину окна просмотра.
Добавьте приведенные ниже стили к классу menu-wrap:
.menu-wrap {
display: flex;
justify-content: space-between;
padding: 0 15px;
}
Мы используем display:flex, чтобы все дочерние элементы занимали свободное пространство, доступное горизонтально. Свойству justify-content установлено значение space-between, чтобы расположить эти элементы как можно дальше друг от друга.
Стилизуем каждый из этих дочерних элементов один за другим.
.logo-img {
height: 50px;
}
.menu-icon {
font-size: 2.4em;
color: #ffffff;
line-height: 50px;
}
В результате мы получили правильно позиционированные логотип и иконку нужного размера. Теперь нужно на мобильных устройствах абсолютно позиционировать все пункты меню ниже панели. Сначала добавьте следующий код:
nav {
position: absolute;
background-color: #3D4852;
top:70px;
left:0;
width: 100%;
}
Теперь добавьте стили списка и ссылок:
nav ul {
list-style-type: none;
}
nav ul li {
padding: 0 15px;
}
nav ul li a {
display: inline-block;
padding: 12px;
/* Добавьте ниже свои пользовательские стили, чтобы изменить отображение ссылок */
color: #DAE1E7;
text-decoration: none;
letter-spacing: 0.05em;
}
Также добавьте для ссылок стили при наведении и фокуса:
nav ul li a:hover, nav ul li a:focus {
color: #eb6f4a;
}
Теперь в браузере отображается следующее:
Меню должно быть сначала скрыто и отображаться при нажатии на иконку. Для этого добавьте к элементу nav ul дополнительные стили max-height, overflow, а также transition:
nav ul li a:hover, nav ul li a:focus {
color: #eb6f4a;
}
Этот код скроет все меню, потому что для свойства max-height задано значение 0, а для свойства overflow:hidden. Мы не используем для скрытия меню display:none, потому что нам нужен эффект анимации скольжения меню вниз. Он может быть достигнут только с помощью свойства max-height.
CSS код меню
Для придания этому меню горизонтального положения, выравнивания по центру и соответствующего вида, напишем следующий CSS код:
#menu{list-style:none; width:500px; padding:0; margin: auto;}
#menu li{float:left; font:bold 14px Arial;}
#menu a{color:#666; display:block; height:40px; line-height:36px; padding:0px 10px 0px 10px; background:#eee; text-decoration:none;}
#menu a:hover{color:#fff; background:#888;}
На данном этапе получилось следующее:
Разбор полетов
Разберем все поэтапно, до каждой мелочи:
#menu {…} – С помощью этого выражения мы присваиваем стили для UL элемента, у которого id=menu.
list-style:none; – убираем маркеры (пульки), слева от каждого элемента в списке.
width:500px; – ширина меню 500 пикселей.
margin: auto; – выравнивает меню по центру страницы. Если не будет указана ширина, то выравнивания не произойдет, поэтому предыдущий параметр обязателен.
padding:0; – устанавливаем нулевые внутренние отступы. То есть убираем их вообще. Если не знаете что это дает, установите их в 20px и посмотрите, что измениться.
#menu li {…} – присваиваем стили для LI элементов.
float:left; – обтекание элемента по левой стороне. Это выражение придает меню горизонтального положения.
font:bold 14px Arial; – устанавливаем стиль для текста в самой короткой форме, bold – жирный текст, 14px – размер шрифта в пикселях, Arial – тип шрифта.
#menu a {…} – присваиваем стили для A элемента (ссылки).
color:#666; – темно-серый цвет шрифта.
display:block; — делаем элемент блочным. Это даст возможность присваивать высоту для элемента. В практическом аспекте, это делает кликабельным не только текст ссылки, ни и поле вокруг текста.
height:40px; – высота меню будет 40 пикселей.
line-height:36px; – высота верхней линии над текстом. Это дает возможность задавать вертикальное положение текста внутри блока. Мы используем это для выравнивания текста в вертикальном направлении.
padding:0px 10px 0px 10px; – делаем внутренние отступы слева и справа по 10 пикселей.
background:#eee; – устанавливаем серый цвет фона для элементов меню.
text-decoration:none; – убираем линию подчеркивающую ссылку.
#menu a:hover {…} – присваиваем стили для A элемента при наведении на нее мышки.
color:#fff; – меняем цвет текста на белый.
background:#888; – цвет фона меняем на темно серый.
Стилизуем top-line в main.sass.
Зададим фон у m-head картинкой.
Растянем изображения на всю ширину экрана min-height: 100vh.
При уменьшение экрана фон остается одинаковый, установим для экрана все пространство background-size: cover.
Чтобы вверх изображения прилипало к вверху зададим background-position: top center.
Всю верхнюю линию top-line сделаем пониже padding-top: 30px. Перейдем к стилизации логотипа.
- Логотип logo будет блочным элементом display: block с фиксированной шириной width: 100px. Внутренний элемент img будет width: 100%.
- В навигации nav у ul не будет точек сбоку list-style-type: none, уберем отступы. Для li сделаем в одну линию свойством display: inline-block. Оформим класс menu, сперва установим меню по центру text-align: center. У всех ссылок установим display: block и расстояния между пунктами меню установим padding: 10px 20px. Сделаем плавное изменение цвета при наведении переменной +mt (.5s), позже ее добавим в vars.sass. При наведении мышкой на пункт &:hover будет меняться цвет. Также будет третий цвет у ссылки, которая с классом активна &.active.
- Установим телефон phon по правому краю text-align: right. Для обертки wrap телефона и иконки сделаем жирный шрифт. Размер шрифта зададим в em это размер от шрифта у тега body font-size: 1.3em. Для иконки телефона fa применим position: relative и смещение от верха top: 2px. Отступ от номера до иконки margin-right: 10px. Класс call сделаем подчеркнутой линией border-bottom: 1px dashed red. Поближе линию сделаем путем добавления свойства display: inline-block и подберем line-height: 18px. При наведении мышкой сплошная линия будет пропадать text-decoration: none и подчеркнутая тоже border-bottom: transparent. Цвет ссылки станет красным.
Код в main.sass.
.m-head
background-size: cover
background-position: top center
min-height: 100vh
.top-line
padding-top: 30px
.logo
display: block
width: 100px
img
width: 100%
nav
ul
list-style-type: none
padding: 0
margin: 0
li
display: inline-block
.menu
text-align: center
>ul
>li
>a
font-size: 20px
text-decoration: none
display: block
padding: 10px 20px
color: blue
+mt(.5s)
&:hover
color: #555
&.active
a
color: #000
.phon
text-align: right
.wrap
font-size: 1.3em
font-weight: 800
.fa
font-size: 22px
position: relative
top: 2px
margin-right: 10px
.call
border-bottom: 1px dashed red
display: inline-block
line-height: 18px
+mt(.5s)
&:hover
text-decoration: none
border-bottom: transparent
color: red
.toggle-mnu
background-color: #000
display: block
width: 28px
height: 28px
|
1 |
.m-head background-sizecover background-positiontop center min-height100vh .top-line padding-top30px .logo displayblock width100px img width100% nav ul list-style-typenone padding margin li displayinline-block .menu text-aligncenter >ul >li >a font-size20px text-decorationnone displayblock padding10px20px colorblue +mt(.5s) &hover color#555 &.active a color#000 .phon text-alignright .wrap font-size1.3em font-weight800 .fa font-size22px positionrelative top2px margin-right10px .call border-bottom1pxdashed red displayinline-block line-height18px +mt(.5s) &hover text-decorationnone border-bottomtransparent colorred .toggle-mnu background-color#000 displayblock width28px height28px |
Делаем top-line адаптивный под разные экраны.
На больших экранах lg меню будет, на более меньших будет срывать свойсвом hidden-md, hidden-sm и hidden-xs прописываем в класс menu. Проверим как получилось в браузере.
Теперь сделаем замену меню для маленьких экранов с классом toggle-mnu и скрывать на больших экранах hidden-lg. Меню сделано как черный квадратик. Подробно о toggle-mnu.
Как сделать меню сайта
Если вы владелец бизнеса, можете поучаствовать на этапе сбора и структурирования информации о вашем бизнесе и услугах. Нужно ориентироваться на основные сценарии взаимодействия покупателя с продуктом. Например, для магазина обязательны:
- Каталог, где клиент сможет ознакомиться с ассортиментом продукции.
- Карточка товара даст более детальную информацию о предмете покупки.
- Корзина поможет купить.
- Сервисы доставки, удобной оплаты и т.д. помогут покупателю принять окончательное решение в вашу пользу.
- Вне зависимости от типа бизнеса должен быть раздел, в котором описаны ваши преимущества, сопутствующие товары и услуги.
Техническая часть ляжет на программиста. Если сайт разрабатывают на базе cms и шаблона, вы изначально можете увидеть, как будет выглядеть ваше будущее меню, какого оно будет цвета.
Реализацию меню может быть разной, важно соблюдать принципы четкой структуры и понятной навигации. Это ускорит поиск информации и заодно улучшит поведенческие факторы вашего веб-ресурса
Горизонтальное меню
После того как код был размечен, самое время приступить к работе со стилем. Следует заметить, что парные теги, использованные для каркаса по умолчанию, являются блочными, а значит, для создания как обычного, так и выпадающего горизонтального меню в CSS необходимо изменить тип элемента на строчный. Это можно сделать при помощи свойства display. Оно добавляется к элементу:
.menu li {
display: inline;
}
Так оно превращается в горизонтальное. Если подпунктов много, то они могут переместиться на новую строку без дополнительно указанных свойств. В этом случае применяют свойство для отображения пробелов и переноса текста. Nowrap сохраняет текст целиком, без переносов, а pre-wrap сохраняет пробелы из HTML и добавляет автоматические.
.menu li {
display: inline;
white-space: nowrap;
}
Чтобы не забивать строку сплошным текстом, информацию можно оформить по группам и создать дополнительное подменю, которое уже точно будет отображать все необходимое. Подменю может быть выпадающим или открытым.
ЕЩЁ
Полноэкранное видеоМодальное окноШкала времениИндикатор прокрутки Индикатор выполненияПанель навыковПолзунок диапазонаПодсказки при наведенииВсплывающие окнаСкладная секцияКалендарьВключить HTMLСписок делЗагрузчикиЗвездный рейтингПользовательский рейтингНаложениеКонтактные чипыКарточкиФлип-картаКарточка профиляКарточка товараОкно тревогиВыноска сообщенияПримечаниеМеткиКругиHR Горизонтальная линияКупонГруппа списковОтзывчивый текстВырезанный текстСветящийся текстФиксированный подвалЛипкий элементРавная высота столбцовОчистка поплавкаОтзывчивые поплавкиСнэк-бар/тостПолноэкранное режимЧертеж при прокруткеПлавная прокруткаГрадиент фонаЛипкий заголовокИзменить заголовок при прокруткеОтзывчивые столбцы ценПараллаксСоотношение сторонПереключатель нравится/не нравитсяПереключатель скрыть/показатьПереключаель текстаПереключатель классаДобавить классУдалить классАктивный классДревовидное представлениеУдалить свойствоАвтономный режим обнаруженияСделать скрытый элементПеренаправление веб страницыУвеличить при наведенииФлип-боксЭлемент вертикально по центруПереход при наведении курсораСтрелкиФигурыСсылка для скачиванияПолная высота элементаОкно браузераПользовательская полоса прокруткиРазличные устройстваЦвет заполнителяЦвет выделения текстаЦвет макераВертикальная линияАнимированные иконкиТаймер обратного отсчетаПишущая машинкаСтраница заставкиСообщение чатаВсплывающее окно чатаРазделенный экранРекомендацииСчетчик разделаСлайд-шоу цитатЗакрываемые злементы спискаТипичные точки прерыванияПеретаскиваемый HTML элементМедиа запросы JSПодсветка синтаксисаJS анимацииПолучить элементы Iframe
МЕНЮ
Панель иконокЗначок менюАккордеонВкладкиВертикальные вкладкиЗаголовки вкладокВкладки полностраничныеВкладки при наведенииВерхняя навигацияОтзывчивый верхний навигаторНавигация с иконкамиМеню поискаСтрока поискаФиксированная боковая панельАнимированные боковые панелиОтзывчивая боковая панельПолноэкранная навигация наложенияМеню Off-CanvasБоковые кнопки навигацииБоковая панель с иконкамиМеню с горизонтальной прокруткойВертикальное менюНижняя навигацияОтзывчивая нижняя навигацияГраницы навигацииМеню по правому краюСсылка меню по центруМеню равной шириныФиксированное менюСкольжение вниз по полосе прокруткиСкрыть меню при прокруткеУменьшить меню при прокруткеЛипкая навигацияНавигация на изображенияВыпадающее менюВыпадающий при кликеВыпадающее меню в навигацииВыпадающий список в боковой навигацииОтзывчивая навигация с выпадающимПодменю навигацияВсплывающее менюМега менюМобильное менюМеню занавесСвернуть боковой барСвернуть боковую панельПагинацияХлебные крошкиГруппа кнопокГруппа вертикальных кнопокЛипкий социальный барНавигация таблеткиОтзывчивый заголовок
Создание всплывающего раскрывающегося меню
Создайте раскрывающееся меню, которое появляется при нажатии пользователем кнопки.
Шаг 1) добавить HTML:
<div class=»dropdown»> <button onclick=»myFunction()» class=»dropbtn»>Dropdown</button>
<div id=»myDropdown» class=»dropdown-content»> <a href=»#»>Link
1</a>
<a href=»#»>Link 2</a> <a href=»#»>Link 3</a> </div></div>
Используйте любой элемент, чтобы открыть раскрывающееся меню, например <Button>, <a> или <p> элемент.
Используйте элемент контейнера (например, <div>) для создания раскрывающегося меню и добавления раскрывающихся ссылок внутри него.
Оберните элемент <div> вокруг кнопки и <div>, чтобы правильно расположить раскрывающееся меню с помощью CSS.
Шаг 2) добавить CSS:
/* Dropdown Button */.dropbtn {
background-color: #3498DB; color: white;
padding: 16px; font-size: 16px;
border: none; cursor: pointer;}/* Dropdown
button on hover & focus */.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;}/* The
container <div> — needed to position the dropdown content */.dropdown { position: relative; display:
inline-block;}/* Dropdown Content (Hidden by Default) */
.dropdown-content { display: none; position:
absolute; background-color: #f1f1f1;
min-width: 160px; box-shadow:
0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1;}/* Links inside the dropdown */
.dropdown-content a { color: black;
padding: 12px 16px; text-decoration: none;
display: block;}/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd}/* Show the dropdown menu (use JS to add this class to the .dropdown-content
container when the user clicks on the dropdown button) */.show {display:block;}
We have styled the dropdown button with a background-color, padding, hover
effect, etc.
The class uses , which is needed when we want the
dropdown content to be placed right below the dropdown button (using ).
The class holds the actual dropdown menu. It
is hidden by default, and will be displayed on hover (see below). Note the is set to 160px. Feel free to change
this. Tip: If you want the width of the dropdown content to be
as wide as the dropdown button, set the to 100% (and to
enable scroll on small screens).
Instead of using a border, we have used the property to make the
dropdown menu look like a «card». We also use z-index to place the dropdown in
front of other elements.
Шаг 3) добавить JavaScript:
/* When the user clicks on the button, toggle between hiding and showing
the dropdown content */function myFunction() {
document.getElementById(«myDropdown»).classList.toggle(«show»);}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) { if (!event.target.matches(‘.dropbtn’))
{ var dropdowns = document.getElementsByClassName(«dropdown-content»);
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns; if (openDropdown.classList.contains(‘show’))
{
openDropdown.classList.remove(‘show’); }
} }}
Выпадающее меню
Меню, которое мы будем создавать, будет иметь основные навигационные ссылки, расположенные в горизонтальной панели навигации, и подпункты, которые будут отображаться только после наведения курсора мыши на тот пункт меню, к которому эти подпункты относятся.
Сначала нам нужно создать HTML-структуру нашего меню. Основные навигационные ссылки мы поместим в маркированный список:
<ul id="navbar"> <li><a href="#">Главная</a></li> <li><a href="#">Новости</a></li> <li><a href="#">Контакты</a></li> <li><a href="#">О нас</a></li> </ul>
Подпункты мы разместим в отдельном списке, вложив его в элемент <li>, который содержит родительскую ссылку относительно подпунктов. Теперь мы имеем четкую структуру нашей будущей панели навигации:
<ul id="navbar">
<li><a href="#">Главная</a></li>
<li><a href="#">Новости</a></li>
<li><a href="#">Контакты</a>
<ul>
<li><a href="#">Адрес</a></li>
<li><a href="#">Телефон</a></li>
<li><a href="#">Email</a></li>
</ul>
</li>
<li><a href="#">О нас</a></li>
</ul>
Попробовать »
Теперь приступим к написанию CSS кода. Для начала необходимо скрыть список с подпунктами с помощью объявления display: none;, чтобы они не отображались на веб-странице все время. Для отображения подпунктов нам нужно чтобы при наведении на элемент <li> список снова был преобразован в блочный элемент:
#navbar ul { display: none; }
#navbar li:hover ul { display: block; }
Убираем у обоих списков отступы и маркеры, установленные по умолчанию. Элементы списка с навигационными ссылками делаем плавающими, формируя горизонтальное меню, но для элементов списка, содержащих подпункты задаем float: none;, чтобы они отображались друг под другом.
#navbar, #navbar ul {
margin: 0;
padding: 0;
list-style-type: none;
}
#navbar li { float: left; }
#navbar ul li { float: none; }
Затем нам нужно сделать так, чтобы наше выпадающее подменю не смещало контент, расположенный под панелью навигации, вниз. Для этого мы зададим пунктам списка position: relative;, а списку, содержащему подпункты position: absolute; и добавим свойство top со значением 100%, чтобы абсолютно позиционированное подменю отображалось точно под ссылкой.
#navbar ul {
display: none;
position: absolute;
top: 100%;
}
#navbar li {
float: left;
position: relative;
}
#navbar { height: 30px; }
Попробовать »
Высота для родительского списка была добавлена специально, так как браузеры не учитывают в качестве содержимого элемента плавающий контент, то без добавления высоты наш список будет проигнорирован браузером и контент, следующий за списком, будет обтекать наше меню.
Теперь нам осталось стилизовать оба наших списка и выпадающее меню будет готово:
#navbar ul {
display: none;
background-color: #f90;
position: absolute;
top: 100%;
}
#navbar li:hover ul { display: block; }
#navbar, #navbar ul {
margin: 0;
padding: 0;
list-style-type: none;
}
#navbar {
height: 30px;
background-color: #666;
padding-left: 25px;
min-width: 470px;
}
#navbar li {
float: left;
position: relative;
height: 100%;
}
#navbar li a {
display: block;
padding: 6px;
width: 100px;
color: #fff;
text-decoration: none;
text-align: center;
}
#navbar ul li { float: none; }
#navbar li:hover { background-color: #f90; }
#navbar ul li:hover { background-color: #666; }
Попробовать »
Изображения
СлайдшоуГалерея слайдшоуМодальные изображенияЛайтбоксАдаптивная сетка изображенияСетка изображенияГалерея изображений с вкладкамиНаложение при наведении курсора на изображениеСлайд наложенного изображенияZoom наложенного изображенияTitle наложенного изображенияИконка наложенного изображенияЭффекты изображенияЧерное и белое изображениеПозиция текста над изображениемТекстовые блоки над изображениемИзображение с прозрачным текстомФоновое изображение на всю страницуФорма на изображенииИмидж герояРазмытое фоновое изображение на всю страницуИзменение фона при прокруткеИзображения друг за другомОкруглые изображенияИзображения аватарыАдаптивные изображенияЦентрирование изображенийЭскизы изображенийПредставление команды на страницеЛипкое изображениеОтразить изображениеВстряхнуть изображениеГалерея портфолиоПортфолио с фильтрациейZoom изображенияУвеличительное стекло на изображенииСлайдер сравнения изображений
Как работает метод центрирования
Действие метода основано на относительном позиционировании плавающих блочных элементов один в другом. Для начала посмотрим, как изменяется размер элементов при смещении.
Элемент div
(блочный) без смещения растягивается на всю доступную ему ширину.
Но если мы будем смещать элемент div влево, он автоматически будет ужиматься до размеров своего содержимого. Сжатие является ключевым моментом в реализации данного метода центрирования меню. Оно помогает перемещать меню в правильную позицию.
Стандартное выровненное влево меню
Возьмем стандартное выровненное влево меню и будем шаг за шагом его переделывать. Для наглядности пункты окрашены в разные цвета, так что сразу понятно, что куда вложено.
Обратите внимание на следующие моменты:
- Элемент centeredmenu div
(голубой прямоугольник) смещается влево, но имеет ширину 100%, поэтому остается растянутым на всю страницу. - Элемент ul
(розовый прямоугольник) находится внутри элемента centeredmenu
div
и смещается влево. Это означает, что он будет ужат до ширины своего содержимого, то есть до суммарной ширины всех закладок. - Все элементы li (зеленые прямоугольники) находятся внутри элемента ul
и смещаются влево. Таким образом, они ужимаются до размеров ссылок в них и выстраиваются в одну горизонтальную линию. - Внутри каждой ссылки (оранжевые прямоугольники) выводится текст закладки: Закладка 1, Закладка 2 и так далее.
Смещаем положение неупорядоченного списка
Затем мы смещаем элемент ul
вправо на 50% с помощью свойства position:relative;
Когда элемент смещается с указанием процента при таких условиях важно помнить, что суммарная ширина содержащихся в нем элементов не является его шириной. В нашем случае смещение происходит на половину окна браузера (или доступного для вывода пространства).В результате наше меню начинается на середине окна и частично выходит за его пределы
И переходим к следующему шагу.
Сдвигаем положение всех элементов меню
Осталось только сдвинуть все элементы li
влево на 50%. Это 50% ширины нашего элемента ul (контейнера, который содержит меню). Таким образом, закладки смещаются точно на центр окна.
Несколько важных замечаний
При использовании данного метода центрирования надо помнить о нескольких важных моментах:
- Так как элемент ul
частично выходит за рамки окна, то это приводит к выводу полос прокрутки. Поэтому нужно использовать правило overflow:hidden; для элемента centeredmenu div
. Таким образом, выступающая часть элемента div
будет обрезана. - Так как элемент ul
не выровнен по закладкам, то нельзя использовать никаких визуальных стилей для него. Оставьте элемент ul без фонового цвета и без рамки, чтобы он стал полностью невидимым. А стили для закладок нужно использовать только для элементов li
. - Если нужно задать особенные стили для первой и последней закладки, нужно добавить класс для первого и последнего элементов li
, чтобы можно было стилизовать их индивидуально.
Первый вариант кода меню на PHP
Меню можно разделить на две части. Первая содержит информационный массив $array_menu, в который заносятся названия наших разделов с ссылками на разделы. Есть вариант забить эти данные в базу данных mySQL, но особо смысла в этом нет, поскольку выборка совсем небольшая, поэтому на скорость работы это никак не повлияет.
Вторая часть содержит вывод меню через цикл for. В цикле происходит сравнение адреса сайта с адресом из массива $array_menu. Если есть совпадение, то выводим очередной раздел меню со специальным классом active: <li class=»active»>, иначе просто <li>. Это позволяет нам выделить каким-то цветом ту часть меню, в котором находится пользователь. На мой взгляд, это необходимая вещь для любого сайта, чтобы пользователь мог понимать в каком разделе он находится.
Порядок следования в массиве будет сохранятся и при выводе меню на сайте. То есть массив надо заполнять в порядке, в котором нужно выводить меню.
Примечание:
В случае, если URL (адреса) заголовком разделов имеют вид:
/razdel_1
или такой
/razdel_1/nazvanie_razdela.html
то в array_menu нужно записывать точное совпадение:
$array_menu=’/razdel_1′
или для второго случая:
$array_menu=’/razdel_1/nazvanie_razdela.html’;
Как работает первый вариант меню?
Он подсвечивает меню только, если Вы находитесь по адресу заголовка раздела. Например, если адрес страницы будет /razdel_1/articles_1.html, то меню никак не будет подсвечиваться.
Второй вариант кода является модифицированным вариантом первого и предусматривает возможность подсвечивания меню даже в статьях, которые находятся в разделах.
