实现CSS - Sidenav覆盖覆盖整个页面 [英] Materialize CSS - Sidenav overlay covers all the page

问题描述

我正在使用Materialise css，并且想要在中小屏幕上将导航栏变成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 =＃！类=品牌标志> 
< img src =img / logo.png> 
< / a> 
< a href =＃data-activates =mobile-sidenavclass =button-collapse>< i class =material-icons> menu< / i><一个> 
 
< li>< a href =＃>如何运作？< / a>< / li> 
< li>< a href =＃>技术< / a>< / li> 
< li>< a href =＃>定价< / a>< / li> 
< li>< a href =＃>更多< / a>< / li> 
< li>< button class =wave-effect waves -light btn deep-orange>请求演示< / button>< / li> 
< / ul> 
< ul class =side-navid =mobile-sidenav> 
< li>< a href =＃>如何运作？< / a>< / li> 
< li>< a href =＃>技术< / a>< / li> 
< li>< a href =＃>定价< / a>< / li> 
< li>< a href =＃>更多< / a>< / li> 
< li>< button class =wave-effect waves -light btn deep-orange>请求演示< / button>< / li> 
< / ul> 
< / div> 
< / div> 
< / nav> 
< / div> 
  

我意识到navbar-fixed具有 z-index 997（其中sidenav-overlay也是997），我认为这可能会导致问题。然而，side-nav有固定的位置，并且999的 z-index 大小。它是否依赖于它的父母，即使它具有固定位置？

编辑：我可以通过更改sidenav-overlay的 left 属性来解决它，但我不想手动设置它。我正在寻找另一种解决方案。

解决方案

我有同样的问题。由于< ul class =side-nav> 包含在< div class =navbar-fixed> 和叠加层具有相同的z-index，使用 navbar-fixed 时总会遇到这个问题。

您可以使用各种元素的z索引，但是当激活side-nav时，它们每个都会导致显示效果不理想。

要解决这个问题，我在文档结构中将< ul class =side-nav> parallel放置为< div class =navbar-fixed> 并且问题自行解决。像这样：

 < ul class =side-navid =mobile-sidenav> 
< li>< a href =＃>如何运作？< / a>< / li> 
< li>< a href =＃>技术< / a>< / li> 
< li>< a href =＃>定价< / a>< / li> 
< li>< a href =＃>更多< / a>< / li> 
< li>< button class =wave-effect waves -light btn deep-orange>请求演示< / button>< / li> 
< / ul> 
< div class =navbar-fixed> 
< nav class => 
< div class =nav-wrapper red lighten-1> 
< div class =container-fluid> 
< a href =＃！类=品牌标志> 
< img src =img / logo.png> 
< / a> 
< a href =＃data-activates =mobile-sidenavclass =button-collapse>< i class =material-icons> menu< / i><一个> 
 
< li>< a href =＃>如何运作？< / a>< / li> 
< li>< a href =＃>技术< / a>< / li> 
< li>< a href =＃>定价< / a>< / li> 
< li>< a href =＃>更多< / a>< / li> 
< li>< button class =wave-effect waves -light btn deep-orange>请求演示< / button>< / li> 
< / ul> 
< / div> 
< / div> 
< / nav> 
< / div> 
  

I am using Materialize css and I want to turn the navigation bar to sidenav in middle and small screens. I did it just like in the documentation. The problem is that when I click the menu button, sidenav is opened but it is like the image below

I am not able to click the links in the sidenav since the sidenav-overlay covers all the page even the sidenav itself. It is closing when I try to click a link. Any suggestions how to solve it?

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>

I realized that the navbar-fixed have z-index of 997 (where sidenav-overlay is also 997), and I think it may cause the problem. However, side-nav have fixed positioning and z-index of 999. Is it dependent to its parent even if it has fixed position?

Edit: I can solve it with changing the left property of sidenav-overlay, but I don't want to set it manually. I am looking for another solution.

解决方案

I had the same problem. Because <ul class="side-nav"> is contained within <div class="navbar-fixed"> and the overlay has the same z-index, you will always have this problem when using navbar-fixed.

You can mess around with the z-indexes of the various elements, but they each result in less than ideal displays when the side-nav is activated.

To work around this, I put <ul class="side-nav"> parallel in the document structure to <div class="navbar-fixed"> and the problem resolved itself. Like this:

<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>

这篇关于实现CSS - Sidenav覆盖覆盖整个页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！