javascript - 使侧面菜单具有动态列

Question

我找到了这个优秀的基于图标的示例侧边菜单，codepen http://codepen.io/reecegeorge/pen/JuHLq .

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

添加了 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 列。

Answer 1

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

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

$('body').width();

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

$('body').height();

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