Top.Mail.Ru
НАПИШИТЕ НАМ
Спасибо за обратную связь!

Варианты дизайна главного меню

Подача информации на сайте во многом зависит от навигации. Поэтому при создании главного меню не нужно забывать о принципах UX-дизайна. Интерфейс должен быть функционален и понятен в соответствии с прошлым опытом пользователей. Но хотя стандартные варианты меню хороши, щепотку креатива порой внести хочется. В этой статье мы рассмотрим способы создания не только классической навигации, но и чего-то совершенно нового.
Время чтения: 6 мин
4 августа 2020 г.
Виды меню:
1) Фиксированное меню.
2) Меню "гамбургер".
3) Статичное меню поверх первого блока.
4) Двойное меню: одно статичное, другое появляется при скролле.
5) Боковое меню.
6) Меню - хлебные крошки.
7) "Вложенное меню", меню со вкладками (табами).
8) Многоуровневое меню.
9) И т.д.
1. Большое выпадающее меню "бургер" из ZeroBlock
В поисках вариантов новых решений для оформления навигации по одному из наших сайтов, мы решили остановиться на меню, сделанном по такому принципу. Преимущество его в том, что с ZeroBlock творить можно всё что угодно, расширяется пространство для мысли и творчества.
1
1. Для начала нужно создать блок ME403 и задать ему в настройках ширину 100vw.
2. Затем создадим ZeroBlock, выставим высоту 100%.
3. Добавляем блок Т123, в него вставляем скрипт.
4. Заменяем ID Zero var ZeroID = '#rec49228109';

Этот скрипт нужно вставить на страницу:
<style>
.t450__burger>img {
width: 70px;
}
.t450__burger {
width: auto;
height: auto;
}
.t450__close_icon {
width: 45px;
position: absolute;
right:30px;

}
.t450__close_icon {
width: 20;
height: 20;
}
.t450__burger>img{
-webkit-transition: .3s ease-out;
transition: .3s ease-out;
}
.t450__close_icon>img{
-webkit-transition: .1s ease-out;
transition: .1s ease-out;
}


.t450 {
-webkit-transition: transform ease-in-out 0.8s;
transition: transform ease-in-out 0.8s;
}
</style>

<script>
$(document).ready(function(){
var ZeroID = '#rec217237868';
$(".t450__container").empty();$(ZeroID).appendTo(".t450__container");
//Помещаем своё фото вместо иконки
$(".t450__burger").html("<img src='https://i.imgur.com/HHY2GLJ.png' imgfield='img'>");
$(ZeroID+" a").click(function(){ $(".t450__burger").click();});
});
$(".t450__close_icon").html("<img src='https://i.ibb.co/CMNBMRW/close1.png' imgfield='img'>");
$(ZeroID+" a").click(function(){ $(".t450__close_icon").click();});


</script>

Вы также можете поменять иконку "бургера". Для этого в скрипте вам необходимо будет поставить прямую ссылку на желаемое изображение, которые будет заменять предыдущий вариант.
2. Выпадающее меню из блоков FT302 и МЕ301 для экранов 980px +

Ещё один вариант для оформления навигации.
Также можно сделать классическое верхнее меню с выпадающим списком при наведении на любой из его пунктов с помощью блока ME601.
2
1. Создаём блок МЕ301 высотой 80px и ставим отображение от 980px.
2. Добавляем в него 3 пункта меню.
3. Далее добавляем 3 блока FT302.
4. Добавляем блок Т123 со скриптом, предоставленным ниже.
5. Заменяем ID меню МЕ301 #rec82569956
Этот скрипт нужно вставить на страницу:
<style>
/*Настройка высоты вкладок */
.t228__list_item {
height: 80px;
display: inline-block !important;
padding: 0 15px !important;

}
/*Настройка вкладок */
.t228 .t-menu__link-item {
height: inherit;
display: table-cell !important;
vertical-align: middle;
}
/*Цвет вкладок при наведении */
.t228__list_item:hover {
background:#171717;
-webkit-transition: all 0.35s;
transition: all 0.35s;
}
/*Настройка для блока FT302 */
[data-record-type="420"] {
position: fixed;
width: 100%;
top: 80px;
z-index: 990;
left: 0;
opacity: 0;
-webkit-transition: all 0.35s;
transition: all 0.35s;
visibility: hidden;
background: linear-gradient(to bottom, #171717 45%, #484848);
}
/*Появление меню при наведении на вкладку */
.t228__list_item:hover .mainmenu {
display:block !important;
opacity: 1;
visibility: visible;
}
</style>

<script>
$(document).ready(function(){
//Добавляем классы к блокам FT302
$('[data-record-type="420"]').addClass('mainmenu');
//Добавляем блоки FT302 к соответствующим вкладкам в меню с указанием ID этого менюfor(let i = 0; i < $(".mainmenu").length; i++){
$('.mainmenu:eq('+i+')').appendTo('#rec82569956 .t228__list_item:eq('+i+')');
};
});
</script>
Примеры сайтов с разным дизайном меню:
...
...
Меню сайта - это карта в беспросветном лесу или компас в Тихом океане. Оно структурирует информацию на сайте, помогает пользователям ориентироваться в ней. Являясь одним из важнейших элементов сайта, навигация требует к себе особого внимания.
4 августа 2020 г.
Читайте также: