[英]Materialize side-nav links doesn't work
I'm making an web with materializecss but links I add on the side nav doesn't work what can I do with it, 我正在使用materializecss制作网络,但在侧面导航上添加的链接不起作用,该怎么办,
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>
Wrap your JS code for sideNav within documentReady
event, and set parameter closeOnClick
as true
. 在documentReady
事件中包装sideNav的JS代码,并将参数closeOnClick
设置为true
。
Bring your side menu (ul element with class"side-nav") at the same level of div with class navbar-fixed
. 将侧边菜单(类为“ side-nav”的ul元素)带入与navbar-fixed
类相同的div级别。 This is to avoid known issues with overlay. 这是为了避免重叠的已知问题。 See this stackoverflow question and accepted answer 查看此stackoverflow问题和可接受的答案
$( 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>
simply code below.... 只需在下面编写代码即可。...
you need to add CDN of materialize sc,js and jquery js 您需要添加实现SC,JS和jQuery JS的CDN
Here is your fix nav bar 这是您的固定导航栏
<div class="navbar-fixed">
<nav class="nav-wrapper">
<div class="container">
<a href="" class="brand-logo">Picnic.lk</a>
<a href="" class="sidenav-trigger" data-target="mobile-menu">
<i class="material-icons">menu</i>
</a>
<ul class="hide-on-med-and-down right">
<li><a href="#photos">Photos</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contacts</a></li>
</ul>
</div>
</nav>
</div>
your mobile nav bar (side nav) 您的移动导航栏(侧面导航)
<ul class="sidenav grey lighten-2" id="mobile-menu">
<li><a class="sidenav-close" href="#photos">Photos</a></li>
<li><a class="sidenav-close" href="#services">Services</a></li>
<li><a class="sidenav-close" href="#contact">Contacts</a></li>
</ul>
Add below js code 在下面添加js代码
<script>
$(document).ready(function(){
//side navigation
$('.sidenav').sidenav({
//your additional code goes here
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.