please if you can help me to make the menu functioning when clicking on mobile, sidenav works but not disappearing when clicking on a link. It remains open the overlay covering the page loaded.
I paste the code, it could be messy (i know), but not prepared, and I've just made some attempts (sorry for my English, I'm Italian).
<script type="text/javascript" src="js/materialize.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/materialize.js"></script>
<script src="js/init.js"></script>
<script src=js/jquery.js type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.sidenav');
var instances = M.Sidenav.init(elems, options);
});
// Or with jQuery
$(document).ready(function(){
$('.sidenav').sidenav();
});
$( document ).ready(function(){
$('.sidenav').sideNav({
closeOnClick: true
}
);
});
</script>
<script>
(function($){
$(function(){
$('.sidenav').sideNav();
}); // end of document ready
})(jQuery); // end of jQuery name space
<!--Fixed Navbar -->
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper white">
<a href="#" class="brand-logo">xxxx</a>
<a href="#" class="sidenav-trigger" data-target="mobile-nav" ><i class="material-icons">menu</i></a>
<ul class="right hide-on-med-and-down">
<li><a href="#servizio">Prezzi</a></li>
<li><a href="#preventivi">Cosa posso fare per te</a></li>
</ul>
</div>
</nav>
</div>
<ul class="sidenav" id="mobile-nav">
<li><a href="#servizio">Prezzi</a></li>
<li><a href="#">Cosa posso fare per te</a></li>
</ul>
Add the class .sidenav-close
to an element inside the sidenav and any click event on that element will cause the sidenav to close. Check Documentation for more functions.
<nav>
<div class="nav-wrapper">
<a href="#!" class="brand-logo">Logo</a>
<a href="#" data-target="mobile-demo" class="sidenav-trigger">
<i class="material-icons">menu</i>
</a>
<ul class="right hide-on-med-and-down">
<li>
<a href="#1">Sass</a>
</li>
<li>
<a href="#2">Components</a>
</li>
<li>
<a href="#3">Javascript</a>
</li>
<li>
<a href="#4">Mobile</a>
</li>
</ul>
</div>
</nav>
<ul class="sidenav" id="mobile-demo">
<li>
<a class="sidenav-close" href="#1">Sass</a>
</li>
<li>
<a class="sidenav-close" href="#2">Components</a>
</li>
<li>
<a class="sidenav-close" href="#3">Javascript</a>
</li>
<li>
<a class="sidenav-close" href="#4">Mobile</a>
</li>
</ul>
<script>
$(document).ready(function () {
$('.sidenav').sidenav();
});
</script>