FlexNav没有

Question

我正在使用FlexNav。顶级菜单项的宽度在演示中设置为20%，因此针对五个顶级菜单项进行了优化。

.flexnav li {
    .
    .
    .
    width: 20%;
}

在我的菜单中，顶级菜单项文本具有不同的长度，子元素（级别2）比其父级更宽。我试图让菜单更灵活，因此没有必要定义顶级菜单项＆＃39;宽度。但没有固定的菜单不能正常工作。有什么想法吗？

Answer 1

以下是代码：

<script type="text/javascript">
$(document).ready(function(){
    $(".flexnav").flexNav({ 'calcItemWidths' : true });
});
</script>

<ul class="flexnav" data-breakpoint="800">
    <li>Menu Item 1</li>
    <li>Menu Item 2</li>
    <li>Menu Item 3</li>
    <li>Menu Item 4</li>
    <li>Menu Item 5</li>
    <li>Menu Item 6</li>
</ul>

当您将选项calcItemWidths设置为true时，插件应计算菜单项的宽度。

Answer 2

不应该有任何理由放弃父母的宽度;已经设置了FlexNav，以便长孩子能够换行：

作为一点点，在一般的UX术语中，你可能不希望在菜单项中使用非常长的名称。