[英]Zurb Foundation 5 + Rails 4 : toggle-topbar won't work
I have tried everything in my knowledge (however little there is), but I can not make the top bar menu render properly on small screens. 我已经尽我所能尝试了所有操作(但是很少),但是我无法使顶部栏菜单在小屏幕上正确呈现。 I want the menu to reduce down to a clickable menu item on small screens, basically responsive behaviour from the menu.
我希望菜单减少到小屏幕上可单击的菜单项,基本上是菜单的响应行为。 Apparently the following code alone should make it work, but it doesn't.
显然,仅下面的代码应该可以使它起作用,但事实并非如此。
<header>
<div class="row">
<div class="large-12 large-centered small-12 small-centered columns">
<nav class="top-bar" data-topbar role="navigation">
<section class="top-bar-section">
<ul class="title-area">
<li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
</ul>
<ul class="left">
<li><%= link_to('Link', {:controller => 'controller', :action => 'action'}) %></li>
<!-- other links -->
</ul>
<ul class="right">
<li><%= link_to('Link', {:controller => 'controller', :action => 'action'}) %></li>
<!-- other links -->
</ul>
</section>
</nav>
</div>
</div>
</header>
I think it has something to do with javascript related to Foundation but I'm not sure what it is exactly. 我认为这与与Foundation相关的javascript有关,但是我不确定它到底是什么。
EDIT: 编辑:
application.js : application.js:
//
//= require jquery
//= require foundation
//= require jquery_ujs
//= require turbolinks
//= require_tree .
$(document).ready(function() {
$(document).foundation();
});
application.scss application.scss
/*
*
*= require_tree .
*= require_self
*= require foundation_and_overrides
*/
@import 'custom';
The custom.scss file imports foundation_and_overrides.scss . custom.scss文件导入foundation_and_overrides.scss。
Besides the suggestion below, make sure to change the href in 除了以下建议外,请务必更改
<ul class="title-area">
<li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
</ul>
to href="" . 到href =“”。
I've copied the last comment from http://foundation.zurb.com/forum/posts/2348-foundation-5-topbar-menu-not-responding-on-rails4 我已经从http://foundation.zurb.com/forum/posts/2348-foundation-5-topbar-menu-not-responding-on-rails4复制了最后一条评论
You will need to add 您将需要添加
gem 'jquery-turbolinks' 宝石'jquery-turbolinks'
to your Gem file then do the usual bundle install 到您的Gem文件,然后执行通常的捆绑安装
Following this change your javascript manifest file (application.js) to run in the following order: 之后,将您的javascript清单文件(application.js)更改为按以下顺序运行:
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require foundation
//= require_tree .
$(function(){ $(document).foundation({});
// any other code etc
//= require turbolinks
This will ensure turbolinks runs AFTER everything else (especially foundation in this case). 这将确保Turbolink在其他所有内容之后运行(在这种情况下尤其是基础)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.