Вход

Просмотр полной версии : Объединить два меню в одно!

serhio11
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/44179-kak-peremestit-soderzhimoe-bloka-v-drugojj-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, опыта нет - сам не соображу))
рони
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
29.11.2017, 12:15
О! Работает! Спасибо!

Только если ещё раз повторно сменить ориентацию экрана, то меню из сайдбара в хедер уже не переносятся!
serhio11
29.11.2017, 12:33
Или если изначально разрешение было больше 768px, а потом экран повернули и стало меньше, то пункты меню из сайдбара в хедер не переносятся!
рони
29.11.2017, 12:46
Только если ещё раз повторно сменить ориентацию экрана, то меню из сайдбара в хедер уже не переносятся!
может добавить так?
window.addEventListener("resize", resizeMenu, false);
window.addEventListener("deviceorientation", resizeMenu, false);
window.addEventListener("MozOrientation", resizeMenu, false);
serhio11
29.11.2017, 12:59
может добавить так?
window.addEventListener("resize", resizeMenu, false);
window.addEventListener("deviceorientation", resizeMenu, false);
window.addEventListener("MozOrientation", resizeMenu, false);

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