側面菜單按鈕不在實體化中的導航欄上。

我正在使用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

，藍色按鈕上沒有的NavBar的頂部來臨你可以從圖像中看到。

如何解決？

PS - 還有如何改變它的顏色？

來源

2015-06-17 Abhyudit Jain

你可以把'' 線下方''

我不工作:( –

其實這是圖像 – stanze

我想這是因爲你添加了額外的div

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

嘗試移除。

來源

2015-06-18 22:54:21 Tony

側面菜單按鈕不在實體化中的導航欄上。

回答

相關問題