如何创建全屏覆盖菜单？

Question

修改： 在否决这个问题之前...告诉我如何改善它。这样，至少我会学到一些东西。谢谢...

我正在尝试制作一个带有两个侧面的全屏菜单，一个侧面有一个项目列表；房屋，服务，投资组合和另一侧将在物品悬停时显示图像。例如，如果将鼠标悬停在服务上，则会显示一个新图像，依此类推。

这是我需要的：

但是，这是我到目前为止所拥有的：

另一个我想做的例子是this website

任何需要帮助的人吗？

谢谢

PS：在移动设备中隐藏图像。

.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: $dkgreen;
  background-color: $dkgreen;
  overflow-x: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  /*    top: 25%;*/
  width: 100%;
  text-align: center;
  * margin-top: 30px;
  */
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.overlay a:hover,
.overlay a:focus {
  color: #f1f1f1;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
  z-index: 1;
}

@media screen and (max-height: 450px) {
  .overlay a {
    font-size: 20px
  }
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}

<nav class=" navbar navbar-dark fixed-top">
  <div class="container">
    <a class="navbar-brand" href="#"><img src="./img/maduro-logo.png" class="img-fluid" width="115" /></a>

    <button class="navbar-toggler custom-toggler" type="button" onclick="openNav()">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div id="myNav" class="overlay">

      <div class="row overlay-content">

        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times; 
    </a>
        <div class="col-sm-5">

          <a style="color: #fff;" id="" class="" href="index.php">Home</a>
          <a style="color: #fff;" id="" class="" href="services.php">Services</a>
          <a style="color: #fff;" id="" class="" href="portfolio.php">Portfolio</a>
          <a style="color: #fff;" id="" class="" href="clients.php">Clients</a>
          <a style="color: #fff;" id="" class="" href="contact.php">Contact</a>

        </div>
        <div class="col-sm-7">
          <img class="img-fluid" src="img/a.jpg">
        </div>
      </div>
    </div>

编辑：

Answer 1

NodeInfo dataNode = (NodeInfo) argument[0].head();

$('#home').hover(function() {
  $('.change-img').css({
    "background-image": "url('https://www.ryanhomes.com/rh-community-gallery-NewAspectRatio/7ac519ed-9b29-47b0-a489-ded2da8b770f/db/7ac519ed-9b29-47b0-a489-ded2da8b770f.jpg')"
  });
});
$('#services').hover(function() {
  $('.change-img').css({
    "background-image": "url('https://www.starwebcreations.com/new_images/services.jpg')"
  });
});
$('#portfolio').hover(function() {
  $('.change-img').css({
    "background-image": "url('https://www.ryanhomes.com/rh-community-gallery-NewAspectRatio/7ac519ed-9b29-47b0-a489-ded2da8b770f/db/7ac519ed-9b29-47b0-a489-ded2da8b770f.jpg')"
  });
});
$('#clients').hover(function() {
  $('.change-img').css({
    "background-image": "url('https://www.starwebcreations.com/new_images/services.jpg')"
  });
});
$('#contact').hover(function() {
  $('.change-img').css({
    "background-image": "url('https://www.ryanhomes.com/rh-community-gallery-NewAspectRatio/7ac519ed-9b29-47b0-a489-ded2da8b770f/db/7ac519ed-9b29-47b0-a489-ded2da8b770f.jpg')"
  });
});

.side-bar {
  width: 50vw;
  background-color: #ddd;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
}

.side-bar>ul {
  list-style-type: none;
}

.side-bar>ul>li {
  text-align: center;
  padding: 15px 0;
  cursor: pointer;
}

.img-sec {
  width: 50vw;
  background-color: #333;
  height: 100vh;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
}

.change-img {
  width: 100%;
  max-height: 100%;
  background-size: cover;
  background-position: center;
}