这里有一个简单的菜单,使用UL和LI标签来制作。LI的数量和宽度是动态的。在鼠标悬停/点击时,会出现下拉框“more”,其中显示不适合可用空间的其余LI。
我尝试使用jQuery,在用户从右到左调整窗口大小时,隐藏最后一个可见的菜单项。如何反向实现并在“more”链接中添加LI?
我尝试了一些选项,当我们调整大小时,由于宽度较小,列表项会移至下方,并增加UL的高度,因此可以使用此方法隐藏最后一个可见的菜单项。
http://jsbin.com/flexmenu/2/edit
步骤1:
步骤2:
步骤3:
当用户重新调整窗口大小(增加宽度)时,这些步骤将被反转。
标记:
<div class="twelve columns filter-wrapper">
<ul class="nav-bar-filter" id="nav-bar-filter">
<li><a href="#">All</a></li>
<li><a href="#">Small</a></li>
<li><a href="#">Medium</a></li>
<li><a href="#">Extra large</a></li>
<li><a href="#">Text</a></li>
<li><a href="#">Small-1</a></li>
<li><a href="#">Medium-1</a></li>
<li><a href="#">Extra large text</a></li>
<li><a href="#">Large text</a></li>
<li><a href="#">Text</a></li>
</ul>
<ul id="more-nav">
<li><a href="#">More > </a>
<ul class="subfilter"><li><a href="#">Text</a></li></ul>
</li>
</ul>
</div>
基本上,这个菜单将用于响应式布局的菜单。任何帮助都会有所帮助。 编辑1:添加了标记