없이 FlexNav

Question

나는 FlexNav을 사용하고 있습니다. 데모에서는 최상위 메뉴 항목의 너비가 20%으로 설정되어 있으므로 5 개의 최상위 메뉴 항목에 맞게 최적화되어 있습니다.

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

제 메뉴의 최상위 메뉴 항목 텍스트는 길이가 다르며 하위 요소 (레벨 2)는 부모보다 넓습니다. 메뉴를 좀 더 유연하게 만들려고하고 있으므로 최상위 메뉴 항목의 너비를 정의 할 필요가 없습니다. 그러나 메뉴를 수정하지 않으면 제대로 작동하지 않습니다. 어떤 생각?

Answer 1

여기 코드 : 당신이 calcItemWidthstrue에 대한 옵션을 설정하면

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

, 플러그인 메뉴 항목의 폭을 계산한다.

Answer 2

부모의 너비를 벗어날 이유가 없어야합니다. 긴 아이들이 포장 있도록 FlexNav 이미 설정입니다 : 여담의 비트, 일반 UX 측면에서 당신은 아마 어쨌든, 메뉴 항목에서 끔찍하게 긴 이름을 원하지 않는

으로.