使用响应式页面内容实现侧边栏答案

【问题标题】：materialize side bar with responsive page content使用响应式页面内容实现侧边栏
【发布时间】：2015-09-09 14:26:29
【问题描述】：

我刚刚开始使用物化

我已经创建了侧边栏，默认情况下应该保持打开状态，当点击菜单按钮时它应该能够显示/隐藏。

Jsfiddle：https://jsfiddle.net/karimkhan/5hrpcp1j/16/

目前的问题是：

点击菜单按钮打开侧栏时页面内容被禁用
在菜单、标题、第一行、第二行文字不出现
版权页脚上方出现一些额外的 div 内容。

如果有人可以帮助我改善这种外观，我将不胜感激。

html:

<body>
    <main>
         <nav>
              <div class="nav-wrapper light-blue lighten-1">
                <ul id="nav-mobile" class="full side-nav">

                    <li><a href="sass.html">John Daglas</a>
                      <ul class="collection">
                        <li class="collection-item avatar">
                          <img src="http://globe-views.com/dcim/dreams/dog/dog-05.jpg" alt="" class="circle">
                          <span class="title">Title</span>
                          <p>First Line <br>
                             Second Line
                          </p>
                        </li>
                      </ul>
                    </li>
                <li><a href="components.html">Components</a></li>
                <li><a href="javascript.html">Javascript</a></li>
                </ul>

                <!-- Include this line below -->
                <a class="button-collapse" href="#" data-activates="nav-mobile"><i class="mdi-navigation-menu"></i></a>
                <!-- End -->

              </div>
        </nav>


    </main>
    <footer class="page-footer">
        <div class="footer-copyright">
            <div class="container">© 2014 Copyright Text <a class="grey-text text-lighten-4 right" href="#!">More Links</a>

            </div>
        </div>
    </footer>
</body>

【问题讨论】：

我注意到另一个问题，虽然我不确定是不是 jsfiddle 在播放：打开菜单，打开一个新标签，返回 fiddle，单击 body 以关闭菜单。

标签： javascript css html material-design

【解决方案1】：

让我来回答你的问题：

1) 这是 sidenav 插件的默认行为。

2) 导航文本的默认颜色是白色。设置nav { color: #000 } 规则，它会起作用

3) 您必须删除页脚 footer.page-footer { padding-top: 0px; } 的填充

都是 CSS 和开发工具！

这是一个有效的jsfiddle

注意：对于您的最后一条评论，有时出于某种原因，它会创建两个叠加层，因此只会删除一个。在您的环境中检查它以获得更好的调试。

更新：我认为多重叠加是一个尚未修复的错误。看看this

【讨论】：

非常感谢，但我仍然想达到 1，我看到很少有网站在打开侧边栏时，页面内容会移动到右侧，并且可以与侧边栏一起看到。侧边栏可以打开/关闭而不影响页面内容。我的意思是preview.themebucket.net/?item=bucketadmin
这不是 materialize sidenav 的工作方式。也许您需要更改您的库或使用自定义代码创建它。这是来自 css 技巧的一个古老但很好的例子 css-tricks.com/off-canvas-menu-with-css-target