2

Railsプロジェクトでzurb-foundationgemを介してZurbFoundation3を使用しています。ナビゲーションバーを追加しようとするまで、すべてが順調に進んでいます。

<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>

これは次のようになります：

ZurbNavの外観

色以外の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>

これをレンダリングします：

最初の提案の後

要素を調べて、表示されているかどうかを確認すると、ナビゲーション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;
}
4

3 に答える 3

7

zurb-foundation3.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

乾杯！

于 2012-10-12T10:54:49.247 に答える
0

最初のリスト項目の後にこの行がありません

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

それはおそらく起こっていることですが、100％ポジティブではありません。

于 2012-10-09T02:26:17.583 に答える
0

この例のようなものを、すべての<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>
于 2012-10-11T17:00:31.457 に答える