Форум

kvizor34 · #1 (**permalink**) 08.02.2018, 11:22

Задача следующая:
Есть макет, в своём первоначальном виде, имеет боковую менюшку. В адаптиве эта менюшка через медиа запрос прячется путём получения left: -192px. В этом же запросе появляется две кнопки для открытия и закрытия менюшки.

Скрипт:

/* Открытие меню */
    $('.nav-toggle').click(function() {
        $('.sidebar').animate({
            left: '0'
        }, 200);
    });


/* Закрытие меню */
    $('.nav-toggle2').click(function() {
        $('.sidebar').animate({
            left: '-192px'
        }, 200);
    });

Всё работает... НО
при масштабировании к первоначальной версии, свойства остаются, т.е. если я в адаптиве скрыл менюшку, а потом отскролил экран, она останется скрытой...

Я понял что применяются инлайновые стили, в связи с этим у меня вопрос, как реализовать данный функционал таким образом, чтобы макет работал так как задуманно главным файлом стилей? Может как то заставить работать скрипты при определённом разрешении, а при его изменении определённые стили сбрасывались? Другими словами - как мне подружить адаптив с jquery?

j0hnik · #2 (**permalink**) 08.02.2018, 11:40

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>

	.sidebar{
		position: relative;
		width: 100px;
		height: 100px;
		background-color: red;
		left: 0;
		transition: 1s;
	}

		@media only screen and (max-width:800px) { 
	.sidebar{
		left: -192px;
	}
}
	</style>
</head>
<body>
<div class="sidebar"></div>
</body>
</html>

в чем сложность?

kvizor34 · #3 (**permalink**) 08.02.2018, 11:49

Сообщение от j0hnik

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>

	.sidebar{
		position: relative;
		width: 100px;
		height: 100px;
		background-color: red;
		left: 0;
		transition: 1s;
	}

		@media only screen and (max-width:800px) { 
	.sidebar{
		left: -192px;
	}
}
	</style>
</head>
<body>
<div class="sidebar"></div>
</body>
</html>

в чем сложность?

Ещё раз повторяю - в ПК версии меню отображается по умолчанию, а в мобильной версии прячется и вылезает по нажатию на кнопку, которая тоже появляется только в мобильной версии.
Вы написали код который демонстрирует работу медиа запросов, я знаю как работают медиа запросы, у меня другой вопрос.

j0hnik · #4 (**permalink**) 08.02.2018, 12:17

Сообщение от kvizor34

Может как то заставить работать скрипты при определённом разрешении, а при его изменении определённые стили сбрасывались? Другими словами - как мне подружить адаптив с jquery?

window.matchMedia('(max-width: 600px)').addListener(e=>{
		if (e.matches) alert();
	});

может есть медиа события есть события resize.

kvizor34 · #5 (**permalink**) 08.02.2018, 12:21

Сообщение от j0hnik

window.matchMedia('(max-width: 600px)').addListener(e=>{
		if (e.matches) alert();
	});

может есть медиа события есть события resize.

Понял, спасибо! Сейчас попробую!

kvizor34 · #6 (**permalink**) 08.02.2018, 13:10

Да действительно заработало!)
Вот что получилось в итоге:

var handleMatchMedia = function(mediaQuery) {
    if (mediaQuery.matches) {
		
	/* При ширине меньше чем 768px скрипт прячет менюшку */
		$('.sidebar').css('left','-192px')
		
	/* Открытие меню кнопкой*/
		$('.nav-toggle').click(function() {
			$('.sidebar').animate({
				left: '0'
			}, 200);
		});
		
	/* Закрытие меню другой кнопкой*/
		$('.nav-toggle2').click(function() {
			$('.sidebar').animate({
				left: '-192px'
			}, 200);
		});
		
	/* При ширине выше чем 768px менюшка отображается */
    } else {
		$('.sidebar').css('left','0')
    }
},
mql = window.matchMedia('all and (max-width: 768px)');
handleMatchMedia(mql);
mql.addListener(handleMatchMedia);

У меня возник другой вопрос, появилась необходимость сделать выборку элемента таким образом, чтобы взять дочерний элемент предыдущего соседа... Мне на ум пришла строчка $(this).prev().$('.class')
Но консоль выдаёт кучу ошибок на неё, как быть?)

j0hnik · #7 (**permalink**) 08.02.2018, 13:14

Сообщение от kvizor34

дочерний элемент предыдущего соседа...

$(this).prev().children('.class')

kvizor34 · #8 (**permalink**) 08.02.2018, 13:18

УРААААА!!!
Заработало! Спасибо тебе, мудрый человек

Форум

Справочник

Discord чат

Курсы javascript