сделал js для открытия меню
This commit is contained in:
Kirill Pet
@@ -68,6 +68,38 @@ body{
|
|||||||
font-family: var(--font-family);
|
font-family: var(--font-family);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.modal{
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
|
||||||
|
height: 100vh;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
background-color: rgba(17, 17, 20, .8);
|
||||||
|
|
||||||
|
z-index: 100;
|
||||||
|
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.modal.active{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal__item{
|
||||||
|
padding: 88px 64px;
|
||||||
|
|
||||||
|
background-color: var(--background-main);
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.modal__item.active{
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
/* text */
|
/* text */
|
||||||
.title-1{
|
.title-1{
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
|
|||||||
@@ -851,4 +851,19 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
/* call */
|
/* call */
|
||||||
|
|
||||||
|
/* modal */
|
||||||
|
.modal__item{
|
||||||
|
width: 1000px;;
|
||||||
|
}
|
||||||
|
.modal__item > .title-1{
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.modal__item > .text-1{
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
.modal__item > .form{
|
||||||
|
padding: 56px 36px 0 36px;
|
||||||
|
}
|
||||||
|
/* modal */
|
||||||
@media only screen and (min-width: 992px) and (max-width: 1032px) {}
|
@media only screen and (min-width: 992px) and (max-width: 1032px) {}
|
||||||
@@ -90,39 +90,65 @@
|
|||||||
|
|
||||||
transition: opacity .3s;
|
transition: opacity .3s;
|
||||||
}
|
}
|
||||||
.button-menu__close{
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
transition: opacity .3s;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
.button-menu.open .button-menu__open{
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
.button-menu.open .button-menu__close{
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.phone-menu{
|
.phone-menu{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 112px;
|
top: 0px;
|
||||||
right: 0;
|
right: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
|
||||||
|
height: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
|
background-color: var(--background-main);
|
||||||
|
|
||||||
|
z-index: 10;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: all .3s;
|
||||||
|
}
|
||||||
|
.phone-menu.active{
|
||||||
|
height: 100vh;
|
||||||
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
.phone-menu__block-content{
|
.phone-menu__block-content{
|
||||||
/* height: 0; */
|
height: 0;
|
||||||
/* overflow: hidden; */
|
overflow: hidden;
|
||||||
|
|
||||||
|
z-index: 10;
|
||||||
|
|
||||||
|
transition: all .5s;
|
||||||
}
|
}
|
||||||
.phone-menu__content{
|
.phone-menu__content{
|
||||||
padding: 0 16px 40px 16px;
|
padding: 104px 16px 40px 16px;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.phone-menu__sub{
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 100%;
|
||||||
|
width: 100%;
|
||||||
|
transition: all .3s;
|
||||||
|
|
||||||
|
background-color: var(--background-main);
|
||||||
|
}
|
||||||
|
.phone-menu__sub.active{
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
.phone-menu-content__close{
|
||||||
|
position: absolute;
|
||||||
|
top: 40px;
|
||||||
|
right: 16px;
|
||||||
|
|
||||||
|
width: 32px;
|
||||||
|
aspect-ratio: 1;
|
||||||
|
|
||||||
|
background-image: url(/assets/img/icon/close.svg);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
|
||||||
|
background-color: var(--background-main);
|
||||||
|
border: none;
|
||||||
}
|
}
|
||||||
.phone-menu__block{
|
.phone-menu__block{
|
||||||
margin-top: 32px;
|
margin-top: 32px;
|
||||||
@@ -187,6 +213,10 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.phone-menu{
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
/* header */
|
/* header */
|
||||||
|
|
||||||
/* footer */
|
/* footer */
|
||||||
@@ -612,4 +642,5 @@ main{
|
|||||||
}
|
}
|
||||||
/* call */
|
/* call */
|
||||||
|
|
||||||
|
|
||||||
@media only screen and (max-width: 992px) {}
|
@media only screen and (max-width: 992px) {}
|
||||||
@@ -142,6 +142,32 @@ function howPhone() {
|
|||||||
}
|
}
|
||||||
// how end
|
// how end
|
||||||
|
|
||||||
|
// phone menu
|
||||||
|
let btnOpenMenu = document.querySelector('.button-menu__open');
|
||||||
|
|
||||||
|
btnOpenMenu.onclick = function () {
|
||||||
|
let phoneMenu = document.querySelector('.phone-menu'),
|
||||||
|
block = document.querySelector('.phone-menu__block-content.main'),
|
||||||
|
content = document.querySelector('.phone-menu__content.main'),
|
||||||
|
newHeigh = content.offsetHeight + 'px';
|
||||||
|
|
||||||
|
phoneMenu.classList.add('active');
|
||||||
|
block.style.height = newHeigh;
|
||||||
|
}
|
||||||
|
|
||||||
|
let nextPhoneMenu = document.querySelectorAll('.phone-menu--next');
|
||||||
|
|
||||||
|
nextPhoneMenu.forEach(next => {
|
||||||
|
next.onclick = function () {
|
||||||
|
let subName = next.dataset.menu,
|
||||||
|
blockSub = document.querySelector(`.phone-menu__sub.${subName}`);
|
||||||
|
|
||||||
|
blockSub.classList.add('active');
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// phone menu
|
||||||
|
|
||||||
|
|
||||||
// resize
|
// resize
|
||||||
window.addEventListener('resize', () => {
|
window.addEventListener('resize', () => {
|
||||||
let screenWidth = window.screen.width;
|
let screenWidth = window.screen.width;
|
||||||
|
|||||||
259
index.html
259
index.html
@@ -97,7 +97,6 @@
|
|||||||
<div class="header-phone__item">
|
<div class="header-phone__item">
|
||||||
<div class="button-menu">
|
<div class="button-menu">
|
||||||
<img src="/assets/img/icon/menu-hamburger.svg" class="button-menu__open" alt="open">
|
<img src="/assets/img/icon/menu-hamburger.svg" class="button-menu__open" alt="open">
|
||||||
<img src="/assets/img/icon/close.svg" class="button-menu__close" alt="close">
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -136,8 +135,160 @@
|
|||||||
|
|
||||||
|
|
||||||
<div class="phone-menu">
|
<div class="phone-menu">
|
||||||
<div class="phone-menu__block-content">
|
<div class="phone-menu__block-content main">
|
||||||
|
<div class="phone-menu__content main">
|
||||||
|
<button class="phone-menu-content__close"></button>
|
||||||
|
|
||||||
|
<ul class="phone-menu__list">
|
||||||
|
<li>
|
||||||
|
<a href="#">спецификация</a>
|
||||||
|
</li>
|
||||||
|
<li>О компании</li>
|
||||||
|
<li>
|
||||||
|
<a href="#" class="phone-menu--next" data-menu="catalog">каталог</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#" class="phone-menu--next" data-menu="brand">бренды</a>
|
||||||
|
</li>
|
||||||
|
<li>зонирование</li>
|
||||||
|
<li>проекты</li>
|
||||||
|
<li>интересное</li>
|
||||||
|
<li>контакты</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div class="phone-menu__block">
|
||||||
|
<p class="phone-menu__text">
|
||||||
|
Работаем с гос.заказчиками по<br>
|
||||||
|
<a href="">44-ФЗ/223-ФЗ</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<a class="phone-menu__text phone-menu__text--no-line" href="tel:+74957988081">+7 (495) 798-80-81</a>
|
||||||
|
|
||||||
|
<a class="phone-menu__text phone-menu__text--no-line" href="mailto:sales@bestinfitness.ru">sales@bestinfitness.ru</a>
|
||||||
|
|
||||||
|
<div class="phone-social">
|
||||||
|
<a href="#" class="btn-social">
|
||||||
|
<img src="/assets/img/social/telegram.svg" alt="">
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="#" class="btn-social">
|
||||||
|
<img src="/assets/img/social/whatsapp.svg" alt="">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="phone-menu__block">
|
||||||
|
<a href="#" class="btn-big btn-big--border btn-big--border--blood">
|
||||||
|
Заказать звонок
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="phone-menu__sub catalog">
|
||||||
<div class="phone-menu__content">
|
<div class="phone-menu__content">
|
||||||
|
<button class="phone-menu-content__close"></button>
|
||||||
|
|
||||||
|
<ul class="phone-menu__list">
|
||||||
|
<li>
|
||||||
|
<a href="#">спецификация</a>
|
||||||
|
</li>
|
||||||
|
<li>О компании</li>
|
||||||
|
<li>
|
||||||
|
<a href="#" class="phone-menu--next" data-menu="cardio">каталог</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#" class="phone-menu--next">бренды</a>
|
||||||
|
</li>
|
||||||
|
<li>зонирование</li>
|
||||||
|
<li>проекты</li>
|
||||||
|
<li>интересное</li>
|
||||||
|
<li>контакты</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div class="phone-menu__block">
|
||||||
|
<p class="phone-menu__text">
|
||||||
|
Работаем с гос.заказчиками по<br>
|
||||||
|
<a href="">44-ФЗ/223-ФЗ</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<a class="phone-menu__text phone-menu__text--no-line" href="tel:+74957988081">+7 (495) 798-80-81</a>
|
||||||
|
|
||||||
|
<a class="phone-menu__text phone-menu__text--no-line" href="mailto:sales@bestinfitness.ru">sales@bestinfitness.ru</a>
|
||||||
|
|
||||||
|
<div class="phone-social">
|
||||||
|
<a href="#" class="btn-social">
|
||||||
|
<img src="/assets/img/social/telegram.svg" alt="">
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="#" class="btn-social">
|
||||||
|
<img src="/assets/img/social/whatsapp.svg" alt="">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="phone-menu__block">
|
||||||
|
<a href="#" class="btn-big btn-big--border btn-big--border--blood">
|
||||||
|
Заказать звонок
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="phone-menu__sub brand">
|
||||||
|
<div class="phone-menu__content">
|
||||||
|
<button class="phone-menu-content__close"></button>
|
||||||
|
|
||||||
|
<ul class="phone-menu__list">
|
||||||
|
<li>
|
||||||
|
<a href="#">спецификация</a>
|
||||||
|
</li>
|
||||||
|
<li>О компании</li>
|
||||||
|
<li>
|
||||||
|
<a href="#" class="phone-menu--next" data-menu="cardio">каталог</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#" class="phone-menu--next">бренды</a>
|
||||||
|
</li>
|
||||||
|
<li>зонирование</li>
|
||||||
|
<li>проекты</li>
|
||||||
|
<li>интересное</li>
|
||||||
|
<li>контакты</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div class="phone-menu__block">
|
||||||
|
<p class="phone-menu__text">
|
||||||
|
Работаем с гос.заказчиками по<br>
|
||||||
|
<a href="">44-ФЗ/223-ФЗ</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<a class="phone-menu__text phone-menu__text--no-line" href="tel:+74957988081">+7 (495) 798-80-81</a>
|
||||||
|
|
||||||
|
<a class="phone-menu__text phone-menu__text--no-line" href="mailto:sales@bestinfitness.ru">sales@bestinfitness.ru</a>
|
||||||
|
|
||||||
|
<div class="phone-social">
|
||||||
|
<a href="#" class="btn-social">
|
||||||
|
<img src="/assets/img/social/telegram.svg" alt="">
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="#" class="btn-social">
|
||||||
|
<img src="/assets/img/social/whatsapp.svg" alt="">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="phone-menu__block">
|
||||||
|
<a href="#" class="btn-big btn-big--border btn-big--border--blood">
|
||||||
|
Заказать звонок
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="phone-menu__sub cardio">
|
||||||
|
<div class="phone-menu__content">
|
||||||
|
<button class="phone-menu-content__close"></button>
|
||||||
|
|
||||||
<ul class="phone-menu__list">
|
<ul class="phone-menu__list">
|
||||||
<li>
|
<li>
|
||||||
<a href="#">спецификация</a>
|
<a href="#">спецификация</a>
|
||||||
@@ -183,6 +334,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
@@ -981,6 +1133,109 @@
|
|||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
|
<div class="modal">
|
||||||
|
<div class="modal__item">
|
||||||
|
<p class="title-1">
|
||||||
|
Получи проект бесплатно
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<form class="form" method="post" action="/send-telegram.php">
|
||||||
|
<div class="form__item">
|
||||||
|
<div class="input__block">
|
||||||
|
<input class="input__field" type="text" name="Имя" minlength="2" placeholder="" required="">
|
||||||
|
<label class="input__label">Имя</label>
|
||||||
|
<span class="input__error">Имя введено не верно</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form__item form__item--two">
|
||||||
|
<div class="input__block">
|
||||||
|
<input class="input__field" type="phone" name="Имя" minlength="2" placeholder="" required="">
|
||||||
|
<label class="input__label">Телефон</label>
|
||||||
|
<span class="input__error">Телефон введен не верно</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input__block">
|
||||||
|
<input class="input__field" type="email" name="Имя" minlength="2" placeholder="" required="">
|
||||||
|
<label class="input__label">E-mail</label>
|
||||||
|
<span class="input__error">E-mail введен не верно</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form__additional">
|
||||||
|
<input type="file" id="free__file">
|
||||||
|
<label for="free__file" class="form__file">
|
||||||
|
<button href="#" class="btn-social form__mini-btn">
|
||||||
|
<img src="/assets/img/icon/paper-clip.svg" alt="">
|
||||||
|
</button>
|
||||||
|
<p class="form-additional__text text-3">Загрузить свой проект на просчет</p>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="form__additional">
|
||||||
|
<label for="free__agreement" class="form__checkbox-block">
|
||||||
|
<input type="checkbox" id="free__agreement" class="form__checkbox" required="">
|
||||||
|
<div class="form-checkbox__square"></div>
|
||||||
|
<p class="form-additional__text text-3">
|
||||||
|
Я принимаю
|
||||||
|
<a href="#" class="text--bo-line form__link">Политику конфиденциальности</a>
|
||||||
|
</p>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<input class="btn-big btn-big--blood" type="submit" value="оставить заявку">
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal__item">
|
||||||
|
<p class="title-1">
|
||||||
|
Обратный звонок
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p class="text-1">
|
||||||
|
Если у вас возникли вопросы, или вам нужна консультация, обращайтесь
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<form class="form" method="post" action="/send-telegram.php">
|
||||||
|
<div class="form__item">
|
||||||
|
<div class="input__block">
|
||||||
|
<input class="input__field" type="text" name="Имя" minlength="2" placeholder="" required="">
|
||||||
|
<label class="input__label">Имя</label>
|
||||||
|
<span class="input__error">Имя введено не верно</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form__item form__item--two">
|
||||||
|
<div class="input__block">
|
||||||
|
<input class="input__field" type="phone" name="Имя" minlength="2" placeholder="" required="">
|
||||||
|
<label class="input__label">Телефон</label>
|
||||||
|
<span class="input__error">Телефон введен не верно</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input__block">
|
||||||
|
<input class="input__field" type="email" name="Имя" minlength="2" placeholder="" required="">
|
||||||
|
<label class="input__label">E-mail</label>
|
||||||
|
<span class="input__error">E-mail введен не верно</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form__additional">
|
||||||
|
<label for="free__agreement" class="form__checkbox-block">
|
||||||
|
<input type="checkbox" id="free__agreement" class="form__checkbox" required="">
|
||||||
|
<div class="form-checkbox__square"></div>
|
||||||
|
<p class="form-additional__text text-3">
|
||||||
|
Я принимаю
|
||||||
|
<a href="#" class="text--bo-line form__link">Политику конфиденциальности</a>
|
||||||
|
</p>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<input class="btn-big btn-big--blood" type="submit" value="оставить заявку">
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
|
||||||
<script src="/assets/js/main.js"></script>
|
<script src="/assets/js/main.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
Reference in New Issue
Block a user