Javascript 通过响应页面内容实现侧栏的物化_Javascript_Css_Html_Material Design

Javascript 通过响应页面内容实现侧栏的物化

javascript css html

Javascript 通过响应页面内容实现侧栏的物化,javascript,css,html,material-design,Javascript,Css,Html,Material Design,我刚开始使用materialize 我已经创建了侧栏，默认情况下它应该保持打开状态，当点击菜单按钮时，它应该能够显示/隐藏 Jsfiddle：目前的问题是：单击菜单按钮打开侧栏时，页面内容将被禁用在菜单中，标题、第一行、第二行文本不显示一些额外的div内容出现在版权页脚上方如果有人能帮我改善这个外观，我将不胜感激 html: 标题第一行第二线 ©2014版权文本让我回答你的问题： 1）这是sidenav插件的默认行为 2）导航文本的默认颜色为白色。设置

我刚开始使用materialize

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

Jsfiddle：

目前的问题是：

单击菜单按钮打开侧栏时，页面内容将被禁用

在菜单中，标题、第一行、第二行文本不显示

一些额外的div内容出现在版权页脚上方

如果有人能帮我改善这个外观，我将不胜感激

html:






标题
第一行

第二线







©2014版权文本

让我回答你的问题：

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

2）导航文本的默认颜色为白色。设置一个

nav{color:#000}

规则，它就会工作

3）您必须删除页脚的填充

footer.page-footer{padding top:0px；}

都是CSS和开发工具

这是一张工作票

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

更新：我认为多重覆盖是一个尚未修复的缺陷。看一看a

我注意到了另一个问题，尽管我不确定是否是JSFIDLE在播放：打开菜单，打开一个新选项卡，返回到FIDLE，单击body关闭菜单。非常感谢，但我仍然想实现1，当侧栏打开时，我看到的网站很少，页面内容在右侧移动，可以与侧栏一起看到。侧栏可以在不影响页面内容的情况下打开/关闭。我的意思是，像这样的东西不是materialise sidenav的工作方式。也许您需要更改库或使用自定义代码创建库。这是一个古老但很好的css技巧示例

<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>