Как сделать адаптацию для хедера?



@patsooo

Подскажите, пожалуйста, как сделать адаптацию для хедера так как на картинке.
Чтобы элементы прятались в габургер по очереди?

60aabd6d5fad1363605359.jpeg

Как все сразу спрятать я знаю, но меня интересует именно по очереди. Спасибо)


Решения вопроса 0


Ответы на вопрос 3



@LenovoId

Не знаю вариант или нет но посмотрите: https://codepen.io/topicstarter/pen/ExWmPOx

я изначально хотел сделать на гридах без абсолютов … но не получилось
не проверял на мобилах но сегодня проверю обязательно исправлю косяки

Хотя чисто на абсолютах нормально получается: https://codepen.io/topicstarter/pen/WNpjwMq



@AntonLitvinenko

Вот небольшой пример скрипта, разметку не даю, имею меню в котором есть верхнее меню и нижнее меню. нижнее сворачивается на 991, а верхнее переносится к нижнему на 768

60ab94c7854bf921458740.jpeg

60ab94d50eb81237821324.jpeg

60ab94e44b3c4843563026.jpeg

// Функция задержки при ресайзе
$(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 посмотреть может найдешь ответ)

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *