2016-12-20 3 views
1

가 여기 내 HTML 코드 탐색 막대로 표시되지는 더 CSS가 영향을 미치는되지 않은 것으로 보인다. 제 재단 CSS가 포함되어 있으며 테스트를 거쳤습니다.재단 탐색 클래스는

enter image description here

+0

어떻게 당신이 그것을 테스트 않았다

여기
$(document).foundation(); 

가 v6.3과의 구문입니다? –

+0

@alldani 예, 그렇지만 o/p가 스크린 샷에 나타납니다. –

+0

예 또는 아니오 질문이 아니 었습니다. 제 질문은 * CSS가 어떻게 연결되었는지 테스트 했습니까? –

답변

0

난 당신이 재단 초기화 호출을 누락 생각합니다. body 태그의 종료 전에 추가 :

<!doctype html> 
 
<html class="no-js" lang="en"> 
 
<head> 
 
    <meta charset="utf-8" /> 
 
    <meta http-equiv="x-ua-compatible" content="ie=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
 
    <title>Foundation Starter Template</title> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css"> 
 
</head> 
 
<body> 
 

 
    <div class="top-bar"> 
 
     <div class="top-bar-left"> 
 
      <ul class="dropdown menu" data-dropdown-menu> 
 
       <li class="menu-text">Site Title</li> 
 
       <li> 
 
        <a href="#">One</a> 
 
        <ul class="menu vertical"> 
 
         <li><a href="#">One</a></li> 
 
         <li><a href="#">Two</a></li> 
 
         <li><a href="#">Three</a></li> 
 
        </ul> 
 
       </li> 
 
       <li><a href="#">Two</a></li> 
 
       <li><a href="#">Three</a></li> 
 
      </ul> 
 
     </div> 
 
     <div class="top-bar-right"> 
 
      <ul class="menu"> 
 
       <li><input type="search" placeholder="Search"></li> 
 
       <li><button type="button" class="button">Search</button></li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 

 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/js/foundation.min.js"></script> 
 
    <script> 
 
     $(document).foundation(); 
 
    </script> 
 

 
</body> 
 
</html>

+0

아직 작동하지 않습니다. ( –

+0

v5를 여전히 사용하고 계십니까? v6.3은 약간 다른 구문을 사용합니다. http://foundation.zurb.com /sites/docs/top-bar.html – Ross

+0

6.3 버전 사용 –