侧边菜单按钮不会出现在 Materialize 中的导航栏上

Side menu button doesn't come on the NavBar in Materialize.

本文关键字：Materialize 导航 菜单 按钮      更新时间：2023-09-26

我正在使用materialize.min.css和materialize.min.js没有其他样式表。

我做了一个简单的网页。代码： 

{% load static %}
<html>
<head>
<link type="text/css" rel="stylesheet" href="{% static 'css/materialize.min.css' %}">
<link type="text/javascript" href="{% static 'js/jquery-1.11.3.min.js' %}">
<title>
TITLE
</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
</head>
<body data-marker-image="{% static 'img/truck3.png' %}">
<div>
    <nav class="light-green lighten-3">
        <div class="nav-wrapper">
            <a class="brand-logo center" href="SITE" target="_blank">
                LOGO<!-- <img src="{% static 'img/LOGO1.png' %}" style="height: 100%; width: 35%;"/> -->
            </a>            
        </div>
    </nav>
    <div class="side-menu-bar">
        <ul id="slide-out" class="side-nav full">
            <li><a href="#!">About Us</a></li>
            <li><a href="#!">Support</a></li>
        </ul>
        <a href="#" data-activates="slide-out" class="button-collapse">
            <i class="large mdi-navigation-menu white"></i>
        </a>
    </div>
</div>
<main>
    <div id="map-canvas" style="width: 100%; height: 100%;">
        <div id="onmap-div">
            <div id="onmap-price"></div>
        </div>
    </div>
</main>
<footer>
    <div class="page-footer light-green lighten-3">
        <div class="container">             
            Footer Note             
        </div>
    </div>
    <div class="footer-copyright light-green lighten-2">
        <div class="container">
            Copyright
        </div>          
    </div>
</footer>

<script type="text/javascript" src="{% static 'js/jquery-1.11.3.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/materialize.min.js' %}"></script>
<script>$(".button-collapse").sideNav();</script>
<script type="text/javascript">var shipment_id = {{shipment_id}};</script>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&libraries=places&language=en-US"></script>
<script type="text/javascript" src="{% static 'js/socket.io.js' %}"></script>
<script type="text/javascript" src="{% static 'js/map.js' %}"></script>
<script>google.maps.event.addDomListener(window, 'load', initialize());</script>
</body>
</html>

制作的网页是这样的：http://pasteboard.co/1hz4vuHF.png

从图像中可以看出，蓝色按钮没有出现在导航栏的顶部。

如何解决？

PS - 还有如何改变它的颜色？

我认为

这是因为您添加了额外的div

<div class="side-menu-bar">
</div>

尝试删除它。

相关文章：