Question

我正在为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;
}

Answer 1

我认为您需要做的就是在菜单打开时向您添加到正文的课程添加背景图片，如果我正确理解了这个问题。

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

Answer 2

您可以简单地将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);
});

盖体与背景图像

2 个答案: