diff --git a/assets/css/gp-style-desktop.css b/assets/css/gp-style-desktop.css
index d5df913..3e3ab59 100644
--- a/assets/css/gp-style-desktop.css
+++ b/assets/css/gp-style-desktop.css
@@ -124,6 +124,87 @@
background-image: url(/assets/img/icon/arrow-bottom.svg);
background-repeat: no-repeat;
background-position: center right;
+
+ display: block;
+}
+.header-menu-list-next__block{
+ position: relative;
+}
+.header-menu-list-next__content{
+ position: absolute;
+ top: 50px;
+ left: 0;
+
+ width: 300px;
+
+ padding: 14px 0;
+
+ background-color: var(--background-grey);
+
+ opacity: 0;
+ pointer-events: none;
+
+ transition: all .3s;
+}
+.header-menu-list-next__content.active{
+ opacity: 1;
+ pointer-events: auto;
+}
+.header-menu-list-next-content__item{
+ display: block;
+
+ padding: 14px 24px;
+
+ font-weight: 400;
+ font-size: 16px;
+ text-transform: uppercase;
+ color: var(--text-white);
+
+ transition: all .3s;
+}
+.header-menu-list-next-content__item:hover{
+ padding-right: 23px;
+
+ border-right: 1px solid var(--text-white);
+ background-color: var(--background-grey-hover);
+}
+.header-menu-list-next-content__item.active{
+ padding-right: 23px;
+
+ border-right: 1px solid var(--text-white);
+ background-color: var(--background-grey-hover);
+}
+.header-menu-list-next__content-next{
+ position: absolute;
+ top: 0;
+ left: 300px;
+
+ display: block;
+
+ min-height: 100%;
+ width: 300px;
+
+ padding: 12px;
+ background-color: var(--background-grey-hover);
+
+ display: flex;
+ flex-direction: column;
+
+ opacity: 0;
+ pointer-events: none;
+ transition: all .6s;
+}
+.header-menu-list-next__content-next.active{
+ opacity: 1;
+ pointer-events: auto;
+}
+.header-menu-list-next-content-next__item{
+ padding: 12px;
+
+ font-weight: 400;
+ font-size: 16px;
+ text-transform: uppercase;
+ color: var(--text-white);
}
.header-menu__search{
display: flex;
@@ -291,7 +372,12 @@
padding: 20px;
}
-
+.header-menu-list-next__content {
+ top: 72px;
+}
+.header-menu-search__block {
+ top: 78px;
+}
/* header */
.header__wrapper{
flex-wrap: wrap;
diff --git a/assets/js/main.js b/assets/js/main.js
index 6ea30e8..2068556 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -284,6 +284,53 @@ phoneInputs.forEach(phoneInput => {
});
})
+// pc menu
+
+let blocksMenu = document.querySelectorAll('.header-menu-list-next__block');
+
+blocksMenu.forEach(block =>{
+ let button = block.querySelector('.header-menu-list__next'),
+ content = block.querySelector('.header-menu-list-next__content');
+
+ button.onclick = function () {
+ content.classList.add('active');
+ }
+
+ let nextButtons = block.querySelectorAll('.header-menu-list-next-content__item');
+
+ nextButtons.forEach(button => {
+ let className = button.dataset.menu;
+
+ if (typeof className == 'undefined') return;
+
+ button.onclick = function () {
+ if (block.querySelector('.header-menu-list-next-content__item.active')) {
+ block.querySelector('.header-menu-list-next-content__item.active').classList.toggle('active');
+ block.querySelector('.header-menu-list-next__content-next.active').classList.toggle('active');
+ }
+
+
+ button.classList.toggle('active');
+ document.querySelector(`.header-menu-list-next__content-next.${className}`).classList.toggle('active');
+
+ }
+ })
+
+ content.addEventListener('mouseout', function (event) {
+ if (event.relatedTarget.offsetParent.classList.contains('header-menu-list-next__content-next')) return;
+
+ if (event.relatedTarget.offsetParent != content) {
+ content.classList.remove('active');
+ content.querySelectorAll('.header-menu-list-next__content-next.active').forEach(next => {
+ next.classList.remove('active');
+ })
+ block.querySelector('.header-menu-list-next-content__item.active').classList.remove('active');
+
+ content.removeEventListener("mouseout", handleMouseDown, false);
+ }
+ })
+
+})
// resize
window.addEventListener('resize', () => {
diff --git a/index.html b/index.html
index 66ddf03..4605f65 100644
--- a/index.html
+++ b/index.html
@@ -112,10 +112,46 @@
О компании
-
+
-
+
+
+
зонирование