왜 Zurb Foundation Top Bar가 작동하지 않습니까?

톱 바 디자인을위한 Foundation 4.0을 배우고 있습니다. 내 목표는 튜토리얼과 마찬가지로 폭이 좁아지면 메뉴 항목의 슬라이드 효과를 얻는 것입니다. 나는 문서를 다음입니다 : http://foundation.zurb.com/old-docs/f3/navigation.php#topbarCode 왜 Zurb Foundation Top Bar가 작동하지 않습니까?

<div class="row"> 
<div class="twelve columns"> 
<nav class="top-bar"> 
    <ul> 
    <!-- Title Area --> 
    <li class="name"> 
     <h1> 
     <a href="#"> 
      Top Bar Title 
     </a> 
     </h1> 
    </li> 
    <li class="toggle-topbar"><a href="#"></a></li> 
    </ul> 

    <section> 
    <!-- Left Nav Section --> 
    <ul class="left"> 
     <li class="divider"></li> 
     <li class="has-dropdown"> 
     <a class="active" href="#">Item 1</a> 
     <ul class="dropdown"> 
      <li><label>Section Name</label></li> 
      <li class="has-dropdown"> 
      <a href="#" class="">Level 1, Has Dropdown</a> 
      <ul class="dropdown"> 
       <li><a href="#">Level 2</a></li> 
       <li><a href="#">Level 2</a></li> 
       <li class="has-dropdown"><a href="#">Level 2, Has Dropdown</a> 
       <ul class="dropdown"> 
        <li><label>Section</label></li> 
        <li><a href="#">Level 3</a></li> 
        <li><a href="#">Level 3</a></li> 
        <li class="divider"></li> 
        <li><a href="#">Level 3</a></li> 
       </ul> 
       </li> 
       <li><a href="#">Level 2</a></li> 
       <li><a href="#">Level 2</a></li> 
      </ul> 
      </li> 
      <li><a href="#">Level 1</a></li> 
      <li><a href="#">Level 1</a></li> 
      <li class="divider"></li> 
      <li><label>Section Name</label></li> 
      <li><a href="#">Level 1</a></li> 
      <li><a href="#">Level 1</a></li> 
      <li><a href="#">Level 1</a></li> 
      <li class="divider"></li> 
      <li><a href="#">See all &rarr;</a></li> 
     </ul> 
     </li> 
     <li class="divider hide-for-small"></li> 
    </ul> 

    <!-- Right Nav Section --> 
    <ul class="right"> 
     <li class="divider show-for-medium-and-up"></li> 
     <li class="has-dropdown"> 
     <a href="#">Item 2</a> 
     <ul class="dropdown"> 
      <li><label>Section Name</label></li> 
      <li><a href="#" class="">Level 1</a></li> 
      <li><a href="#">Dropdown Option</a></li> 
      <li><a href="#">Dropdown Option</a></li> 
      <li class="divider"></li> 
      <li><label>Section Name</label></li> 
      <li><a href="#">Dropdown Option</a></li> 
      <li><a href="#">Dropdown Option</a></li> 
      <li><a href="#">Dropdown Option</a></li> 
      <li class="divider"></li> 
      <li><a href="#">See all &rarr;</a></li> 
     </ul> 
     </li> 
    </ul> 
    </section> 
</nav> 
</div> 
</div>

나는 나의 환경에 절대적으로 같은 코드를 사용했다. 메뉴는 다음과 같이 간다 그러나 :

1 http://img543.imageshack.us/img543/6249/yte.png

을 내가 얻고 자하는 것이 아니다. 나는 누구와 같은 문제가 있습니까?

출처

2013-06-19 HanYi Zhang

는, [JS 빈 (http://jsbin.com/opaqum/3/edit)에 코드를 살펴 제발 제공, 또한 [전체 화면 미리보기] (http://jsbin.com/opaqum/3/)에서 봐 –

나는 그것을 또한 가지고있어. 문제가 없어지도록 모든 js 파일을 페이지에 포함합니다. 귀하의 코드가 더 좋고 깨끗합니다, Praveen. 고맙습니다! 그건 내 퍼즐입니다. presentation.css는 패키지에 없지만 Foundation 4 웹 사이트에서 널리 사용됩니다. –

github의 [comment] (https://github.com/zurb/foundation/issues/27#issuecomment-2508644)에 따르면 ** presentation.css **에는 마케팅 사이트 및 설명서의 특정 스타일이 포함되어 있습니다. 주요 재단 패키지의 일부. 전체 repo를 체크 아웃하여 파일을 가져올 수 있습니다. –

로드 모든 JS 파일 재단 4 내가이 일을 가지고

출처

2013-06-27 18:27:36

왜 Zurb Foundation Top Bar가 작동하지 않습니까?

답변

관련 문제