2014-09-30 5 views
2

메트로 UI CSS을 사용하고 있습니다. 드롭 다운 메뉴을 구현했습니다. 좋아 보인다. 그러나 드롭 다운 목록이 표시되지 않습니다.Metro UI CSS - 드롭 다운 메뉴가 작동하지 않습니다.

Horizontal menu with dropdown :

나는 다음의 링크에서 예제를 사용했다.

다음 파일을 최신 METRO UI CSS 패키지에서 html 코드로 추가했습니다.

<link href="metroui/css/metro-bootstrap.css" rel="stylesheet"> 
<link href="metroui/css/metro-bootstrap-responsive.css" rel="stylesheet"> 
<link href="metroui/docs/css/iconFont.css" rel="stylesheet"> 
<link href="metroui/docs/js/prettify/prettify.css" rel="stylesheet"> 
<link href="metroui/docs/css/docs.css" rel="stylesheet"> 

<!-- Load JavaScript Libraries --> 
<script src="metroui/js/metro-dropdown.js"></script> 
<script type="dropdown.js"></script> 
<script src="metroui/docs/js/jquery/jquery.min.js"></script> 
<script src="metroui/docs/js/jquery/jquery.widget.min.js"></script> 
<script src="metroui/docs/js/jquery/jquery.mousewheel.js"></script> 
<script src="metroui/docs/js/prettify/prettify.js"></script> 
<script src="metroui/docs/js/holder.js"></script> 

<!-- Metro UI CSS JavaScript plugins --> 
<script src="metroui/docs/js/load-metro.js"></script> 

도움을 주실 수 있습니다!

+0

브라우저 콘솔의 오류? 모든 파일이 올바르게로드되었는지 확인하십시오. –

+0

그 점에 감사드립니다 !! 그것은 문제였다! :) – BBHeeMAA

답변

-1

Metro UI는 jQuery에 따라 다르지만 jQuery를 먼저 포함하고 Metro UI를 포함해야합니다.

<!-- Load JavaScript Libraries --> 
<script src="metroui/docs/js/jquery/jquery.min.js"></script> 
<script src="metroui/docs/js/jquery/jquery.widget.min.js"></script> 
<script src="metroui/docs/js/jquery/jquery.mousewheel.js"></script> 
<script src="metroui/js/metro-dropdown.js"></script> 
<script src="dropdown.js"></script> 
<script src="metroui/docs/js/prettify/prettify.js"></script> 
<script src="metroui/docs/js/holder.js"></script> 
+0

: (여전히 작동하지 않습니다!) – BBHeeMAA

-1

서버에서 실행 했습니까? XAMPP 또는 WAMP와 같은 서버의 htdocs 폴더에 저장하십시오. 당신이 "더블 클릭"하여 실행하면 사용자가 링크 방법을 수정 할말을 테잎에

http://localhost/Metro-UI-CSS-master/docs/navbar.html 

당신처럼 될 것입니다 서버에서 실행하는 경우

링크는

file:///C:/xampp/htdocs/Metro-UI-CSS-master/docs/navbar.html 

처럼 될 것인가?

<script src="Scripts/jquery-2.1.3.min.js"></script> 
<script src="Scripts/jquery-ui.min.js"></script> 
<link href="Scripts/metro-ui/css/metro-bootstrap.css" rel="stylesheet" /> 
<link href="Scripts/metro-ui/css/metro-bootstrap-responsive.css" rel="stylesheet" /> 
<link href="Scripts/metro-ui/css/iconFont.css" rel="stylesheet" /> 
<script src="Scripts/metro-ui/js/jquery.min.js"></script> 
<script src="Scripts/metro-ui/js/jquery.widget.min.js"></script> 
<script src="Scripts/metro-ui/js/jquery.mousewheel.js"></script> 
<script src="Scripts/metro-ui/js/metro.min.js"></script> </pre> 

을 또한이처럼 <body>class="metro"을 추가 :이 도움이 될 것입니다 <body class="metro">

희망은 나를 위해 잘 작동하고 -

0

는 다음을보십시오.

0

Navbar 드롭 다운은 루트 폴더의 파일에서만 작동합니다. docs 폴더의 css/js 만 제대로 작동하는 것 같습니다. 나는 다른 모든 조합을 시도하고 그들은 작동하지 않습니다. 당신은 루트 폴더에있는 모든 파일을 가지고 있어야하거나 navbar 드롭 다운 작동하지 않을 것입니다.

어디서나 navbar 드롭 다운이 작동하지 않습니다.

docs css/js 버전 만 작동합니다. 다른 버전은하지

UPDATE :

당신이 상대에서 절대 경로를 변경해야하는 부하 metro.js에서

. 저자

$(function(){ 
    if ((document.location.host.indexOf('.dev') > -1) || (document.location.host.indexOf('modernui') > -1)) { 
     $("<script/>").attr('src', '/docs/js/metro/metro-loader.js').appendTo($('head')); 
    } else { 
     $("<script/>").attr('src', '/docs/js/metro.min.js').appendTo($('head')); 
    } 
}) 
0

:

metro.min.js 모든 지하철 구성 요소를 JS 포함되어 있습니다. 기본 컨테이너에서 지하철을 확인하십시오. ajax에서 빌드 드롭 다운을 수행 한 경우, 전역 변수 METRO_AUTO_REINIT를 true로 설정하십시오. 자세히보기 https://github.com/olton/Metro-UI-CSS/issues/574

헤더 태그에 추가 했으므로 작동합니다.

<script src="metroui/docs/js/load-metro.js"></script> <script>var METRO_AUTO_REINIT = true;</script>

+0

작업 코드를 OP에 제공 할뿐만 아니라 무언가를 가르치기 위해 몇 가지 설명을 제공해주십시오. – Keelan