सीएसएस को मटेरियलाइज करें - सिडेनाव ओवरले सभी पेज

Question

मैं मटेरियलाइज सीएसएस का उपयोग कर रहा हूं और मैं नेविगेशन बार को मध्य और छोटी स्क्रीन में सिडेनाव में बदलना चाहता हूं। मैंने इसे documentation में किया था। समस्या यह है कि जब मैं मेनू बटन क्लिक करें, sidenav खोला जाता है है, लेकिन इसे नीचे

छवि मैं sidenav-ओवरले के बाद से 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> 

मैंने महसूस किया कि नेवबार निर्धारित 997 की z-index है (जहां sidenav-ओवरले भी 997 है), और मैं इसे समस्या का कारण हो सकता है। हालांकि, साइड-एनवी ने 999 के पोजिशनिंग और z-index को तय किया है। क्या यह अपने माता-पिता पर निर्भर है भले ही इसकी स्थिति तय हो?

संपादित करें: मैं sidenav-ओवरले का left संपत्ति में बदलाव के साथ इसे हल कर सकते हैं, लेकिन मैं इसे मैन्युअल रूप से स्थापित करने के लिए नहीं करना चाहती। मैं एक और समाधान की तलाश में हूं।

Answer 1

मुझे एक ही समस्या थी। क्योंकि <ul class="side-nav"><div class="navbar-fixed">और के भीतर निहित है ओवरले में एक ही जेड-इंडेक्स है, navbar-fixed का उपयोग करते समय आपको हमेशा यह समस्या होगी।

आप विभिन्न तत्वों के जेड-इंडेक्स के साथ गड़बड़ कर सकते हैं, लेकिन साइड-एनवी सक्रिय होने पर वे प्रत्येक आदर्श प्रदर्शन से कम होते हैं।

इस के आसपास काम करने के लिए, मैंने <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>