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

I just got started with materialize

我刚刚开始实现

I have create side bar,which should remain open by default, and when clicked on menu button it should be able to display/hidden.

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

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

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

Currently issue are:

目前的问题是：

Page content gets disabled when side bar opens on click on menu button
单击菜单按钮打开侧栏时，页面内容将被禁用
In menu, title, first line, second line text does not appear
在菜单中，不显示标题，第一行，第二行文本
some extra div content appears above copyright footer.
一些额外的div内容出现在版权页脚之上。

I appreciate if someone can help me to improve this appearance.

如果有人能帮助我改善这种外观，我很感激。

html:

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>

1 个解决方案

#1

Let me answer your questions:

让我回答你的问题：

1) This is the default behavior of the sidenav plugin.

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

2) The default color for the nav text is white. Set a nav { color: #000 } rule and it will work

2）导航文本的默认颜色为白色。设置导航{color：＃000}规则，它将起作用

3) You have to remove the padding of your footer footer.page-footer { padding-top: 0px; }

3）您必须删除页脚页脚的填充页面页脚{padding-top：0px; }

It's all CSS and devtools!

这都是CSS和devtools！

Here is a working jsfiddle

这是一个工作的jsfiddle

Note: For your last comment, for some reason sometimes, it creates two overlays and as a result removes only one. Check it in your environment for better debugging.

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

Update: I think the multiple overlays is a bug that haven't been fixed. Take a look a this

更新：我认为多重覆盖是一个尚未修复的错误。看看这个

#1