@patsooo
Подскажите, пожалуйста, как сделать адаптацию для хедера так как на картинке.
Чтобы элементы прятались в габургер по очереди?
Чтобы элементы прятались в габургер по очереди?
Как все сразу спрятать я знаю, но меня интересует именно по очереди. Спасибо)
Решения вопроса 0
Ответы на вопрос 3
@LenovoId
Не знаю вариант или нет но посмотрите: https://codepen.io/topicstarter/pen/ExWmPOx
я изначально хотел сделать на гридах без абсолютов … но не получилось
не проверял на мобилах но сегодня проверю обязательно исправлю косяки
Хотя чисто на абсолютах нормально получается: https://codepen.io/topicstarter/pen/WNpjwMq
@AntonLitvinenko
Вот небольшой пример скрипта, разметку не даю, имею меню в котором есть верхнее меню и нижнее меню. нижнее сворачивается на 991, а верхнее переносится к нижнему на 768
// Функция задержки при ресайзе
$(function() {
var resizeEnd;
$(window).on('resize', function() {
clearTimeout(resizeEnd);
resizeEnd = setTimeout(function() {
$(window).trigger('resize-end');
}, 500);
});
});
$(window).on('resize-end', function() {
adaptiveHeader();
});
adaptiveHeader();
function adaptiveHeader() {
var w = $(window).outerWidth();
var h = $(window).outerHeight();
replaceHeader(w, h);
}
function replaceHeader(w, h) {
var headerInner = $('.header-inner');
var headerTop = $('.header-top');
var mainNav = $('.main-navigation');
if(w < 768){
if(!headerTop.hasClass('mobile')) {
headerTop.addClass('mobile').appendTo(mainNav);
}
} else {
if(headerTop.hasClass('mobile')) {
headerTop.removeClass('mobile').prependTo(headerInner);
}
}
}
@mr23
слушай, попробуй solvery.io/blog посмотреть может найдешь ответ)