Question

$(document).ready(function() {
  $('.sidenav').sidenav();
});

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <script type="text/javascript" src="../js/script.js"></script>
  <link rel="stylesheet" href="../css/style.css">
  <meta charset="utf-8">
  <title>Web Mail</title>
</head>

<body>

  <nav id="navBar">
    <div class="nav-wrapper">
      <ul class="left">
        <a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>
        </li>
      </ul>
      <ul class="right">
        <li><a href="#!"><i class="material-icons right">archive</i></a>
        </li>
        <li><a href="#!"><i class="material-icons right">delete</i></a>
        </li>
        <li><a href="#!"><i class="material-icons right">mail</i></a>
        </li>
      </ul>
    </div>
  </nav>

  <ul id="slide-out" class="sidenav">
    <li>
      <div class="user-view">
        <div class="background">
          <img src="../images/sidePanelBackgroundImage.jpg">
        </div>
        <a href="#user"><img class="circle" src="../images/profilePicture.png"></a>
        <a href="#name"><span class="white-text name">John Doe  </span></a>
        <a href="#email"><span class="white-text email">test@gmail.com</span></a>
      </div>
    </li>
    <li><a href="#!"><i class="material-icons">mail_outline</i>Notifications On</a>
      <li>
        <li><a href="#!"><i class="material-icons">local_phone</i>(XXX)-XXX-XXXX</a>
          <li>
            <li>
              <div class="divider"></div>
            </li>
            <li><a class="subheader">Mail Functions</a></li>
            <a class="waves-effect waves-light btn-small" id="sendMail"><i class="material-icons left">mail</i>Send Mail</a>
            <a class="waves-effect waves-light btn-small" id="viewMail"><i class="material-icons left">drafts</i>View Mailbox</a>
  </ul>

  <a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>

</body>

</html>

我不确定如何移动导航栏下方显示的菜单项，了解如何使用实现。我希望每当在导航栏（Web）中单击菜单按钮时，弹出侧面板。

我尝试了各种操作，包括将slideOut移到navBar中，但是菜单项因此消失了。

Answer 1

将<p>This is some text followed by the word <div>, but not an actual div.</p>的样式覆盖为sidenav-trigger

display:block !important

$(document).ready(function() {
  $('.sidenav').sidenav();
});

如何获得“菜单”按钮以出现在“导航栏实现” CSS中？

1 个答案: