작은 화면에 넘쳐 흐르는 Zurb Foundation 스티커 메뉴를 표시하는 방법은 무엇입니까?

Question

Zurb Foundation 4.0.9을 사용 중이며 .sticky 톱 바 메뉴를 사용하고 있습니다. 대형 화면 장치에서 잘 작동합니다.

작은 화면에 스티커 메뉴를 사용할 때 내 메뉴에 항목이 너무 많아서 오버플로가되어 화면에 표시되지 않습니다 (끈적 속성 때문에).

가장 쉬운 대답은 두 가지 메뉴, 작은 화면 고정되어 있지만, 그때는 중복 된 마크 업을해야합니다 대형 스크린과 하나 끈적 하나를 만드는 것입니다. 다른 방법이 있습니까?

편집 : 나는 Zurb Documentation에 제공된 Top Bar 코드를 사용하고 있습니다. 문제는 메뉴가 으로 세로 확장 된 경우 발생합니다. 그것의 일부는 범람하고 있습니다.

EDIT2 : 귀하의 답변 Screenshots

감사 : 여기에 문제의 시각적 표현입니다! 당신을 위해 요소 (NAVS)의 크기 조정 및 토글을 처리 할로

Answer 1

답변 및 의견을 읽은 후에 이것은 Zurb Foundation 4.0.9 버그 (장치간에 불일치하지만 여전히 재현 가능) 인 것 같습니다.

Answer 2

IT는 Top Bar를 사용하는 것이 가장 좋습니다.

<div class="sticky"> 
    <nav class="top-bar"> 
     <ul class="title-area"> 
     <!-- Title Area --> 
     <li class="name"> 
      <h1><a href="#">Top Bar Title </a></h1> 
     </li> 
     <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --> 
     <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li> 
     </ul> 

     <section class="top-bar-section"> 
     <!-- Left Nav Section --> 
     <ul class="left"> 
      <li class="divider"></li> 
      <li class="active"><a href="#">Main Item 1</a></li> 
      <li class="divider"></li> 
      <li><a href="#">Main Item 2</a></li>  
      <li class="divider"></li> 
     </ul> 

     <!-- Right Nav Section --> 
     <ul class="right"> 
      <li class="divider hide-for-small"></li> 
      <li class="has-dropdown"><a href="#">Main Item 3</a> 

      <ul class="dropdown"> 
       <li><label>Dropdown Level 1 Label</label></li> 
       <li class="has-dropdown"><a href="#" class="">Dropdown Level 1a</a> 

       <ul class="dropdown"> 
        <li><a href="#">Dropdown Level 2a</a></li> 
        <li><a href="#">Dropdown Level 2b</a></li>     
       </ul> 
       </li>   
      </ul> 
      </li> 
      <li class="divider"></li> 
      <li class="has-form"> 
      <form> 
       <div class="row collapse"> 
       <div class="small-8 columns"> 
        <input type="text"> 
       </div> 
       <div class="small-4 columns"> 
        <a href="#" class="alert button">Search</a> 
       </div> 
       </div> 
      </form> 
      </li> 
      <li class="divider show-for-small"></li> 
      <li class="has-form"> 
      <a class="button" href="#">Button!</a> 
      </li> 
     </ul> 
     </section> 
    </nav> 
</div> 

여기서 핵심은 당신이 당신이 이미 알고 생각 sticky DIV, 내부 탐색을 포장해야하고,에 top-bar 클래스 즉 : 여기에 재단의 문서 페이지에서 빌린 코드를 단순화이다 nav 요소. 그렇게하면 재단이 나머지를 처리해 줄 것입니다. 메뉴가 작은 화면에 어떻게 숨겨져 있는지 이해하려면 전체 네비게이션과 동일한 높이 인 45px의 높이가 적용됩니다. 메뉴 아이콘을 클릭하면 expanded 클래스가 nav에 적용되므로 메뉴를 볼 수 있습니다.