Я просто переместил свой ui (Rails 4) из Bootstrap в Foundation 5. Я добавил обычный Nav для больших экранов и навигацию Offcanvas для небольших экранов. смотрите здесь для более подробной информации: http://foundation.zurb.com/docs/components/offcanvas.htmlRuby on Rails и Zurb Foundation Offcanvas не работает правильно
Когда я нажимаю на меню по offcanvas навигации показывает все ссылки, то я могу нажать на содержание, открыть навигацию снова, НО, когда я нажимаю на ссылку в навигации, а затем, я не могу открыть навигацию offcanvas, похоже, что она заблокирована, мне нужно вручную обновить свой просмотр в браузере.
вот мой код, который:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%= content_for?(:title) ? yield(:title) : t('.siteTitle') %></title>
<%= stylesheet_link_tag 'application'%>
<%= javascript_include_tag 'vendor/modernizr' %>
<%= csrf_meta_tags %>
</head>
<body>
<!-- NAVIGATION Top Bar -->
<!------------------------>
<div class="off-canvas-wrap">
<div class="inner-wrap">
<div class="contain-to-grid sticky fixed">
<nav class="top-bar hide-for-small" data-topbar data-options="is_hover: false">
<ul class="title-area">
<li class="name">
<h1><%= link_to t('.siteTitle'), root_path, :id => 'newolu' %></h1>
</li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="has-dropdown active">
<a href="#"><%=t('.menus')%></a>
<ul class="dropdown">
<li><%= link_to t('.restaurants'), restaurants_path, :id => 'restaurant' %></li>
</ul>
</li>
<li class="has-dropdown">
<a href="#"><%=t('.changelanguage')%></a>
<ul class="dropdown">
<li><%= link_to t('.english'), { :locale => 'en' }, :id => 'en' %></li>
<li><%= link_to t('.german'), { :locale => 'de' }, :id => 'de' %></li>
</ul>
</li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li class="has-form">
</li>
</ul>
</section>
</nav>
</div>
<!-- NAVIGATION Offcanvas -->
<!-------------------------->
<div class="fixed show-for-small">
<nav class="tab-bar">
<section class="left tab-bar-section">
<h1 class="title"><%= t('.siteTitle') %></h1>
</section>
<section class="right-small">
<a class="right-off-canvas-toggle menu-icon" ><span></span></a>
</section>
</nav>
</div>
<aside class="right-off-canvas-menu">
<ul class="off-canvas-list">
<li><label class="first">Newolu</label></li>
<li><<%= link_to 'Home', root_path, :id => 'newolu' %></li>
</ul>
<hr>
<ul class="off-canvas-list">
<li><label><%=t('.menus')%></label></li>
<li><%= link_to t('.restaurants'), restaurants_path, :id => 'restaurant' %></li>
</ul>
<hr>
<ul class="off-canvas-list">
<li><label><%=t('.changelanguage')%></label></li>
<li><%= link_to t('.english'), { :locale => 'en' }, :id => 'en' %></li>
<li><%= link_to t('.german'), { :locale => 'de' }, :id => 'de' %></li>
</ul>
</aside>
<!-- Content -->
<!------------->
<section class="main-section">
<!-- Notice -->
<!------------>
<% if notice %>
<div data-alert class="alert-box info radius">
<p id="notice"><%= notice %></p>
<a href="#" class="close">×</a>
</div>
<% end %>
<!-- content goes here -->
<%= yield %>
</section>
<a class="exit-off-canvas" href="#"></a>
</div>
</div>
<%= javascript_include_tag 'application' %>
</body>
Кто-нибудь знает, почему эта проблема возникает? моей второй проблемой является то, что текст в следующем фрагменте кода не выравнивается влево, он находится в центре. Когда я меняю его на правую или среднюю, это плюс минус в том же положении.
<section class="left tab-bar-section">
<h1 class="title"><%= t('.siteTitle') %></h1>
</section>
здесь изображение:
надежда кто-то может помочь .. Большое спасибо
это решение более элегантный. благодаря – damir