javascript - CSS 将顶部菜单项移动到汉堡菜单以适应较小的屏幕尺寸而不重复元素

Question

我在顶部导航栏中有元素。随着屏幕尺寸变小，我想将不太重要的东西移到汉堡菜单中。我想先移动不太重要的元素，而不仅仅是从右边开始，所以要按确定的顺序移动。

我是使用 CSS 媒体查询完成的。通过隐藏顶部元素并同时在汉堡菜单中显示菜单。问题是我必须把所有东西都吃两次，一次在顶部，一次在汉堡包。也可以在这里找到:https://jsfiddle.net/fqxndrhy/

document.getElementById('hamburger').onclick = function() {
  document.getElementById('mobile_menu').classList.toggle('show');
}

body {
  margin: 0;
}
nav {
  display: flex;
  position: sticky;
  left: 0;
  top: 0;
  width: 100vw;
}

nav>section {
  border: 1px solid red;
}

#mobile_menu {
  display: none;
  position: fixed;
  top: 1cm;
  right: 0;
  border: 1px solid green;
  display: none;
  flex-direction: column;
  color: black;
  background-color: white;
}

#mobile_menu.show {
  display: flex;
}

#desktop1 {
  flex: 1;
}

/* hiding certain items at smaller resolutions */

#mobile1,
#mobile2,
#mobile3,
#mobile4,
#mobile5,
#hamburger {
  display: none;
}

@media (max-width: 1000px) {
  #desktop2 {
    display: none;
  }
  #mobile2,
  #hamburger {
    display: initial;
  }
}

@media (max-width: 900px) {
  #desktop5 {
    display: none;
  }
  #mobile5 {
    display: initial;
  }
}

@media (max-width: 800px) {
  #desktop3,
  #desktop4 {
    display: none;
  }
  #mobile3,
  #mobile4 {
    display: initial;
  }
}

<nav>
  <section id="desktop1">desktop1</section>
  <section id="desktop2">desktop2</section>
  <section id="desktop3">desktop3</section>
  <section id="desktop4">desktop4</section>
  <section id="desktop5">desktop5</section>
  <button id="hamburger">☰</button>
</nav>

<div id="mobile_menu">
  <section id="mobile1">mobile1</section>
  <section id="mobile2">mobile2</section>
  <section id="mobile3">mobile3</section>
  <section id="mobile4">mobile4</section>
  <section id="mobile5">mobile5</section>
</div>

Open it in separate window and shrink browser width to hide top items. Items are hiding in random order and appearing in hamburger menu (desktop2 at 1000px width, desktop5 at 900px width, desktop3 and desktop4 at 800px width

是否有可能避免这种口是心非？我做了一些尝试，但它们非常复杂，我正在寻找一个简单、可靠的解决方案吗？

Answer 1

你可以做到，但使用复选框有点小技巧

body {
        margin: 0;
    }
    nav {
        display: flex;
        position: sticky;
        left: 0;
        top: 0;
        width: 100vw;
    }

    #mobile_menu {
        display: flex;
        flex-direction: row-reverse;
    }

    #mobile_menu>* {
        flex: 1;
    }

    #hamburger {
        width: 0;
        height: 0;
        overflow: hidden;
        position: absolute;
        padding: 0;
        margin: 0;
    }



    @media (max-width: 1000px) {
        #hamburger, label {
            display: inline-block;
        }

        #mobile_menu section {
            display: none;
        }

        #hamburger:checked ~ section {
            display: inline-block;
        }
    }

    @media (min-width: 1000px) {
        #hamburger, label{
            display: none;
        }

        #mobile_menu section {
            display: inline-block;
        }
    }

<div id="mobile_menu">
    <label for="hamburger">☰</label>
    <input type="checkbox" id="hamburger" />
    <section id="mobile1">mobile1</section>
    <section id="mobile2">mobile2</section>
    <section id="mobile3">mobile3</section>
    <section id="mobile4">mobile4</section>
    <section id="mobile5">mobile5</section>
</div>

我在这里做的是根据分辨率显示隐藏汉堡包，在移动版本中我使用兄弟和 :checked 选择器的组合显示/隐藏元素

这只是 CSS 解决方案，但通常 JavaScript 的解决方案更常见且更灵活。