Content Oriented Web
Make great presentations, longreads, and landing pages, as well as photo stories, blogs, lookbooks, and all other kinds of content oriented projects.
НАПИШИТЕ НАМ
Спасибо за обратную связь!
Варианты дизайна главного меню
Подача информации на сайте во многом зависит от навигации. Поэтому при создании главного меню не нужно забывать о принципах UX-дизайна. Интерфейс должен быть функционален и понятен в соответствии с прошлым опытом пользователей. Но хотя стандартные варианты меню хороши, щепотку креатива порой внести хочется. В этой статье мы рассмотрим способы создания не только классической навигации, но и чего-то совершенно нового.
Время чтения: 6 мин
4 августа 2020 г.
Виды меню:
1) Фиксированное меню.
2) Меню "гамбургер".
3) Статичное меню поверх первого блока.
4) Двойное меню: одно статичное, другое появляется при скролле.
2) Меню "гамбургер".
3) Статичное меню поверх первого блока.
4) Двойное меню: одно статичное, другое появляется при скролле.
5) Боковое меню.
6) Меню - хлебные крошки.
7) "Вложенное меню", меню со вкладками (табами).
8) Многоуровневое меню.
9) И т.д.
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>
.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.
Также можно сделать классическое верхнее меню с выпадающим списком при наведении на любой из его пунктов с помощью блока 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>
/*Настройка высоты вкладок */
.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 г.
Error get alias