将响应式菜单分成两列

Posted 2023-03-06

【中文标题】将响应式菜单分成两列

【英文标题】：Split responsive menu into two coloumns

【发布时间】：2017-11-01 20:32:47

【问题描述】：

这是我正在开发的网站http://www.jokerleb.com/，我正在使用这个https://responsive.menu，免费版本。它会出现在 400 像素或更小的设备上。

如何将它的列分成 2 列？

如果可能的话，不知道如何编辑 CSS 以使其看起来正确。

【问题讨论】：

您实际上会想在 *** 上发布此内容，这是此站点的姊妹站点。 SO 处理一般编程问题以及 CSS 等。该网站专门用于 WordPress 开发。

@belinus 我已将其标记为迁移，感谢您通知我，版主将查看并决定

您目前使用的代码在哪里？而您只是想在responsive.menu 上的“免费”示例中滑出的响应式菜单中创建 2 列？

尝试在您的 css 中使用媒体查询取决于您的设备宽度

@MichaelCoker 这些示例没有提供图片中的设计，我不知道代码在哪里，很难在检查元素中定位 css。插件不多说

【参考方案1】：

将这些行添加到您的代码中：

@media screen and (max-width: 400px)
    #responsive-menu-container
        width:100%;
    

    #responsive-menu 
        display: flex;
        flex-wrap: wrap;
    

    #responsive-menu li
        width:50%;
    

它对我有用。

【参考方案2】：

你会想使用media queries，所以这样的东西应该可以为你做：

<style>
@media screen and (max-width: 400px) 
     #responsive-menu-container li.responsive-menu-item 
         width: 50%;
         display: inline-block;
     

</style>

请注意，您可能需要稍微尝试一下这个 CSS，因为宽度会根据 padding、margin 和 display 类型而有所不同。如果您提供 CSS 示例（或者更好的是 fiddle），我可以更准确地为您提供帮助。

点击类别按钮后，上面的行使其看起来像这样：

如果您更喜欢整个宽度，请将其包含在您的 @media 选项中：

#responsive-menu-container 
    width:100%;

【讨论】：

不知道代码在哪里，很难在检查元素中找到 css。插件不多说

您要编辑的是menu-header 列表吗？如果是这样，我在@media 部分中有.row，我会用#menu-header li.menu-item 替换它

我试过了，它目前在 css 中，我在 @media screen and (max-width: 400px) 中使用它没有工作

@Lynob 我更新了我的答案并附上了截图。