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

Question

У меня есть мини-меню с несколькими ссылками, которые на экранах планшетов и мобильных устройств должны быть скрыты, что хорошо, я делаю это с css и медиа-запросами, но у меня есть еще одно главное меню с различными ссылками и на обычном экране. размеры отображаются как расширенные, но на планшете и мобильном телефоне отображаются в виде скрытого интерактивного меню гамбургера. Я хочу на планшет и мобильный размер, когда ссылки из мини-меню скрыты, чтобы стать частью главного меню. Я знаю, что должен создать в своем файле. js какой-то файл для l oop, который на планшетах и ​​мобильных устройствах будет захватывать пункты меню из меню minu и добавлять их в главное меню, но не совсем уверен, как это сделать. что если кто-то, пожалуйста, может помочь мне с каркасами кода, как это будет здорово.

Спасибо!

Answer 1

Я бы порекомендовал просто поместить в главное меню ссылки, которые вы хотите видеть на мобильном телефоне, и добавить класс к тем ссылкам, которые будут отображаться только на мобильном телефоне. Если это просто простая ссылка, она должна выполнить эту работу.

<ul class="main-menu">
  <li>always visible<li>

  <li>always visible<li>

  <li class="visible-mobile">only visible on mobile<li>

  <li>always visible<li>
</ul>

Тогда в вашем css:

.main-menu .visible-mobile { display: none }

@media (max-width: ...) {
   .main-menu .visible-mobile { display: block }     
}

Если вы все еще предпочитаете делать это с javascript, вот один из способов сделать это

const mainMenu = document.querySelector('.main-menu');
const minuMenu = document.querySelector('.mini-menu');
const mobileBreakpoint = 767; // put your mobile breakpoint here
const isMobile = window.innerWidth < mobileBreakpoint; 

if ( isMobile ) {
    const listItems = miniMenu.querySelectorAll('li');
    mainMenu.appendChild(listItems);
}