CODEWITHSUNDEEP
cssmaterialize
user10044012
user10044012

Reputation:

Materialize - Like that triggers sidenav disappears

I am trying to get a sidemenu to work on Materialize when should be very simple:

First I add the sidenav content to the page:

<ul id="slide-out" class="sidenav">
<li><div class="user-view">
  <div class="background">
    <img src="images/office.jpg">
  </div>
  <a href="#user"><img class="circle" src="images/yuna.jpg"></a>
  <a href="#name"><span class="white-text name">John Doe</span></a>
  <a href="#email"><span class="white-text email">[email protected]</span></a>
</div></li>
<li><a href="#!"><i class="material-icons">cloud</i>First Link With Icon</a></li>
<li><a href="#!">Second Link</a></li>
<li><div class="divider"></div></li>
<li><a class="subheader">Subheader</a></li>
<li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
</ul>

Then I add the jquery code:

$( document ).ready(function() {
 $('.sidenav').sidenav();
});

And finally the part where to problem is:

I have a nav which goes at the top of the page:

<nav>
<div class="nav-wrapper">
  <a href="#" class="brand-logo" data-target="slide-out" class="sidenav-trigger"><img src="icon.png" alt="" /></a>

  <ul class="left hide-on-med-and-down" style="position: relative; left: 100px;">
    <li><a href="#" data-target="slide-out" class="sidenav-trigger">Trigger SideNav</a></li><!-- This is just not showing -->
  </ul>

</div>
</nav>

For some reason this menu is not showing:

 <li><a href="#" data-target="slide-out" class="sidenav-trigger">Trigger SideNav</a></li>

unless I take this off it ... data-target="slide-out" class="sidenav-trigger"

How can I fix this?

Upvotes: 2

Views: 2681

Answers (3)

Divyansh Rai
Divyansh Rai

Reputation: 190

For reputation reasons, I'm not allowed to comment. It'll work with the javascript code

document.addEventListener('DOMContentLoaded', function(){
var elems = document.querySelectorAll('.sidenav');
var instances = M.Sidenav.init(elems, {});
});

Instead of the code which is given in the official documentation you've to change this piece of code

M.Sidenav.init(elems, options);

with this

M.Sidenav.init(elems, {});

With the official javascript code you'll notice that there's an error in the console when you load the page.

Upvotes: 0

Enric Mieza
Enric Mieza

Reputation: 342

In addition to what Moein said (the sidenav-trigger menu only appears when the page width is less than 993px), you can make it appear all the same adding the show-on-large class to your menu button.

Something like:

    <nav>
        <div class="nav-wrapper">
            <a href="#" data-target="slide-out" class="sidenav-trigger show-on-large"><i class="material-icons">menu</i></a>
            <ul id="nav-mobile" class="right hide-on-med-and-down">
                <li><a href="#" data-target="slide-out">Menu</a></li>
                <li><a href="">Info</a></li>
            </ul>
        </div>
    </nav>

Upvotes: 1

Moein Hosseini
Moein Hosseini

Reputation: 1596

as I know this is not a problem and the element that has sidenav-trigger class will be shown when the width of the browser is less than 993px. just resize your browser window width to reach less than 993px and see the result.

If it does not work:

I think the problem can be with the content of your link. replace the image with a text and try again.

Upvotes: 0

Related Questions