TutorialMeta
Ad

How To Add Mobile Collapsing Navarro To Django Using Materialize Css?

- 1 answer

I have some problems adding a navbar that collapses into a ‘hamburger bar’ at mobile devices and when a device is in split view. This is what I have done so far, the hamburger bar shows but when I click on it nothing happens, my code:

<head>
    <link target="_blank" rel="nofollow noreferrer" href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    {% load static %}
    <link rel="shortcut icon" type="image/JPG" target="_blank" rel="nofollow noreferrer" href="{% static 'images/favicon.ico' %}"/>
    <link target="_blank" rel="nofollow noreferrer" href="{% static "tinymce/css/prism.css" %}" rel="stylesheet">
    <link rel="stylesheet" target="_blank" rel="nofollow noreferrer" 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>
</head>


<body>

<div class="navbar-fixed">
  <nav>
      <div class="nav-wrapper  teal lighten-1">
        <a target="_blank" rel="nofollow noreferrer" href="#!" class="brand-logo"><i class="material-icons">assignment </i>Logo</a>
        <a target="_blank" rel="nofollow noreferrer" href="#" data-target="mobile" class="sidenav-trigger"><i class="material-icons">menu</i></a>
        <ul class="right hide-on-med-and-down">
          <li><a target="_blank" rel="nofollow noreferrer" href="/">Home</a></li>
          <li><a target="_blank" rel="nofollow noreferrer" href="/newsroom">Newsroom</a></li>
        </ul>
      </div>
    </nav>
  </div>

  <ul class="sidenav" id="mobile">
    <li><a target="_blank" rel="nofollow noreferrer" href="/">Home</a></li>
    <li><a target="_blank" rel="nofollow noreferrer" href="/newsroom">Newsroom</a></li>
  </ul>

<script language="javascript">
document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.sidenav');
    var instances = M.Sidenav.init(elems, options);
  });
</script>

  <div>
    {% block content %}
    {% endblock %}
  </div>

</body>

<script src="{% static "tinymce/js/prism.js" %}"></script>

I think the problem is about the javascript part, but I can’t solve it.

Thanks from now!

Ad

Answer

Take out the undefined options variable:

<script language="javascript">
document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.sidenav');
    var instances = M.Sidenav.init(elems);
  });
</script>

it is an issue with the documentation, not you.

Ad
source: stackoverflow.com
← Previous Post
Next Post →

Related Questions

Ad