Javascript 不带导航的FlexNav

我正在使用。在演示中，顶级菜单项的宽度设置为

20%

，因此它针对五个顶级菜单项进行了优化

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

---

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

没有任何理由在父母身上留下宽度；FlexNav已经设置好，以便长的子项将换行：

顺便说一句，就用户体验而言，您可能不希望菜单项中出现非常长的名称。

以下是代码：

<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>

$（文档）.ready（函数（）{
$（“.flexnav”）.flexnav（{'calcItemWidths'：true}）；
});

菜单项1
菜单项2
菜单项3
菜单项4
菜单项5
菜单项6

---

当您将选项

calcItemWidths

设置为

true

时，插件应计算菜单项的宽度。

有一个名为

calcItemWidths

的选项可解决此问题

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