将 2 个菜单 [左右] 组合为一个响应式

Question

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

对不起，我的英语不好。提前致谢。

Answer 1

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

你没有显示你的 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 标记中。但只有一个会显示，即 not display:none 用于当时的特定屏幕尺寸。另一个将不可见，并且不会占用屏幕空间。