调整浏览器大小时的导航菜单宽度

Question

我有以下等式，我没有分辨率:) 我需要一个简单的由

组成的导航菜单

<ul id="nav">
   <li>
      <a>link</a>
        </li>
other 20 li's ...and last a select which contains li's that no longer have space on menu ...
        <ul>
            <li>
            <a>last li's that cannot be displayed on nav menu </a>
            </li>
       </ul>
    </ul>

我该怎么做？当菜单宽度调整大小时窗口调整大小li继续上一次选择，然后展开返回菜单。

如果有人可以帮我找一个漂亮的jQuery请。

谢谢

Answer 1

HTML代码无效，所以我试图在各行之间阅读。

要看两种可能的解决方案。

TinyNav.js

它不会像你所描述的那样完成，但它会通过媒体查询自动将列表转换为选择。通常这是为了在小屏幕上使菜单友好。

在我看来，20个列表项目太多，无法显示，在这种情况下尝试使用子菜单项移动到较小的数字是一个很好的方法。您可以通过Superfish显示子菜单项。不是选择，但可以说更好，因为子菜单项目会悬停在父项目上。

Answer 2

使用window.onresize DOM事件

window.onresize = function(event) {

 your code for changing content of ul goes here     

}