在我以前的项目中,我已经使用了基础4开源。那次我有一个顶级酒吧导航。但现在我再次尝试基础的新项目。因为我已经下载了基础版4.3.2版的http://foundation.zurb.com/develop/download-f4.html。我已经在我的新项目中参考了4.3.2版本的css和js基础,但是没有任何基础的努力,顶级酒吧没有像树视图一样显示出来?顶级酒吧不工作在基础4.3.2版本?
如果我提到的基础4,顶杆正在工作... 然后 为什么顶吧不工作,而我裁判基础4.3.2版本?
HTML代码
<html>
<head id="head2" runat="server">
<meta charset="UTF-8" />
<asp:ContentPlaceHolder ID="Title" runat="server">
<title>sample project</title>
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="Head" runat="server">
</asp:ContentPlaceHolder>
<link href="../../Scripts/css/foundation.css" rel="Stylesheet" type="text/css" />
<script src="../../Scripts/js/foundation.min.js" type="text/javascript"></script>
<script src="../../Scripts/js/vendor/custom.modernizr.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div class="row">
<div class="large-12 columns">
<img src="../../Scripts/img/logo.png" />
</div>
</div>
<div class="row">
<div class="large-12 column">
<nav class="top-bar">
<section class="top-bar-section">
<ul class="left">
<li class="divider"></li>
<li class="has-dropdown">Moderate</li>
<ul class="dropdown">
<li><a href="#">Moderate Posts</a></li>
<li><a href="#">New Post</a></li>
<li><a href="#">Send E-mail</a></li>
</ul>
<li class="divider"></li>
<li class="has-dropdown">Options</li>
<ul class="dropdown">
<li><a href="#">Statistics</a></li>
<li><a href="#">Users</a></li>
<li><a href="#">Change Password</a></li>
<li><a href="#">Reports</a></li>
</ul>
<li class="divider"></li>
<li class="has-dropdown">Configuration</li>
<ul class="dropdown">
<li><a href="#">Categories</a></li>
<li><a href="#">Fields</a></li>
<li><a href="#">Locations</a></li>
<li><a href="#">Localities</a></li>
<li><a href="#">E-mail Templates</a></li>
<li><a href="#">Admin Users</a></li>
</ul>
</ul>
</section>
</nav>
</div>
</div>
<div class="row" >
<div class="large-12 columns ">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<div class="row" >
<div class="large-12 columns ">
Copyright @2014
</div>
</div>
<script type="text/javascript">
document.write('<script src=' +
('__proto__' in {} ? '../../Scripts/js/vendor/zepto' : '../../Scripts/js/vendor/jquery') +
'.js><\/script>')
</script>
<script src="../../Scripts/js/foundation.min.js" type="text/javascript"></script>
<script src="../../Scripts/js/foundation/foundation.topbar.js"></script>
<script type="text/javascript">
$(document).foundation();
function setLayout() {
winWid = $(window).width();
if (winWid > 750) {
$(".trd").each(function (index) {
ht = $(this).height();
$(this).parent().closest('.row').find('.advt').css('height', ht - 16 + "px");
})
}
}
$(window).resize(function() {
setTimeout("setLayout()", 1000);
});
setLayout()
</script>
</form>
</body>
</html>
注:没有错误,我发现在运行时..但我的网页显示像树视图(我使用的UL和李元素)没有基础4.3的任何努力。 2版本。
我的网页看起来应该像下面的图片
您能否提供您用于顶栏元素的HTML以及运行时在浏览器控制台中生成的任何错误? –
@DavidAntaramian,我已添加html代码。但我没有在运行时得到任何错误。 – Lucky