javascript - Materialize side-nav links doesn't work

Question

I'm making an web with materializecss but links I add on the side nav doesn't work what can I do with it,

When I click the link the side-nav close code:

<div class="navbar-fixed">
    <nav>
        <div class="nav-wrapper">
            <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
            <a href="index.php" class="brand-logo left thin" title="bcgraphixx">Page Title</a>
            <ul class="right hide-on-med-and-down">
                <li><a class="waves-effect" href="index.php">Home</a></li>
                <li><a class="waves-effect" href="about-us.php">About us</a></li>
                <li><a class="waves-effect" href="services.php">Services</a></li>
                <li><a class="waves-effect" href="book.php">booking</a></li>
            </ul>

            <ul class="side-nav" id="mobile-demo">
                <li>
                    <div class="userView">
                        <div class="background">
                            <img src="<?php echo $srcurl; ?>/cover.png">
                        </div>
                        <a href="#!admin"><img class="circle" src="<?php echo $srcurl; ?>/logo.png"></a>
                        <a href="#!bcgraphix" title="bcgraphixTemplate"><span class="black-text name">DIGINEWS</span></a>

                    </div>
                </li>

                <li><a href="##"><center>MENU</center></a></li>
                <li><a class="waves-effect" href="index.php">Home</a></li>
                <li><a class="waves-effect" href="about-us.php">About us</a></li>
                <li><a class="waves-effect" href="services.php">Services</a></li>
                <li><a class="waves-effect" href="book.php">booking</a></li>
            </ul>

            <script>  $(".button-collapse").sideNav(); </script>
        </div>

    </nav>
</div>

Answer 1

1. Wrap your JS code for sideNav within documentReady event, and set parameter closeOnClick as true.

2. Bring your side menu (ul element with class"side-nav") at the same level of div with class navbar-fixed . This is to avoid known issues with overlay. See this stackoverflow question and accepted answer

$( document ).ready(function(){
$('.button-collapse').sideNav({
      closeOnClick: true
    }
  );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>

<div class="navbar-fixed">
    <nav>
        <div class="nav-wrapper">
            <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
            <a href="#" class="brand-logo right thin" title="bcgraphixx">Page Title</a>
            <ul class="right hide-on-med-and-down">
                <li><a class="waves-effect" href="#">Home</a></li>
                <li><a class="waves-effect" href="#">About us</a></li>
            </ul>
        </div>
    </nav>
</div>
<ul class="side-nav" id="mobile-demo">
   <li><a href="##"><center>MENU</center></a></li>
   <li><a class="waves-effect" href="#!">Home</a></li>
   <li><a class="waves-effect" href="#!">About us</a></li>
</ul>