Html 在一页上实现侧导航栏打开-在第二页上不工作_Html_Css_Materialize_Sidebar

Html 在一页上实现侧导航栏打开-在第二页上不工作

html css

Html 在一页上实现侧导航栏打开-在第二页上不工作,html,css,materialize,sidebar,Html,Css,Materialize,Sidebar,我已经搜索了论坛中的每一个帖子，但无法解决我的问题。我认为这主要是因为我对编码还不熟悉，可能还没有完全理解它请帮助下面的第二页是关于这个问题的。侧导航不工作，无法在页面上以下面的代码打开。而且，当您在页面上单击“上一步”时，它也不会关闭 <body>  <header class="main-header-inner"> <div class="navbar-fixed"&

我已经搜索了论坛中的每一个帖子，但无法解决我的问题。我认为这主要是因为我对编码还不熟悉，可能还没有完全理解它

请帮助下面的第二页是关于这个问题的。侧导航不工作，无法在页面上以下面的代码打开。而且，当您在页面上单击“上一步”时，它也不会关闭

   <body>
      <!-- Header -->
      <header class="main-header-inner">
          <div class="navbar-fixed">
        <nav class="transparent">
          <div class="container">
            <div class="nav-wrapper">
              <img src="img/logo2.png">
              <a href="#" data-activates="mobile-nav" class="button-collapse">
                <i class="fa fa-bars"></i></a>
              <ul class="right hide-on-med-and-down">
                <li>
                  <a class="grey-text text-lighten-3" href="index.html">Home</a>
                </li>
                  <li>
                      <a class="grey-text text-lighten-3" href="solutions.html">Solutions</a>
                    </li>
                    <li>
                        <a class="grey-text text-lighten-3 " href="index.html">About us</a>
                      </li>
                      <li>
                          <a href="https://be.linkedin.com/">
                         <i class="fab fa-linkedin fa-1x grey-text text-lighten-3"></i></a>
                        </li>
              </ul>
            </div>
            </div>
            </nav>
          </div>

              <div>
                  <ul class="side-nav" id="mobile-nav">
                    <h4 class="black-text text-darken-4 center">Lueur Tech</h4>
                    <li>
                      <div class="divider"></div>
                    </li>
                    <li>
                      <a href="index.html">
                        <i class="fa fa-home black-text text-darken-4"></i> Home</a>
                    </li>
                    <li>
                      <div class="divider"></div>
                    </li>
                    <li>
                        <a href="solutions.html">
                        <i class="fas fa-lightbulb fa-1x black-text text-lighten-3"></i> Solutions</a>
                      </li>
                      <li>
                          <div class="divider"></div>
                        </li>
                      <li>
                          <a href="index.html">
                          <i class="fa fa-info-circle fa-1x black-text text-lighten-3"></i> About us</a>
                        </li>
                  </ul>
                  </div>













卢厄科技公司

索引页中没有问题，但我已经交叉检查了这两个代码，没有发现任何不同。我唯一的问题是，除非您单击某个链接，否则它将保持打开状态。如果您单击页面上的“上一步”，我希望它关闭

    <body>
  <!-- Header -->
  <header class="main-header">
      <div class="navbar-fixed">
    <nav class="transparent">
      <div class="container">
        <div class="nav-wrapper">
         <img src="img/logo2.png">
          <a href="#" data-activates="mobile-nav" class="button-collapse">
            <i class="fa fa-bars"></i>
          </a>
          <ul class="right hide-on-med-and-down">
            <li>
              <a class="grey-text text-lighten-3" href="index.html">Home</a>
            </li>
            <li>
                <a class="grey-text text-lighten-3" href="solutions.html">Solutions</a>
              </li>
              <li>
                  <a class="grey-text text-lighten-3 " href="#About">About us</a>
                </li>
                <li>
                    <a href="https://be.linkedin.com/">
                   <i class="fab fa-linkedin fa-1x grey-text text-lighten-3"></i></a>
                  </li>
          </ul>
        </div>
      </div>
        </nav>
        </div>

        <div>
          <ul class="side-nav" id="mobile-nav">
            <h4 class="black-text text-darken-4 center">Lueur Tech</h4>
            <li>
              <div class="divider"></div>
            </li>
            <li>
              <a href="index.html">
                <i class="fa fa-home black-text text-darken-4"></i> Home</a>
            </li>
            <li>
              <div class="divider"></div>
            </li>
            <li>
                <a href="solutions.html">
                <i class="fas fa-lightbulb fa-1x black-text text-lighten-3"></i> Solutions</a>
              </li>
              <li>
                  <div class="divider"></div>
                </li>
              <li>
                  <a href="#About">
                  <i class="fa fa-info-circle fa-1x black-text text-lighten-3"></i> About us</a>
                </li>
          </ul>
      </div>













卢厄科技公司

谢谢你的帮助

更新：sideNav在codepen.io/Bjorn_Ironside1986/pen/VRbyvL中工作，但在codepen.io/Bjorn_Ironside1986/pen/OqmOdR中不工作

这两个是查看代码笔工作所必需的

<!--Import jQuery before materialize.js-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

我认为这是因为您从未关闭标题标记。

您需要一些javascript来初始化侧导航-在下面的代码中，我刚刚添加了侧导航从左侧打开的选项。。。单击左侧的菜单按钮

希望对你有用

document.addEventListener（'DOMContentLoaded'，function（）{
var elems=document.querySelectorAll（'.sidenav'）；
var instances=M.Sidenav.init（elems{
边缘：“左”
});
});



























数字世界
解决
我们所做的。。。
解决方法是解决问题的方法，当你考虑今天的世界问题时，一切都归结为语言、数学、技术和科学！如果你考虑一下这些代表，如果我们把它们拆掉的话，就可以看到它。
以某种形式编写代码，将其组织在一起以创建创新




强大创新
我们的目标是帮助您，并提供高质量的服务，以帮助您扩大业务规模，抓住新客户，并用我们的设计留住现有客户！




用户友好的应用程序
作为一项业务，重点在于客户和用户产生兴趣或购买服务和产品。我们在每项设计中都将重点放在功能性和可访问性上，以确保用户保持兴趣。我们要求你
提供解释您的产品或服务所需的信息，以便用户做出明智的选择
用户和客户端数据的安全性
在当今社会，信息是黄金的新形式。我们可以就欧盟GDPR和英国数据保护法等政策向您提供建议。根据您的wesbites结构，我们将通知您任何可能有助于防止网络犯罪的产品。

资料分析

数据有助于企业的发展，因为它可以显示不断增长的趋势或指出可能的问题。有了这些信息，企业可以采取步骤来保护