Clash Royale CLAN TAG#URR8PPP

how to create a fullscreen overlay menu?

Edit:
Before downvote this question...tell me how can I improve it. In this way, at least I will learn something. Thanks...

I am trying to make a full-screen menu with two sides, one side has a list of items; Home, Services, Portfolio and the other side will show an image on item hover. For example, if mouse hover on Services, a new image shows up and so.

This is what I need:

But, this is what I have so far:

Another example of what I'm trying to do is this website

Any help pleaseee??

Thanks,

PS: Hide the image in mobile.

.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>

Edit:

1 Answer
1

$('#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;


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="side-bar">
<ul>
<li id="home">Home</li>
<li id="services">Services</li>
<li id="portfolio">Portfolio</li>
<li id="clients">Clients</li>
<li id="contact">Contacts</li>
</ul>
</div>
<div class="img-sec">
<div class="change-img"></div>
</div>
</div>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.