我正在使用Materialise css,我想在中小屏幕上将导航栏变为sidenav.我就像在
documentation中那样做了.问题是当我点击菜单按钮时,sidenav被打开但是它就像下面的图像
我无法点击sidenav中的链接,因为sidenav-overlay覆盖了所有页面甚至sidenav本身.当我尝试点击链接时它正在关闭.有什么建议怎么解决呢?
HTML:
<div class="navbar-fixed"> <nav class=""> <div class="nav-wrapper red lighten-1"> <div class="container-fluid"> <a href="#!" class="brand-logo"> <img src="img/logo.png"> </a> <a href="#" data-activates="mobile-sidenav" class="button-collapse"><i class="material-icons">menu</i></a> <ul class="right hide-on-med-and-down"> <li><a href="#">How It Works?</a></li> <li><a href="#">Technology</a></li> <li><a href="#">Pricing</a></li> <li><a href="#">More</a></li> <li><button class="waves-effect waves-light btn deep-orange">Request Demo</button></li> </ul> <ul class="side-nav" id="mobile-sidenav"> <li><a href="#">How It Works?</a></li> <li><a href="#">Technology</a></li> <li><a href="#">Pricing</a></li> <li><a href="#">More</a></li> <li><button class="waves-effect waves-light btn deep-orange">Request Demo</button></li> </ul> </div> </div> </nav> </div>
我意识到navbar-fixed的z-index为997(其中sidenav-overlay也是997),我认为这可能会导致问题.然而,侧导航有固定的定位和z-index为999.即使它有固定的位置,它是否依赖于它的父亲?
编辑:我可以通过更改sidenav-overlay的left属性来解决它,但我不想手动设置它.我正在寻找另一种解决方案.
解决方法
我有同样的问题.因为< ul class =“side-nav”>包含在< div class =“navbar-fixed”>中并且叠加层具有相同的z-index,使用navbar-fixed时总会遇到此问题.
您可以使用各种元素的z索引,但是当激活侧导航时,它们每个都会导致不太理想的显示.
为了解决这个问题,我把< ul class =“side-nav”>在文档结构中并行到< div class =“navbar-fixed”>问题解决了.像这样:
<ul class="side-nav" id="mobile-sidenav"> <li><a href="#">How It Works?</a></li> <li><a href="#">Technology</a></li> <li><a href="#">Pricing</a></li> <li><a href="#">More</a></li> <li><button class="waves-effect waves-light btn deep-orange">Request Demo</button></li> </ul> <div class="navbar-fixed"> <nav class=""> <div class="nav-wrapper red lighten-1"> <div class="container-fluid"> <a href="#!" class="brand-logo"> <img src="img/logo.png"> </a> <a href="#" data-activates="mobile-sidenav" class="button-collapse"><i class="material-icons">menu</i></a> <ul class="right hide-on-med-and-down"> <li><a href="#">How It Works?</a></li> <li><a href="#">Technology</a></li> <li><a href="#">Pricing</a></li> <li><a href="#">More</a></li> <li><button class="waves-effect waves-light btn deep-orange">Request Demo</button></li> </ul> </div> </div> </nav> </div>