带有媒体查询的顶级可折叠菜单

Question

这是一个顶级菜单：

当浏览器宽度<＆lt; 1000px，我想：

• 隐藏3个右上方<input>字段（我在媒体查询中使用display:none实现了该字段）
• ＆＃34; Post＆＃34;按钮现在变成一个按钮，打开一个可折叠菜单，其中3个输入字段现在一个接一个地显示在一个新行中，如下所示：

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

您如何实现此类顶级菜单可折叠菜单？

＆＃13;

＆＃13;

* { 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; }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我只想更改媒体查询中当前菜单的位置＆lt; 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;}
    }