在響應中結合了2個菜單[左右]作爲一個響應

Question

我打算建立一個網站 - 主菜單有兩個菜單（左側和右側）以及它們之間的徽標，但我怎樣才能將這些菜單合併爲一個在迴應。希望你能給我一個示例代碼。

對不起我的英語不好。提前致謝。

Answer 1

最好的方法是事先編寫所有菜單，兩個單獨的菜單最初在桌面屏幕上顯示，但在CSS中給出display:none的組合菜單。然後在響應式媒體查詢中，在較小的屏幕尺寸下，將組合菜單設置爲display:block，並將另一組菜單設置爲display:none。

你不顯示你的HTML和CSS（如果你想在這篇文章後得到任何進一步的澄清，這樣我們可以看到你想要的東西），所以我不知道你的HTML和CSS你如何做你的菜單。但爲了說明這個想法，我將在兩個div中顯示一些非常簡單的僞html;你把你的菜單裏面標記它們：

<!-- this is pseudo-markup only! --> 
<div id="menu-large-screen">Home Menu       Features Contact</div> 
<div id="menu-small-screen">Home Menu Features Contact</div> 

而且你的CSS響應將是：

#menu-large-screen { display: block; } 
#menu-small-screen { display: none; } 

@media all and (max-width: 600px) /* 600px is just for an example */ 
{ 
    #menu-large-screen { display: none; } 
    #menu-small-screen { display: block; } 
} 

雙方的div將在HTML標記，一前一後。但只有一個會顯示，而不是顯示：當時沒有顯示特定的屏幕尺寸。另一個將不可見，並將在屏幕上不佔用空間。