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的解决方案更频繁，更灵活。

CSS将顶部菜单项移至汉堡菜单，以缩小屏幕尺寸，而无需复制项

1 个答案: