2014-03-12 32 views
0

在我以前的项目中,我已经使用了基础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版本。

我的网页看起来应该像下面的图片 enter image description here

+0

您能否提供您用于顶栏元素的HTML以及运行时在浏览器控制台中生成的任何错误? –

+0

@DavidAntaramian,我已添加html代码。但我没有在运行时得到任何错误。 – Lucky

回答

0

下面应该工作:

<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/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"><a href="#">Moderate</a> 
           <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> 
          <li class="divider"></li> 
          <li class="has-dropdown"><a href="#">Options</a> 
           <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> 
          <li class="divider"></li> 
          <li class="has-dropdown"><a href="#">Configuration</a> 
           <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> 
          </li> 
         </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 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> 

我已经在这里做了几件事情。首先,我只是格式化代码,以便读取更容易。其次,我删除了头部的电话foundation.min.js。你在身体的脚下呼叫foundation.min.js,并且包含它两次可能会导致与命名变量混淆。我还删除了您的电话foundation.topbar.js,因为此文件包含在已包括的缩小脚本中。最后,我重新制作了下拉菜单,以便基金会能够正确解释它们。基金会期望下拉菜单父母li元素。我还根据Foundation文档将下拉li文本转换为锚文本。

哦,我在包含jQuery/zepto的document.write()语句中添加了一个分号。

+0

感谢您编辑代码并给出了解释,对我来说这是非常有用的,应该遵循标准格式。我用我的html页面中的代码替换了它,但输出中仍然没有任何更改。对于您的信息:我引用Foudation 4.3.1版本以上,我已经添加了我的网页输出。 – Lucky

+0

如果我使用相同的HTML代码与引用基础4,我是完美的顶级酒吧导航。 – Lucky

+0

我在代码中发现了我的错误..实际上,我在foundation.css本身做了一些更改..这使得我的网页出现问题。在我删除了foundation.css中所做的更改之后,得到了顶栏导航。 – Lucky

0

这不是基础4.3.2版本问题。实际上,我已经对foundation.css本身做了一些改变..这使得我的网页出现问题。在我删除了foundation.css中所做的更改后,获得了顶部栏导航。

因此,我们不会在foundation.css本身中进行更改。 更好,我们可以为我们的参考创建定制的CSS。