css - 带有媒体查询的顶部可折叠菜单

Question

这是一个顶级菜单:

当浏览器宽度 < 1000px 时，我想:

• 隐藏右上角的 3 <input>字段(我在媒体查询中使用 display:none 实现)
• “发布”按钮现在变成了一个打开可折叠菜单的按钮，其中 3 个输入字段现在一个接一个地显示在新的一行中，如下所示:

但我认为这需要用 CSS/媒体查询完全改变 DOM 元素的顺序。这可能/这里需要吗？

您将如何实现这样的顶部菜单可折叠菜单？

* { margin: 0; padding: 0; }
a { text-decoration: none; }
img { border: 0; }
body { overflow: hidden; height: 100%; font-family: arial; }
#header { border-bottom: 1px solid #dedede; height: 60px; margin: 0; display: -ms-flexbox; display: -webkit-flex; display: flex; }
#topleft { border-right: 1px solid #dedede; padding: 0px; float: left; -ms-flex: 0 0 155px; -webkit-flex: 0 0 155px; flex: 0 0 155px; height:100%; }
#topmid { border-right: 1px solid #dedede; float: left; -ms-flex: 0 0 40%; -webkit-flex: 0 0 40%; flex: 0 0 40%; height:100%; transition: all 0.3s ease-in-out; }
#topright { -ms-flex: 1; -webkit-flex: 1; flex: 1; position: relative; } 
#logo { color: #ff0048; font-family: arial; font-size: 1.625em; font-weight: bold; padding-top: 14px; padding-left: 7px; }
#snif { margin-left: 0px; border: 0; margin-top: 22px; outline: 0px !important; width: calc(100% - 55px);}
#searchpng { background: #ffffff url("search.png") no-repeat left top; width: 40px; height: 30px; float:left; margin: 17 0 10 10px; }
.post { border: 1px solid #c4c4c4; padding: 5 2 5 10px; border-radius: 2px; }
#input1 { margin-left: 12px; width: calc(40% - 75px); position: relative; top:-7px; }
#input2 { margin-left: 0px; margin-top: 22px; width: calc(35% - 75px); position: relative; top:-7px; }
#input3 { width: calc(35% - 75px); position: relative; top:-7px; max-width: 230px;}
#deposer { background-color: #fb0149; color: white; padding: 6 10 5 10px; border-radius: 2px;  position: relative; top:-7px; width: 65px; display: inline-block; text-align: center; margin-left: 5px; font-size: 0.875em; font-weight: bold; }
#spacer { max-width: 15px; width: calc(100% - 552px); display: inline-block; }
@media (max-width: 1000px) { 
    #topmid { -webkit-flex: 0 0 30%; -ms-flex: 0 0 30%; flex: 0 0 30%; }
    body { overflow-y: scroll; }
}

<div id="header">
  <div id="topleft" class="unselectable">
    <div id="logo"><a href="/"><img src="logo.png" /></a></div>
  </div>
  <div id="topmid">
    <div id="searchpng"></div>
    <input type="text" placeholder="Lorem ipsum" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Lorem ipsum'" autocomplete="off" id="snif"></input>
  </div>
  <div id="topright" class="unselectable">
    <input id="input1" class="post" type="textarea" placeholder="" autocomplete="off"/>
    <input id="input2" class="post" type="textarea" placeholder="" autocomplete="off"/>
    <input id="input3" class="post unselectable" placeholder="" value="" autocomplete="off"/>
    <a href="" id="deposer">Post</a>
  </div>
</div>

<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Answer 1

我只想将当前菜单在媒体查询中的位置更改为 <1000px。

您还可以创建新的 html 元素并将它们设置为 display:none 直到媒体查询被激活，并将它们设置为 display:block 或您想要的任何内容。

添加了 html:

<div id="mobile-topright" class="unselectable">
<input id="input1" class="post" type="textarea" placeholder="" autocomplete="off"/></div>
    <input id="input2" class="post" type="textarea" placeholder="" autocomplete="off"/>
    <input id="input3" class="post unselectable" placeholder="" value="" autocomplete="off"/>
    <a href="" id="deposer">Post</a>
  </div>

添加了 CSS:

@media (max-width: 1000px) { 
    #topmid { -webkit-flex: 0 0 30%; -ms-flex: 0 0 30%; flex: 0 0 30%; }
    body { overflow-y: scroll; }
    #topright {display:none;}
    #mobile-topright {margin-top:5%;
    }
    #input1, #input2, #input3 {width:60%;
    max-width:60%;
    margin:0 auto;
    padding:5px;}
    }