Форум

serhio11 · #1 (**permalink**) 29.11.2017, 11:12

Здравствуйте!
Имеется два меню на странице:

<div class="header">
	<ul class="menu">
		<li><a href="#">Пункт 1</a></li>
		<li><a href="#">Пункт 1</a></li>
		<li><a href="#">Пункт 2</a></li>
	</ul>
</div>

<div class="sidebar">
	<ul class="menu">
		<li><a href="#">Пункт 1</a></li>
		<li><a href="#">Пункт 1</a></li>
		<li><a href="#">Пункт 2</a></li>
	</ul>
</div>

Необходимо, если разрешение экрана меньше 768px, то пункты меню в блоке с классом sidebar переносились в меню в блоке с классом header. Причем, если страница открывается на планшете с вертикальной ориентацией экрана, а затем повернули планшет горизонтально и разрешение экрана стало больше 768px, то пункты меню должны вернуться на место.

Вот как это можно сделать?

В этой ветке:
https://javascript.ru/forum/misc/441...gojj-blok.html
есть пример по перемещению содержимого блока. Переделал его под себя, получилось так:

if (screen.width <= 768) {
	var one = document.querySelector('.sidebar ul.menu'),
    two = document.querySelector('.header ul.menu');
	
	while (one.lastChild) {
		two.insertBefore(one.lastChild, two.firstChild);
	}	
}

onresize = function(){
	if (screen.width <= 768) {
		var one = document.querySelector('.sidebar ul.menu'),
		two = document.querySelector('.header ul.menu');
		
		while (one.lastChild) {
			two.insertBefore(one.lastChild, two.firstChild);
		}	
	} 
	else {
		// Вот тут надо как-то вернуть всё обратно!
	}
}

Или может быть вообще как-то по другому нужно делать?
Новичок в JS, опыта нет - сам не соображу))

рони · #2 (**permalink**) 29.11.2017, 11:43

serhio11,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>

  <script>
window.addEventListener("DOMContentLoaded", function() {
    var sidebar = document.querySelector(".sidebar ul.menu"),
        header = document.querySelector(".header ul.menu"),
        li = sidebar.querySelectorAll("li");

    function resizeMenu() {
        var parent = screen.width <= 768 ? header : sidebar;
        [].forEach.call(li, function(el) {
            parent.appendChild(el)
        })
    }
    resizeMenu();
    window.addEventListener("resize", resizeMenu, false)
}, false);
  </script>
</head>

<body>
<div class="header">
  <ul class="menu">
    <li><a href="#">Пункт 1</a></li>
    <li><a href="#">Пункт 1</a></li>
    <li><a href="#">Пункт 2</a></li>
  </ul>
</div>

<div class="sidebar">
  <ul class="menu">
    <li><a href="#">Пункт 1</a></li>
    <li><a href="#">Пункт 1</a></li>
    <li><a href="#">Пункт 2</a></li>
  </ul>
</div>


</body>
</html>

serhio11 · #3 (**permalink**) 29.11.2017, 12:15

О! Работает! Спасибо!

Только если ещё раз повторно сменить ориентацию экрана, то меню из сайдбара в хедер уже не переносятся!

serhio11 · #4 (**permalink**) 29.11.2017, 12:33

Или если изначально разрешение было больше 768px, а потом экран повернули и стало меньше, то пункты меню из сайдбара в хедер не переносятся!

рони · #5 (**permalink**) 29.11.2017, 12:46

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

Только если ещё раз повторно сменить ориентацию экрана, то меню из сайдбара в хедер уже не переносятся!

может добавить так?

window.addEventListener("resize", resizeMenu, false);
    window.addEventListener("deviceorientation", resizeMenu, false);
    window.addEventListener("MozOrientation", resizeMenu, false);

serhio11 · #6 (**permalink**) 29.11.2017, 12:59

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

может добавить так?

window.addEventListener("resize", resizeMenu, false);
    window.addEventListener("deviceorientation", resizeMenu, false);
    window.addEventListener("MozOrientation", resizeMenu, false);

Вот сейчас лучше стало. Но почему то не всегда срабатывает. Т.е. при смене ориентации экрана, меню иногда из сайдбара в хедер не переносится! Но чаще переносится, чем нет))

рони · #7 (**permalink**) 29.11.2017, 13:12

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

Но почему то не всегда срабатывает

незнаю, не телепат.

Форум

Справочник

Discord чат

Курсы javascript