Есть адаптивное меню .mobmenu и кнопка обратной связи .feedback.openform. Как сделать так,чтобы при нажатии на гамбургер, меню с темным задним фоном перекрывало кнопку обратной связи,чтобы ее нельзя было нажать? И наоборот,при нажатии на форму обратной связи,нельзя было вызвать адаптивное меню. С меню вроде как я справился,но вот как полностью вывести фидбэк на передний план и чтобы при этом чтобы header с гамбургером отошли назад?[
$(".mobmenu").click(function(event) {
$(".menu").toggleClass('show');
$(this).toggleClass('open');
$(".bg").toggleClass('show');
});
$(".feedback").click(function(e) {
$(".bg").toggleClass('show');
$(".bgform").toggleClass('show');
$(this).toggleClass('open');
});
html, body {
width: 100%;
height: 100%;
font-family: 'Montserrat', sans-serif;
line-height: 1.5;
font-weight: 300;
}
h1, h2 {
font-size: 32px;
font-weight: 300;
margin-bottom: 5px!important;
}
a {
color:#202020;
text-decoration: none;
}
.wrapper {
max-width: 1400px;
width: 100% ;
margin: 0 auto 0 auto;
padding: 0 60px 0 60px;
box-sizing: border-box;
}
.header {
background-color: black;
padding: 10px 0;
margin-bottom: 60px;
}
.menu {
margin-left: 60px;
}
.menu ul li {
display: inline-block;
}
.menu ul li:last-child {
margin-right: 0;
}
.menu ul li a {
color: #fff;
margin-right: 20px;
}
.header .logo {
display: block;
width: 180px;
}
.header .wrapper {
display: flex;
align-items: center;
}
.sidebar {
width: 300px;
height: 300px;
float: left;
background-color: grey;
margin-bottom: 60px;
}
.sidebar.single {
height: auto;
background: 0;
}
.content {
margin-left: 340px;
margin-bottom: 60px;
}
.submenu ul li {
display: inline-block;
}
.submenu {
margin-bottom: 20px;
}
.submenu ul li a {
color: #CCC;
margin-right: 10px;
}
.content p {
text-align: justify;
margin-bottom: 20px;
}
.catalog {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-left: -30px;
margin-right: -30px;
}
.catalog .item {
height: 220px;
margin: 30px;
position: relative;
line-height: 1;
cursor: pointer;
transition: filter 0.3s;
}
.catalog.grid .item {
width: calc(100%/3 - 60px);
}
.catalog.list .item {
display: flex;
height: auto;
align-items: center;
width: 100% ;
}
.catalog.list .col {
position: relative;
width: 50%;
}
.catalog.list .item img {
width: 50%;
margin-bottom: 0;
margin-right: 40px!important;
}
.catalog.list .title {
margin-bottom: 40px;
}
.catalog .item img {
width: 100%;
margin-bottom: 20px;
filter: grayscale(100);
}
.catalog .item:hover img {
filter: grayscale(0);
transition: filter 0.3s;
}
.catalog.list .title {
margin-bottom: 40px;
}
.catalog .item .desc, .catalog .item .price {
position: absolute;
bottom: 0;
}
.catalog .item .desc {
left: 0;
}
.catalog .item .price {
font-size: 20px;
font-weight: 500;
right: 0;
}
.catalog .item .desc {
font-size: 15px;
}
.catalog .item span {
display: block;
}
.catalog .item .title {
font-size: 20px;
font-weight: 500;
}
.catalog .item:hover .title {
color: orange;
transition: color 0.3s;
}
.icons {
text-align: right;
}
.icons i {
font-size: 30px;
margin-right: 15px;
opacity: 0.5;
cursor: pointer;
}
.icons i:last-child {
margin-right: 0;
}
.icons i.active {
opacity: 1;
}
.mobmenu {
width: 100%;
display: none;
color: #fff;
text-align: right;
z-index: 999;
cursor: pointer;
}
.fas.fa-times {
display: none;
}
.open .fas.fa-bars {
display: none;
}
.open .fas.fa-times {
display: block;
}
.showroom {
text-align: center;
background: url(../img/showroom.jpg) center no-repeat;
background-size: cover;
color: #fff;
padding: 60px 0;
}
.showroom p {
margin-bottom: 40px;
}
.contact {
width: 300px;
background-color: black;
color: #fff;
position: absolute;
margin-top: 60px;
padding: 30px;
box-sizing: border-box;
text-align: center;
}
.map {
position: relative;
}
.footer .wrapper {
margin-top: -500px;
}
.contact p.big {
font-size: 25px;
margin-bottom: 20px;
}
.contact p {
margin-bottom: 20px !important;
font-size: 15px;
}
.contact a {
color: orange;
}
p.small {
font-size: 12px;
}
.owl-nav {
position: relative;
top: 30px;
}
.owl-prev, .owl-next {
position: absolute;
}
.owl-prev {
left: 0;
background: 0;
}
.owl-next {
right: 0;
background: 0;
}
.owl-dots {
margin-top: 30px;
text-align: center;
}
.owl-dot {
height: 15px;
width: 15px;
background-color: #FFF;
border-radius: 15px;
display: inline-block;
margin: 0 5px 0 5px;
transition: 0.3s;
}
.owl-dot.active {
background-color: #f7971d;
}
.owl-prev:hover, .owl-next:hover {
color: #f7971d !important;
transition: 0.3s;
}
.gallery .owl-item.active.center {
transform: scale(1)!important;
transition: 0.6s;
}
.gallery .owl-item {
transform: scale(0.8)!important;
}
.features tr {
border-bottom: 1px dotted grey;
cursor: pointer;
}
.features tr td {
padding: 10px 40px;
}
.features td:first-child {
font-weight: 500;
}
.features tr:hover {
background-color: #f7f7f7;
}
.gallery .img {
margin-bottom: 20px;
height: 240px;
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
.photos {
display: flex;
flex-wrap: wrap;
}
.photos a {
width: calc(100%/3);
padding: 5px;
box-sizing: border-box;
transition: 0.3s;
}
.photos img {
width: 100%;
}
.photos a:hover {
transform: scale(1.1);
}
.mobgall {
display: none !important;
}
.bg {
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
background-color: black;
opacity: 0;
z-index: -1;
transition: 0.3s;
}
.bgform {
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
opacity: 0;
z-index: -1;
transition: 0.3s;
display: flex;
justify-content: center;
align-items: center;
color: #FFF;
}
.bgform.show {
opacity: 1;
z-index: 100;
}
.bg.show {
opacity: 0.7;
z-index: 98;
}
.feedback {
position: fixed;
bottom: 30px;
right: 30px;
font-size: 30px;
color: #ffff;
background-color: black;
width: 60px;
height: 60px;
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
opacity: 1;
cursor: pointer;
z-index: 80;
}
.feedback.open {
z-index: 999;
}
@media(max-width: 1400px) {
.sidebar, .contact {
width: 250px;
}
.content {
margin-left: 290px;
}
.wrapper {
padding: 0 30px 0 30px !important;
}
}
@media(max-width: 1200px) {
.catalog.grid .item {
width: calc(100%/2 - 60px);
}
}
@media(max-width: 850px) {
.sidebar {
display: none;
}
.features {
margin: 30px auto 0 auto ;
}
.mobgall {
display: block !important;
}
.mobgall .owl-dot {
background-color: black;
}
.mobgall .owl-dot.active {
background-color: orange;
}
.mitem {
height: 270px;
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
background-color: #f4f4f4;
}
.features tr td {
padding: 5px 15px;
}
.content {
margin-left: 0;
padding-top: 100px;
}
.mobmenu {
display: block;
}
.menu {
position: fixed;
top: 0;
right: -200px;
background-color: black;
margin-left: 0;
width: 200px;
padding: 30px;
box-sizing: border-box;
transition: 0.3s;
z-index: 999 !important;
}
.menu.show {
right: 0;
}
.menu ul li {
display: block;
margin-bottom: 20px;
}
.menu ul li:last-child {
margin-bottom: 0;
}
.header {
position: fixed;
width: 100%;
z-index: 99;
}
}
@media(max-width: 600px) {
.icons {
display: none;
}
.catalog.grid .item {
width: 100%;
height: auto;
}
.catalog .item img {
filter: grayscale(0);
}
.catalog .item .desc, .catalog .item .price {
position: relative;
}
.catalog .item .title, .catalog .item .desc {
margin-bottom: 20px;
}
.footer .wrapper {
margin: 0;
}
.contact {
width: auto;
margin-top: 0;
margin-left: -30px;
}
.map {
height: 350px;
}
.features {
font-size: 85%;
}
}
@media(max-width: 330px) {
a.logo img {
position: relative;
transform: translateX(-20%);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/clear.css">
<link rel="stylesheet" href="css/adaptive.css">
<title>Pornohub</title>
<script src="js/script.js"></script>
<link href="owl.carousel.min.css" rel="stylesheet" type="text/css" />
<script src="owl.carousel.min.js" type="text/javascript"></script>
<link href="img/favicon.png" rel="shortcut icon" type="image/x-icon" />
<script src="https://kit.fontawesome.com/8e0bceeac7.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500,700,800,900&display=swap" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="wrapper">
<a class="logo" href="index.html"><img src="img/logo.svg" alt="logo"></a>
<div class="menu">
<ul>
<li><a href="#">Гитары</a></li>
<li><a href="#">Бас-Гитары</a></li>
<li><a href="#">Усиление</a></li>
<li><a href="#">Эффекты</a></li>
<li><a href="#">О нас</a></li>
</ul>
</div>
<div class="mobmenu"><i class="fas fa-bars"></i><i class="fas fa-times"></i></div>
</div>
</div>
<div class="bg"></div>
<div class="wrapper">
<div class="sidebar">
</div>
<div class="content">
<h1>Гитары</h1>
<div class="submenu">
<ul>
<li><a href="#">Все бренды</a></li>
<li><a href="#">BC Rich</a></li>
<li class="active">Charvel<a href="#"></a></li>
<li><a href="#">Danelectro</a></li>
<li><a href="#">ESP</a></li>
<li><a href="#">Fender</a></li>
<li><a href="#">Squier</a></li>
<li><a href="#">Fernandes</a></li>
<li><a href="#">Burny </a></li>
<li><a href="#">G&L</a></li>
<li><a href="#">Gibson</a></li>
<li><a href="#">Orville</a></li>
<li><a href="#">Godin</a></li>
<li><a href="#">Greco</a></li>
<li><a href="#">Gretsch</a></li>
<li><a href="#">Ibanez</a></li>
<li><a href="#">Jackson</a></li>
<li><a href="#"> Music Man/Ernie Ball</a></li>
<li><a href="#">PRS</a></li>
</ul>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, quibusdam. Praesentium dolorem ea aperiam voluptas officiis minus eos voluptate, eligendi unde, assumenda delectus laudantium nisi, debitis consequuntur ullam id ex rerum, tempora in repellat neque saepe officia numquam sequi?</p>
<div class="icons"><i class="fas fa-th grid active"></i><i class="fas fa-bars list"></i></div>
<div class="catalog grid">
<a href="single.html" class="item">
<img src="img/guitar.png">
<div class="col">
<span class="title">Fender Telecaster TL71</span>
<span class="desc">Japan 1994</span>
<span class="price">29 000 ₽</span>
</div>
</a>
<a href="single.html" class="item">
<img src="img/guitar.png">
<div class="col">
<span class="title">Fender Telecaster TL71</span>
<span class="desc">Japan 1994</span>
<span class="price">29 000 ₽</span>
</div>
</a>
<a href="single.html" class="item">
<img src="img/guitar.png">
<div class="col">
<span class="title">Fender Telecaster TL71</span>
<span class="desc">Japan 1994</span>
<span class="price">29 000 ₽</span>
</div>
</a>
<a href="single.html" class="item">
<img src="img/guitar.png">
<div class="col">
<span class="title">Fender Telecaster TL71</span>
<span class="desc">Japan 1994</span>
<span class="price">29 000 ₽</span>
</div>
</a>
<a href="single.html" class="item">
<img src="img/guitar.png">
<div class="col">
<span class="title">Fender Telecaster TL71</span>
<span class="desc">Japan 1994</span>
<span class="price">29 000 ₽</span>
</div>
</a>
<a href="single.html" class="item">
<img src="img/guitar.png">
<div class="col">
<span class="title">Fender Telecaster TL71</span>
<span class="desc">Japan 1994</span>
<span class="price">29 000 ₽</span>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="showroom">
<div class="wrapper">
<h2>Приходите к нам!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla justo tortor, dapibus et varius nec, iaculis nec sem. In dictum vel est sed tincidunt. Duis sagittis volutpat dui. Nulla ut fermentum sapien, ac faucibus arcu. Curabitur aliquet ultricies elit, vitae egestas ipsum tincidunt in.</p>
<div class="gallery">
<ul class="owl-carousel">
<li><div class="img" style="background-image: url(https://img2.goodfon.ru/wallpaper/nbig/4/a7/studio-midi-guitar.jpg);"></div><span>Наш магазин</span></li>
<li><div class="img" style="background-image: url(https://www.jasonstallworth.com/wp-content/uploads/2019/07/Home-Recording-Studio-Guide-Metal-Guitarists.jpg);"></div><span>Наш магазин</span></li>
<li><div class="img" style="background-image: url(https://img2.goodfon.ru/wallpaper/nbig/4/a7/studio-midi-guitar.jpg);"></div><span>Наш магазин</span></li>
<li><div class="img" style="background-image: url(https://www.jasonstallworth.com/wp-content/uploads/2019/07/Home-Recording-Studio-Guide-Metal-Guitarists.jpg);"></div><span>Наш магазин</span></li>
<li><div class="img" style="background-image: url(https://img2.goodfon.ru/wallpaper/nbig/4/a7/studio-midi-guitar.jpg);"></div><span>Наш магазин</span></li>
<li><div class="img" style="background-image: url(https://www.jasonstallworth.com/wp-content/uploads/2019/07/Home-Recording-Studio-Guide-Metal-Guitarists.jpg);"></div><span>Наш магазин</span></li>
</ul>
</div>
</div>
</div>
<div class="footer">
<div class="map"><script type="text/javascript" charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3Ad80f59a6d32f7a6317b3192bb68df1d817ddc14bface4593cc7295640f3a9501&width=100%&height=500&lang=ru_RU&scroll=true"></script></div>
<div class="wrapper">
<div class="contact">
<p class="big">Звоните, пишите,не скучайте :)</p>
<p><a href="mailto:[email protected]">[email protected]</a></p>
<p>Наб. реки Фонтанки, 78<br/>
<a href="tel:79219647422">+7 921 964 7442</a></p>
<p class="small">Отвечаем на звонки и сообщения ежедневно с 12:00 — 20:00. Чтобы посетить Guitarbank — позвоните нам заранее, подберем удобное время для встречи.</p>
</div>
</div>
</div>
<div class="feedback openform"><i class="fas fa-comments"></i></div>
<div class="bgform">1</div>
</body>
</html>