Menu
I'm using a sidebar with a navbar at the top that just displays the hamburger button (when mobile), and a refresh button. It does this fine, but when you click the hamburger icon nothing happens! The sidebar doesn't open. How can I fix this?
Here's my code (the stuff the matters):
<div class="navbar-fixed">
<nav class="navbar blue">
<div class="nav-wrapper">
<ul class="right hide-on-med-and-down">
<li><a onClick="window.location.reload()"><i class="material-
icons">refresh</i></a></li>
</ul>
<a href="#" data-target="slide-out" class="sidenav-trigger"><i
class="material-icons">menu</i></a>
</div>
</nav>
</div>
<ul id="slide-out" class="sidenav sidenav-fixed">
...
</ul>
And yes, I do have the Materialize CSS and JS, with jQuery version 2.1.1.
Please see this fiddle for a working solution and how to import the needed js.
Code:
<head>
<title></title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<script>
<!-- this part is important! -->
$(document).ready(function () {
$(".button-collapse").sideNav();
});
</script>
</head>
<body>
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper">
<a href="#!" class="brand-logo">Logo</a>
<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
<ul class="right hide-on-med-and-down">
<li><a href="sass.html">Sass</a></li>
<li><a href="badges.html">Components</a></li>
<li><a href="collapsible.html">Javascript</a></li>
<li><a href="mobile.html">Mobile</a></li>
</ul>
</div>
</nav>
</div>
<ul class="side-nav" id="mobile-demo">
<li><a href="sass.html">Sass</a></li>
<li><a href="badges.html">Components</a></li>
<li><a href="collapsible.html">Javascript</a></li>
<li><a href="mobile.html">Mobile</a></li>
</ul>
</body>
Remember to initialize the sideNav in your document.ready() function!
This should do the trick.
200
Add above code in index.html file instead of app.component.html file.
26
answered Jan 21 '26 19:01
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
