Good-Production
/
template-for-verstka
13
2
Fork 0
Code Pull Requests Releases Wiki Activity

сделал js для открытия меню

Browse Source
fitness
Kirill Pet 8 months ago
parent ce39d4028e
commit f32e1eb3fb
5 changed files with 384 additions and 25 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 32
      assets/css/gp-style-core.css
  2. 15
      assets/css/gp-style-desktop.css
  3. 71
      assets/css/gp-style-tablet.css
  4. 26
      assets/js/main.js
  5. 265
      index.html

32
assets/css/gp-style-core.css
Unescape View File

@ -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;

15
assets/css/gp-style-desktop.css
Unescape View File

@ -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) {}

71
assets/css/gp-style-tablet.css
Unescape View File

@ -90,39 +90,65 @@
transition: opacity .3s; transition: opacity .3s;
} }
.button-menu__close{
.phone-menu{
position: absolute; position: absolute;
top: 0; top: 0px;
right: 0;
left: 0; left: 0;
height: 0;
width: 100%; width: 100%;
height: 100%;
transition: opacity .3s; background-color: var(--background-main);
opacity: 0;
z-index: 10;
overflow: hidden;
transition: all .3s;
} }
.button-menu.open .button-menu__open{ .phone-menu.active{
opacity: 0; height: 100vh;
overflow-y: auto;
} }
.button-menu.open .button-menu__close{ .phone-menu__block-content{
opacity: 1; height: 0;
overflow: hidden;
z-index: 10;
transition: all .5s;
} }
.phone-menu__content{
padding: 104px 16px 40px 16px;
.phone-menu{ position: relative;
}
.phone-menu__sub{
position: absolute; position: absolute;
top: 112px; top: 0;
right: 0; left: 100%;
left: 0;
width: 100%; width: 100%;
transition: all .3s;
background-color: var(--background-main);
} }
.phone-menu__block-content{ .phone-menu__sub.active{
/* height: 0; */ left: 0;
/* overflow: hidden; */
} }
.phone-menu__content{ .phone-menu-content__close{
padding: 0 16px 40px 16px; 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) {}

26
assets/js/main.js
Unescape View File

@ -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;

265
index.html
Unescape View File

@ -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,18 +135,20 @@
<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"> <div class="phone-menu__content main">
<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>
</li> </li>
<li>О компании</li> <li>О компании</li>
<li> <li>
<a href="#" class="phone-menu--next">каталог</a> <a href="#" class="phone-menu--next" data-menu="catalog">каталог</a>
</li> </li>
<li> <li>
<a href="#" class="phone-menu--next">бренды</a> <a href="#" class="phone-menu--next" data-menu="brand">бренды</a>
</li> </li>
<li>зонирование</li> <li>зонирование</li>
<li>проекты</li> <li>проекты</li>
@ -183,6 +184,157 @@
</div> </div>
</div> </div>
</div> </div>
<div class="phone-menu__sub catalog">
<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">
<li>
<a href="#">спецификация</a>
</li>
<li>О компании</li>
<li>
<a href="#" class="phone-menu--next">каталог</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> </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>

Write Preview
Loading…
Cancel
Save