顶部可折叠菜单查询

Question

这里是一个顶级菜单：

当浏览器的宽度是< 1000像素，我想：

• 隐藏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

我只想改变对媒体查询当前菜单的位置< 1000像素。

您还可以创建新的html元素，并将它们设置为display：none，直到媒体查询被激活，并将它们设置为显示：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;} 
    }