使侧边菜单具有动态列答案

【问题标题】：Make side menu have dynamic columns使侧边菜单具有动态列
【发布时间】：2016-12-14 16:40:53
【问题描述】：

我发现了这个出色的基于图标的示例侧边菜单，codepen http://codepen.io/reecegeorge/pen/JuHLq。

如果您以底部的“齿轮”图标为例，当您将鼠标悬停在它上面时会显示一个子菜单。这很好，但是在您有很多项目的情况下，2 列将是有利的。我修改了源代码（quick n'dirty）并在http://codepen.io/anon/pen/bBQbQv 有一个新的codepen。这现在添加了第二列。

添加了 HTML

<ul class="sidemenu-sub sidemenu-sub-sub">
    <li class="text">
       <h4>&nbsp;</h4>
    </li>

    <li><a href="#secondcol1">Second column</a></li>
</ul>

添加了 CSS

.sidemenu-sub-sub {
  margin-left:  106px;
  width: 178.5px !important;
}

我的问题是，无需彻底检查，是否有一段简单的 CSS（或 JS（可以是 jQuery））仅在需要时才显示第二列。例如，如果用户窗口很小，则第 1 列中的项目会自动溢出到第 2 列。

【问题讨论】：

标签： javascript jquery html css menu

【解决方案1】：

您可以使用 jQuery 检查宽度或高度并动态更改列。

这将返回设备屏幕的宽度：

$('body').width();

这将返回设备屏幕的高度：

$('body').height();

我认为这是您玩屏幕尺寸的一个良好开端。

【讨论】：