javascript - 使用 SideNav 时调整正面大小 - Materialise

Question

我正在使用 Symfony 和 Materialise 制作一个网站，我的客户希望将菜单放在旁边。我使用了文档 http://materializecss.com/side-nav.html做到这一点，并设法在左侧制作侧边菜单。但是我现在有两个问题:

• 首先，不重要的是，当我在 Firefox 上按 alt 键时，它会通过显示顶部菜单来稍微调整窗口大小，并且侧面菜单从左到右移动。这有点烦人，但没那么重要。
• 其次，侧边菜单下的内容是隐藏的，并且不会调整大小以显示所有内容。我试图制作一个 div 并在 css 中放置一个 margin-left，但它没有用。

这是我的代码 html:

<nav>
<ul id="slide-out" class="side-nav fixed">
  <li><a href="#!">First Sidebar Link</a></li>
  <li><a href="#!">Second Sidebar Link</a></li>
</ul>
<a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a></nav>

这是js:

$('.button-collapse').sideNav({
  menuWidth: 300, // Default is 240
  edge: 'right', // Choose the horizontal origin
  closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor
});

 $('.collapsible').collapsible();

只是文档中的代码，我就遇到了这些问题。如果有人有解决方案，非常感谢!

Answer 1

关于您的第二个问题:您是否在打开侧导航时偏移了非侧导航内容？像这样:

  #app-body{
      padding-left: 320px;

      @media only screen and (max-width : 992px) {
       padding-left: 10px;
      }
    }

这确保在大屏幕上，我的内容偏移 320px(这是我的 sideNav 的宽度，但是当 sideNav 关闭时(当屏幕宽度低于 992px 时)，填充被移除。