Zurb Top Nav Bar下拉菜单在动态包含时不能在小屏幕上工作

时间:2013-02-25 18:38:59

标签: html zurb-foundation

我正试图绕过Zurb Foundation的Top Navigation栏。当我通过js include包含导航标记时,我第一次努力让它工作。当我将代码复制到每个html页面时,它突然起作用。这很好,但我在我的网站上添加了一个新的部分,其中页面是用ruby动态形成的。

实际问题是,当屏幕较小时,页面右上角的下拉菜单会停止工作。

在我网站的首页上,导航工作在一个小屏幕上: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>
 

任何人都可以帮忙!?

1 个答案:

答案 0 :(得分:0)

在ZURB Foundation 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