Zurb Foundation Nav在Rails项目中有限风格-Java 学习之路

我在轨道项目中通过zurb-foundation gem使用Zurb Foundation 3 . 在我尝试添加导航栏之前，一切进展顺利：

<body>
  <div id="container" class="twelve columns">
      <div class="fixed contain-to-grid">
        <nav class="top-bar">
          <ul>
            <li class="name"><h1><%= link_to "Home", root_path %></h1></li>
          </ul>
          <section>
            <ul class="left">
              <li><a href="#">Left</a></li>
            </ul>

            <ul class="right">
              <li><a href="#">Right</a></li>
            </ul>
          </section>
        </nav>
      </div>

看起来像：

Zurb Nav Appearance

除了颜色之外，我没有覆盖任何zurb样式，我的假设是它看起来非常类似于文档http://foundation.zurb.com/docs/navigation.php中的第一个示例，但似乎并非如此 . 该文档还提到了javascript依赖项，但这些都包括在内 .

任何人都有任何想法如何开始让这看起来很漂亮？

编辑：

将行添加到第一个列表，如下所示：

<ul>
            <li class="name"><h1><%= link_to "Home", root_path %></h1></li>
            <li class="toggle-topbar"><a href="#"></a></li>
          </ul>

呈现这个：

After first suggestion

检查元素以查看是否显示了内容，导航JS就在那里：

(function ($){

  $.fn.foundationNavigation = function (options) {

    var lockNavBar = false;
    // Windows Phone, sadly, does not register touch events :(
    if (Modernizr.touch || navigator.userAgent.match(/Windows Phone/i)) {
      $(document).on('click.fndtn touchstart.fndtn', '.nav-bar a.flyout-toggle', function (e) {
        e.preventDefault();
        var flyout = $(this).siblings('.flyout').first();
        if (lockNavBar === false) {
          $('.nav-bar .flyout').not(flyout).slideUp(500);
          flyout.slideToggle(500, function () {
            lockNavBar = false;
          });
        }
        lockNavBar = true;
      });
      $('.nav-bar>li.has-flyout', this).addClass('is-touch');
    } else {
      $('.nav-bar>li.has-flyout', this).hover(function () {
        $(this).children('.flyout').show();
      }, function () {
        $(this).children('.flyout').hide();
      });
    }

  };

})( jQuery );

从基础寻找css，它适用于按钮和所有东西，导航栏样式似乎也在那里，例如：

.nav-bar {
  height: 40px;
  background: #4d4d4d;
  margin-top: 20px;
  padding: 0;
}

3 回答

0
我和zurb-foundation 3.0.9有完全相同的问题 . 尝试升级到3.1.1

在您的Gemfile中，使用：
```
gem 'zurb-foundation', '~> 3.1.1'
```
在application.scss中：
```
@import 'foundation';
```
确保准备好文档
```
$(document).foundationTopBar();
```
更新宝石
```
bundle update
```
确保删除缓存：
```
bundle exec rake tmp:cache:clear
```
干杯!
回复于 2024-05-02T21:01:54+08:00
0

您在第一个列表项后缺少此行

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

这可能是正在发生的事情，但并非100％正面 .

回复于 2024-05-02T21:01:54+08:00

您应该在下面的所有 <div> 标签上方以及 <body> 标签下方放置类似下面的示例 . 它存在于网格系统之外，因此它应该高于一切 . 请注意，没有 <div> 标签 .

<nav class="top-bar">
    <ul>
      <li class="name"><h1><a href="#">James Stone</a></h1></li>
      <li class="toggle-topbar"><a href="#"></a></li>
    </ul>
    <section>
      <ul class="right">
        <li class="has-dropdown"><a href="#">I</a>
          <ul class="dropdown">
            <li><a href="#">Bio</a></li>
            <li><a href="#">Resume</a></li>
          </ul>
        </li>
    </section>
  </nav>

回复于 2024-05-02T21:01:54+08:00

Zurb Foundation Nav在Rails项目中有限风格

3 回答

相关问题