Question

我正在尝试将基于Sidr的菜单合并到我的rails应用程序中。我遵循了www.berriart.com/sidr/上提供的指南，并且一切似乎都正常，但是，当我刷新页面时，菜单内容（以ul为单位）呈现在Sidr菜单之外。当我单击菜单按钮时，此问题得以解决，但每次刷新页面时都会再次发生，但在需要新页面时却不会发生。你知道是什么原因造成的吗？

<!DOCTYPE html>
<html>
  <head>
    <title>Somme</title>
    <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css">
    <link href='http://fonts.googleapis.com/css?family=Roboto:100,300,400,700,500' rel='stylesheet' type='text/css'>
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
    <%= csrf_meta_tags %>
    <!-- begin slidr links -->
    <!-- Your other stuff  (you can have problems if you don't add minimum scale in the viewport) -->
    <meta name="viewport" content="width=device-width,minimum-scale=1">
    <!-- Include a Sidr bundled CSS theme -->
    <link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.sidr/2.2.1/stylesheets/jquery.sidr.dark.min.css">
    <!-- end slidr links -->
  </head>
  <body>
<div class="header">
  <div class="container">
    <%= link_to root_path do %>
      <%= image_tag "http://s3.amazonaws.com/codecademy-content/projects/3/bass-music/logo.svg", class: "logo" %>
    <% end %>
    <!-- begin slidr menu -->
    <a id="right-menu" href="#right-menu"><img class="menuicon" src="https://s3.amazonaws.com/codecademy-content/projects/z2d/stories/menu-white.svg"></a>

    <div id="sidr-right">
      <!-- Your content -->
      <% if current_user %> 
        <ul> 
          <li><%= current_user.display_name %></li>
          <li><%= link_to "Profile", user_path(current_user.id) %></li> 
          <li><%= link_to "Log out", logout_path, method: "delete" %></li> 
          <li><%= link_to 'New Recipe', new_recipe_path %></li>
        </ul> 
      <% else %> 
        <ul> 
          <li><%= link_to "Login", 'login' %></a></li> 
          <li><%= link_to "Signup", 'signup' %></a></li> 
          <li><%= link_to 'New Recipe', new_recipe_path %></li>
        </ul> 
      <% end %>
    </div>

    <script>
    $(document).ready(function() {
      $('#right-menu').sidr({
        name: 'sidr-right',
        side: 'right'
      });
    });
    </script>
    <!-- end slidr menu -->
  </div>
</div>

<div class="main">
  <div class="container">

    <%= yield %>

  </div>
</div>

<div class="footer">
  <div class="container">
    <div class="col-md-2">
      <ul>
        <h3>Account</h3>
        <li><a href="#">Team</a></li>
        <li><a href="#">Team</a></li>
        <li><a href="#">Jobs</a></li>
      </ul> 
    </div>
    <div class="col-md-2">
      <ul>
        <h3>About</h3>
        <li><a href="#">Team</a></li>
        <li><a href="#">Team</a></li>
        <li><a href="#">Jobs</a></li>
      </ul>
    </div>
    <div class="col-md-2">
      <ul>
        <h3>Support</h3>
        <li><a href="#">Help Center</a></li>
        <li><a href="#">Get Started</a></li>  
        <li><a href="#">Contact Us</a></li>
      </ul>
    </div>
    <div class="col-md-2">
      <ul>
        <h3>Community</h3>
        <li><a href="#">Facebook</a></li>
        <li><a href="#">Twitter</a></li>
        <li><a href="#">Google+</a></li>
      </ul>
    </div>
  </div>
</div>
<!-- begin slidr links -->
<!-- Include jQuery -->
<script src="//cdn.jsdelivr.net/jquery/2.2.0/jquery.min.js"></script>
<!-- Include the Sidr JS -->
<script src="//cdn.jsdelivr.net/jquery.sidr/2.2.1/jquery.sidr.min.js"></script>
<!-- end slidr links -->

Sidr菜单列表渲染外部菜单

0 个答案: