帶背景圖像的封面體

-2

我正在爲freecodecamp課程創建一個投資組合。我希望我的投資組合頁面有一個滑出式導航菜單，一旦你點擊菜單按鈕就會滑出。我也想要一個完全覆蓋身體的圖像，當菜單滑入頁面時，圖片將隨着身體移動。我已經有了滑出菜單，當它滑入視口時，主體隨着菜單一起移動，現在我只需要找出一種將圖像添加到身體的方法，該方法也響應滑出菜單。任何幫助將不勝感激！帶背景圖像的封面體

這是我到目前爲止寫的HTML和JS代碼。

<!DOCTYTPE html> 
<html> 
    <head> 
     <title></title> 
     <link rel="stylesheet" href="css/style.css"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
    </head> 
    <body class="menu menu-open"> 
     <header> 
      <a href="#" class="menu-toggle">Menu</a> 
      <nav class="menu-side"> 
       This is a side menu 
      </nav> 
     </header> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
     <script> 
      (function() { 
       var body = $('body'); 
       $('.menu-toggle') .bind('click', function(){ 
       body.toggleClass('menu-open'); 
       return false; 
       }); 
      })(); 

      $(document).ready(function(){ 

       $(".menu").css({"height":$(window).height() + "px"}); 

      }); 
     </script> 
    </body> 
</html>

這是我的CSS。

.menu{ 
    overflow-x: hidden; 
    position: relative; 
    left:0; 
} 

.menu-open{ 
    left:231px; 

} 

.menu-open .menu-side{ 
    left: 0; 
} 

.menu-side, 
.menu{ 
    -webkit-transition: left 0.2s ease; 
    -moz-transition: left 0.2s ease; 
    transition: left 0.2s ease; 
} 

.menu-side{ 
    background-color: #333; 
    border-right: 1px solid #000; 
    color: #fff; 
    position: fixed; 
    top: 0; 
    left:-231px; 
    width: 210px; 
    height: 100%; 
    padding: 10px; 
} 

.menu-toggle{ 
    z-index: 1; 
}

來源

2016-08-04 Kevin Alvarez

我認爲，所有你需要做的就是添加一個背景圖像添加到人體時，菜單打開，如果我理解正確的問題類別。

.menu-open { 
     background-image: url('your-image.jpg'); 
    }

來源

2016-08-04 15:47:42 spirift

您可以簡單地添加一個div到身體（這樣你就可以有更多的靈活性與內容操縱）：

<body> 
<nav></nav> 
    <div> 
    <p>Menu</p> 
    </div> 
</body>

然後使用CSS的背景和設置樣式來填充窗口

html, 
body { 
    margin: 0; 
    padding: 0; 
} 

html { 
    width: 100%; 
    height: 100vh; /* Relative to 100% of the height of the viewport (browser 
        automatically recognizes height of the window) */ 
    box-sizing: border-box; 
} 

/* Adjust body size to the html */ 
body { 
    width: 100%; 
    height: 100%; 
    display: flex; 
} 

nav { 
    width: 200px; 
    height: 100%; 
} 

div { 
    width: 100%; 
    height: 100%; 
    /* Background resizes automatically when menu appears */ 
    background-image: url('yourimage.jpg'); 
    background-size: cover; 
    background-repeat: no-repeat; 
}

和動畫導航使用jQuery：

$("p").click(function() { 
    $("nav").animate({width:'toggle'}, 350); 
});

您導航

來源

2016-08-04 16:38:37 oskarkramarz

這可能是一個有效的代碼/解決方案。但是你應該真的添加一些解釋，說明爲什麼這個代碼應該工作 - 你也可以在代碼本身中添加註釋 - 按照它的當前形式，它沒有提供任何可以幫助社區其他人理解你做了什麼的解釋解決/回答問題。 – ishmaelMakitla

帶背景圖像的封面體

回答

相關問題