[英]Side-nav doesn't work in material design based mobile app
I wrote a simple page with side-nav functionality.我写了一个带有侧面导航功能的简单页面。 However side-nav fails to open up when clicked on top left corner.
但是,单击左上角时侧导航无法打开。 My code:
我的代码:
Html:
<nav>
<ul class="right hide-on-med-and-down">
<li><a href="#!">First Sidebar Link</a></li>
<li><a href="#!">Second Sidebar Link</a></li>
</ul>
<ul id="slide-out" class="side-nav">
<li><a href="#!">First Sidebar Link</a></li>
<li><a href="#!">Second Sidebar Link</a></li>
</ul>
<a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
</nav>
<div class="row">
<div class="card logincard">
<form class="col s12">
<h5>Enter your mail id to reset your password: </h5>
<div class="row">
<div class="input-field col s12">
<input id="mail" type="email" class="validate">
<label for="mail">Mail</label>
</div>
</div>
<div class="row">
<a class="waves-effect waves-light btn" style="background: #4099FF;">Submit</a>
</div>
</form>
</div>
</div>
JS:
(function($){
$(function(){
$('.button-collapse').sideNav();
}); // end of document ready
})(jQuery); // end of jQuery name space
JSFiddle link is: https://jsfiddle.net/0hq4g3f1/ JSFiddle 链接是: https ://jsfiddle.net/0hq4g3f1/
How can I fix it?我该如何解决?
You need to place your icon (or something) inside a class left
UL你需要将你的图标(或其他东西)放在一个
left
UL 的类中
<nav>
<ul class="left show-on-med-and-down">
<li><a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a></li>
</ul>
<!-- etc -->
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.