實現 - 全屏幕滑塊和導航欄

在項目開發期間，我決定使用全屏幕圖像滑塊。正如在官方網站上所示：Link 實現 - 全屏幕滑塊和導航欄

通過這種方式，導航欄消失了，但在Youtube視頻中，我看到有一種方法（我不知道）爲了保持全部屏幕滑塊和導航欄。任何人都可以幫我解決這個問題嗎？有沒有辦法兼顧這兩個功能？謝謝。

下面是代碼：

<!DOCTYPE html> 
<html> 

<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
    <script src="./script.js"></script> 
    <!-- Compiled and minified CSS --> 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css"> 

     <!-- Compiled and minified JavaScript --> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script> 
     <script src="./src/jquery.js"></script> 
     <script src="./src/js.js"></script> 
     <title>Home Automation - Test</title> 
     <meta charset="utf-8" lang="it"> 
     <link rel="stylesheet" href="./css/mycss.css"> 
    </head> 

<body class="bkground"> 
    <nav class="teal darken-1"> 
     <div class="nav-wrapper"> 
      <a href="#" class="brand-logo right">Domotic Home</a> 
      <ul id="nav-mobile" class="left hide-on-med-and-down"> 
       <li class="active"><a href="index.html">General</a></li> 
       <li><a href="homecontrol1.html">Home Control - First floor</a></li> 
       <li><a href="homecontrol2.html">Home Control - Second floor</a></li> 
       <li><a href="privatearea.html">Private Area</a></li> 
      </ul> 
     </div> 
    </nav> 
    <br> 
    <br> 
    <div class="slider fullscreen"> 
     <div class="main-content"> 
      <ul class="slides"> 
       <li> 
        <img src="./img/1.jpg"> 
       </li> 
       <li> 
        <img src="./img/5.jpg"> 
       </li> 
       <li> 
        <img src="./img/3.jpg"> 
       </li> 
       <li> 
        <img src="./img/6.jpg"> 
       </li> 
       <li> 
        <img src="./img/7.jpg"> 
       </li> 
       <li> 
        <img src="./img/9.jpg"> 
       </li> 
       <li> 
        <img src="./img/11.jpg"> 
       </li> 
       <li> 
        <img src="./img/12.jpg"> 
       </li> 
       <li> 
        <img src="./img/13.jpg"> 
       </li> 
       <li> 
        <img src="./img/14.jpg"> 
       </li> 
       <li> 
        <img src="./img/15.jpg"> 
       </li> 
       <li> 
        <img src="./img/16.jpg"> 
       </li> 
      </ul> 
     </div> 
    </div> 
</body> 

</html>

而且這裏的CSS

.modal { 
    max-height: 90%; 
    max-width: 90%; 
} 
.bkground { 
    background-image: url("/img/Sfondo3.jpg") 
} 
.sliderimg { 
    border-color: black; 
    border: solid 2px; 
} 
.floorimg { 
    border-color: black; 
    border: solid 4px; 
} 
.main-content { 
    top: 100%; 
    position: absolute; 
    width: 100%; 
}

來源

2016-03-11 Luigi Cerone

您是否解決了這個問題？如果是的請發表回答:) –

我找到了答案

CSS

.slider-adjustment{ 
position: fixed; 
    top: 56px; <!-- as nav bar has height of 56px --> 
    left: 0; 
    bottom: 0; 
    right: 0; 
    overflow: auto; 
background-color:cyan ; 

}

HTML

<div class="slider-adjustment"> 
    <!-- All html for slider goes here --> 
</div>

來源

2016-05-31 03:36:39

是啊。它可以是done.I div.slider.fullscreen像下面後添加一個div.main內容：

div.main-content { 
 
      top: 100%; 
 
      position: absolute; 
 
      width: 100%; 
 
     }

，它爲我工作。只需添加任何你想在div.main內容元素

來源

2016-03-12 11:18:16 Sud

感謝您的回覆，但它不工作在我的情況下，如果我添加該類的div，當我刷新頁面滑塊消失。我也張貼我的代碼。 –

有無你試過了增加Z指數

nav{ 
    z-index:100; 
}

來源

2017-06-29 06:45:05

實現 - 全屏幕滑塊和導航欄

回答

相關問題