Question

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

如果你以底部的“齿轮”图标为例，当你将鼠标悬停在它上面时会显示一个子菜单。这很好，但是在你有很多项目的情况下，那么2列将是有利的。我修改了源代码（快速n'脏）并在这里有一个新的代码集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();

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

使侧边菜单具有动态列

1 个答案: