Zurb Foundation Nav在Rails项目中有限风格
Kom*_*mbo 2 ruby-on-rails ruby-on-rails-3 zurb-foundation
我在轨道项目中通过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样式,我的假设是它看起来非常类似于文档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;
}
我和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
干杯!
| 归档时间： |
|
| 查看次数： |
1844 次 |
| 最近记录： |