I'm attempting to create a semi-transparent background for a menu while keeping my list and close button unaffected by opacity changes. I attempted to use z-index, but it didn't yield the desired results.
Additionally, the background div seems to interfere with the functionality of the close button icon, preventing me from closing the menu even though the background div is positioned beneath the icon.
Explore My Fiddle:
See My HTML code:
<div class="menu">
<!-- Menu icon -->
<div class="icon-close">
<i class="fa fa-remove fa-3x"></i>
</div>
<ul>
<li>Home</li>
<li>About Me</li>
<li>Contact Me</li>
<li>Gallery</li>
</ul>
<div id="background"></div>
</div>
<div id="jumbotron">
<div id="icon-move">
<div class="menu-icon">
<i class="fa fa-bars fa-3x"></i>
</div>
</div>
</div>
Dive into My CSS code:
#jumbotron {
width: 100%;
height: 750px;
background-repeat: no-repeat;
background-size: 100% 100%;
background-image: url("images/logogreybg.png");
}
.menu-icon {
color: #fff;
cursor: pointer;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
padding-bottom: 25px;
padding-left: 25px;
padding-top: 25px;
text-decoration: none;
text-transform: uppercase;
z-index:2;
}
.menu-icon i {
margin-right: 5px;
color: #3C5F7C;
z-index:2;
}
.icon-close {
cursor: pointer;
padding-left: 25px;
padding-top: 25px;
z-index: 1;
}
.icon-close i {
color: darkred;
z-index:1;
}
.menu {
left: -300px; /* start off behind the scenes */
height: 750px;
position: fixed;
width: 300px;
}
#background {
height: 750px;
width: 300px;
background-color: #000;
opacity: .25;
margin-top: -307px;
}
.menu ul {
list-style-type: none;
margin: auto;
margin-top: 40px;
}
.menu li {
text-align: center;
color: #fff;
font-size: 21px;
line-height: 50px;
}
Peek at My JS code:
$(document).ready(function() {
$('.menu-icon').click(function() {
$('.menu').animate({
left: "0px"
}, 200);
$('#jumbotron').animate({
left: "300px"
}, 200);
$('.menu-icon').fadeTo("fast", 0);
});
/* Then push them back */
$('.icon-close').click(function() {
$('.menu').animate({
left: "-300px"
}, 200);
$('#jumbotron').animate({
left: "0px"
}, 200);
});
});