Zurb顶部导航栏下拉菜单动态包含时不能在小屏幕上工作

我想让我的头绕着Zurb基金会的顶部导航栏。当我通过js include包括导航标记时，我努力使它第一次工作。当我将代码复制到每个html页面时，它突然生效。这很好，但我在我的网站上添加了一个新的部分，其中页面是用ruby动态生成的。Zurb顶部导航栏下拉菜单动态包含时不能在小屏幕上工作

实际的问题是，当屏幕很小时，页面右上方的下拉菜单停止工作。

在我的网站的头版，导航工作的小屏幕上：Mac Media Production home page，但是这个页面上：Mac Media Production Hosting page，导航栏无法正常操作，而据我所知的加价是相同：

<!-- Header and Nav --> 

<nav class="top-bar"> 
    <ul> 
    <!-- Title Area --> 
    <li class="name"> 
     <h1> 
     <a href="http://www.mac-media.co.uk"> 
      mac media 
     </a> 
     </h1> 
    </li> 
    <li class="toggle-topbar"><a href="http://www.mac-media.co.uk/hosting"></a></li> 
    </ul> 

    <section> 
    <!-- Top Right Nav Section --> 
    <ul class="right"> 

     <li class="has-dropdown"> 
     <a class="active" href="http://www.mac-media.co.uk/index.html">Menu</a> 
     <ul class="dropdown"> 
      <li><label>Pages</label></li> 
      <li><a href="http://www.mac-media.co.uk/index.html">Home</a></li> 
      <li><a href="http://www.mac-media.co.uk/contact-us.html">Contact Us</a></li> 
      <li class="divider"></li> 
      <li><label>Our Services</label></li> 
      <li><a href="http://www.mac-media.co.uk/web-design.html">Web Design</a></li> 
      <li><a href="http://www.mac-media.co.uk/photo.html">Photo</a></li> 
      <li><a href="http://www.mac-media.co.uk/video-production.html">Video</a></li> 
      <li><a href="http://www.mac-media.co.uk/hosting.html">Hosting</a></li> 
      <li><a href="http://www.mac-media.co.uk/email.html">Emails</a></li> 
      <li><a href="http://www.mac-media.co.uk/domain-names.html">Domain Names</a></li> 
      <li class="divider"></li> 
      <li><label>Existing Clients</label></li> 
      <li><a href="http://www.mac-media.co.uk/hosting/front-page">Control Panel</a></li> 
      <li><a href="http://www.outitgoes.com/">Webmail Login</a></li> 
     </ul> 
     </li> 
     <li class="divider hide-for-small"></li> 
    </ul> 

     </section> 

</nav>

谁能帮助请！？

来源

2013-02-25 Carl

在ZURB基金会3，这条线：

<li class="toggle-topbar"><a href="http://www.mac-media.co.uk/hosting"></a></li>

应改为：

<li class="toggle-topbar"><a href="#"></a></li>

这仅仅是jQuery的

官方文档的占位符：http://foundation.zurb.com/old-docs/f3/navigation.php

来源

2013-03-04 01:39:34 JAMESSTONEco

谢谢你花时间回复。在这种情况下，建议的更改无法解决问题。然而，它迫使我采取更彻底的观察，并且我发现身体底部的.js没有被正确引用。所以谢谢你，问题解决了！ – Carl 2013-03-05 20:03:47

这太棒了。您的网站看起来不错。你是否在文件上运行了差异，或者在浏览文件时看到了这些差异？我有时使用免费软件[DiffMerge]（http://sourcegear.com/diffmerge/）。我知道你可以从命令行执行此操作，但当你只想比较两个文件时，它可能是一个有用的工具。它有一点奇怪的界面，但我只需点击两个图标，然后将这两个文件拖放到（浏览）字段中。 – JAMESSTONEco 2013-03-05 21:29:28

Zurb顶部导航栏下拉菜单动态包含时不能在小屏幕上工作

回答

相关问题