2

我正在使用METRO UI CSS。我实现了下拉菜单。这看起来不错的样子。但下拉列表未显示。

我使用了以下链接中的示例：

带有下拉菜单的水平菜单。

我将最新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>

任何帮助将不胜感激 ！

4

5 回答 5

0

尝试以下方法 - 它对我来说很好：

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

并添加 class="metro"到您的<body>喜欢中：<body class="metro">

希望这会有所帮助。

于 2015-01-05T22:24:34.223 回答
0

导航栏下拉菜单仅适用于根文件夹中的文件。只有 docs 文件夹中的 css/js 似乎可以正常工作。我已经尝试了所有其他组合，但它们不起作用您必须将所有文件都放在根文件夹中，否则导航栏下拉菜单将不起作用。

非导航栏下拉菜单可在任何地方使用。

只有文档 css/js 版本有效。其他版本没有

更新：

在 load-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'));
    }
})
于 2015-03-30T10:16:02.313 回答
0

来自作者：

metro.min.js 包含所有 js Metro 组件。检查您的主要容器是否有地铁班。如果您从 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>

于 2015-04-15T17:10:23.350 回答
-1

Metro UI depends on jQuery, you should include jQuery first, then 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>
于 2014-09-30T11:26:35.533 回答
-1

你是在服务器上运行的吗？请将其放入服务器的 htdocs 文件夹中，如 XAMPP 或 WAMP。

如果您通过“双击”运行它，链接将类似于

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

如果你在服务器上运行它，链接会像

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

你是Whick纠正的方法吗？

于 2014-10-30T06:30:46.947 回答