MaterializeCSS - Mobile Collapse menu not showing when clicked

10,015

Such is life -- as soon as I complain, the next thing I try works.

I kept the above code and only changed the jQuery Mobile import to point to the local, edited version, and now it runs in Chrome and the menu works.

Most likely something's messed up with me localizing the rest of the dependancies, but for now I'm good.

10,015

Author by

ItsASine

Degree: MS in Applied Mathematics Languages: Protractor, JavaScript, Jasmine, kinda R, kinda Python, theoretically some Cucumber

Updated on June 04, 2022

Comments

ItsASine almost 2 years

I'm beginning a web app using Materialize CSS v0.97, jQuery Mobile v1.4.5, and jQuery v2.1.4.

I'm trying to use the mobile collapse tutorial to have a navbar in the jQuery Mobile header, which on mobile devices changes to a hamburger button with the menu appearing when clicked.

When I resize my browser (Chrome, latest on Mac v10.11) to mobile size, the hamburger appears but clicking or hovering or anything does not make the menu appear.

The only thing I have changed was commenting out a line in jQuery Mobile JS because of this post about how to fix the Chrome security warning.
Could that be why the nav bar isn't working? My site doesn't load at all with the below code because of that warning, so I have everything js and css saved locally with relative links to them. But this snippet worked in the snippet preview...

$( document ).ready(function(){
    $(".button-collapse").sideNav();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.css" rel="stylesheet"/>

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

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">


<body>
<div data-role="page" id="home">
    <div data-role="header">
        <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>
                <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>
            </div>
        </nav>
    </div>
    <!-- /header -->

    <div role="main" class="ui-content">
        <table class="centered">
            <thead>
            <tr>
                <th data-field="collection">Collection</th>
                <th data-field="description"></th>
                <th data-field="progress"></th>
                <th data-field="link"></th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>Stuff 1</td>
                <td>Description of things in Stuff 1. Stuff 1 is really great, ya know? So much stuff in it.</td>
                <td></td>
                <td><i class="material-icons">chevron_right</i></td>
            </tr>
            <tr>
                <td>Stuff 2</td>
                <td>Description of things in Stuff 2. Stuff 2 is really great, ya know? So much stuff in it.</td>
                <td></td>
                <td><i class="material-icons">chevron_right</i></td>
            </tr>
            <tr>
                <td>Stuff 3</td>
                <td>Description of things in Stuff 3. Stuff 3 is really great, ya know? So much stuff in it.</td>
                <td></td>
                <td><i class="material-icons">chevron_right</i></td>
            </tr>
            </tbody>
        </table>
    </div>
    <!-- /content -->
</div>
  <!-- /page -->
  </body>