结合2个菜单[左和右]作为响应中的一个

Question

我要建立一个网站 - 主菜单有2个菜单（左右）和它们之间的徽标，但我如何将这些菜单组合成一个响应式菜单。希望你能给我一个示例代码。

抱歉我的英语不好。提前谢谢。

Answer 1

最好的方法是事先对所有菜单进行编程，最初在桌面屏幕上显示两个单独的菜单，但在CSS中给出display:none的组合菜单。然后在响应式媒体查询中，在较小的屏幕尺寸下，将组合菜单设置为display:block，并将另一组2个菜单设置为display:none。

你没有显示你的HTML和CSS（如果你想在这篇文章之后得到任何进一步的澄清，那么将它们添加到你的问题中会很好，所以我们可以看到你想要的东西），所以我不会＆＃39 ;我知道你是如何做菜单的。但为了说明这个想法，我只会在两个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标记中。但是只有一个会显示，不的那个显示：当时特定的屏幕尺寸没有。另一个将不可见，并且屏幕上不会占用任何空间。