web-dev-qa-db-ja.com

CSSのマテリアライズ-Sidenavオーバーレイがすべてのページをカバー

Materialize cssを使用していますが、中画面と小画面でナビゲーションバーをsidenavに切り替えたいと思います。 documentation のようにやりました。問題は、メニューボタンをクリックすると、sidenavが開きますが、下の画像のようになっていることです。

sidenav

Sidenav-overlayがsidenav自体も含めてすべてのページをカバーしているため、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）であることに気付き、問題が発生する可能性があると思います。ただし、side-navの位置は固定されており、z-indexは999です。位置が固定されていても、親に依存しますか？

編集：sidenav-overlayのleftプロパティを変更することで解決できますが、手動で設定したくありません。私は別の解決策を探しています。

jqueryhtmlcssmaterialize
18
Bünyamin Sarıgül

私も同じ問題を抱えていました。 <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>
26
Richard Luck

マテリアライズCSSファイルを変更して、#sidenav-overlayのz-indexを990に変更します。これにより、問題が解決しました。

0
Jerusalem Programmer

私は同じ問題を抱えていました、そして修正はどんなz-indexをいじるよりもはるかに簡単です。単にあなたの実際の

<ul class="side-nav" id="mobile-sidenav">

コンテンツは<header></header>タグのoutsideです。ヘッダータグ内にある場合は、ここに投稿したのと同じ動作が表示されます。

私の意見では、これは他の点では優れたマテリアライズドキュメントのせいです。彼らは、sidenavHTMLを<nav></nav>タグ内に含めるべきではないことを明確にしていますが、ヘッダータグ内で機能しないことを示していません。

sumでは、トリガーは<nav></nav>タグ内にあり、実際のsidenavコンテンツは</header>の終了後に定義されている必要があります。 。これは、z-indexをいじるよりも優れています。これは、他のことを壊して、メンテナンスの頭痛の種になる可能性があるためです。

enter image description here

0
Joel Wigton

マテリアライズCSSファイルを変更して、#sidenav-overlayをに変更します

#sidenav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 120vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 996;
    will-change: opacity;
}
0
Avinash Singh