基础5.2.2 topbar下拉菜单对于移动设备不起作用

我正在尝试用基础下拉菜单开发我的网站。当我看到来自PC浏览器的响应大小它的工作（不是第一次：点击第一次的URL将..../index.html＃再次加载与此然后它的工作，第二次它的工作）。当我在手机中加载网址，并尝试测试它不工作。基础5.2.2 topbar下拉菜单对于移动设备不起作用

这里是我的代码在header.html中：

<div class="menuSet" style="background-image: url('img/image67.JPG');"> 
<nav class="top-bar row changedWmiddle" data-topbar style="background-image: url('img/image67.JPG');height:44px;"> 
    <ul class="title-area setMenu"> 
     <li class="name"> 
     <h1><a href="#" class="setMenu1">&nbsp;</a></h1> 
     </li> 
     <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --> 
     <li class="toggle-topbar menu-icon setMenu2"> 
     <a href="#"><span>Menu</span></a> 
     </li> 
    </ul> 
    <div class="top-bar-section"> 
    <!-- Left Nav Section --> 
    <ul class="left row" style="width:98%;"> 
     <li class="setMenu3" style="min-width:16.43%;background-image:url('img/image67.JPG');"><a href="http://ec2-54-178-189-98.ap-northeast-1.compute.amazonaws.com/SamePage_Website(without_comment)/" class="setMenu5" style="background-image:url('img/image67.JPG');"><img src="img/image68.JPG"></a></li> 
     <li class="setMenu4" style="min-width:16.43%;background-image:url('img/image67.JPG');"><a href="http://ec2-54-178-189-98.ap-northeast-1.compute.amazonaws.com/SamePage_Website(without_comment)/Reason_For_Change.html" class="setMenu5" style="background-image: url('img/image67.JPG');"><img src="img/image69.JPG"></a></li> 
     <li class="setMenu4" style="min-width:16.43%;background-image:url('img/image67.JPG');"><a href="http://ec2-54-178-189-98.ap-northeast-1.compute.amazonaws.com/SamePage_Website(without_comment)/customer.html" class="setMenu5" style="background-image: url('img/image67.JPG');"><img src="img/image70.JPG"></a></li> 
     <li class="setMenu4" style="min-width:16.43%;background-image:url('img/image67.JPG');"><a href="http://ec2-54-178-189-98.ap-northeast-1.compute.amazonaws.com/SamePage_Website(without_comment)/company.html" class="setMenu5" style="background-image: url('img/image67.JPG');"><img src="img/image71.JPG"></a></li> 
     <li class="setMenu4" style="min-width:16.43%;background-image:url('img/image67.JPG');"><a href="http://ec2-54-178-189-98.ap-northeast-1.compute.amazonaws.com/SamePage_Website(without_comment)/motto.html" class="setMenu5" style="background-image: url('img/image67.JPG');"><img src="img/image72.JPG"></a></li> 
     <li class="setMenu4" style="min-width:16.43%;background-image:url('img/image67.JPG');"><a href="http://ec2-54-178-189-98.ap-northeast-1.compute.amazonaws.com/SamePage_Website(without_comment)/recruit.html" class="setMenu5" style="background-image: url('img/image67.JPG');"><img src="img/image73.JPG"></a></li> 
    </ul> 
    </div> 
</nav>

我包括在我的index.html了header.html和类似链接的脚本。

在页面的开始：

<script src="js/vendor/jquery.js"></script> 
<script src="js/vendor/modernizr.js"></script>

在底部：（标签）之前

<script src="js/foundation/foundation.js"></script> 
    <script src="js//foundation/foundation.topbar.js"></script> 
    <script src="js/foundation.min.js"></script> 
    <script> 
     $(document).foundation(); 
    </script>

这里是我的网址的链接 http://ec2-54-178-189-98.ap-northeast-1.compute.amazonaws.com/SamePage_Website%28without_comment%29/index.html

请帮助。提前致谢。

来源

2014-10-22 Unique

foundation.min.js包含所有基础js。

您需要使用要么 “foundation.min.js” 或 “foundation.js，foundation.topbar.js等”。

参考：http://foundation.zurb.com/docs/javascript.html

<script src="/js/foundation.min.js"></script> 

<!-- or individually --> 

<script src="/js/foundation.js"></script> 
<script src="/js/foundation.alert.js"></script> 
<!-- ... --> 
<script src="/js/foundation.dropdown.js"></script> 
<script src="/js/foundation.tab.js"></script>

您遇到可以选自具有现身麻烦的js加载的文件。尝试只加载一组。

来源

2014-10-22 14:24:49 NateW

感谢您的回复。我会尝试。 – Unique 2014-10-23 05:21:14

我发现问题是与modernizr.js，测试它可以删除基础将按预期工作。

来源

2015-09-02 09:10:16

基础5.2.2 topbar下拉菜单对于移动设备不起作用

回答

相关问题