From c4fd63d19cc5ab88ae8c440637fa57f252b4772e Mon Sep 17 00:00:00 2001 From: Meylis Gazakow Date: Thu, 2 Jun 2022 12:54:23 +0300 Subject: [PATCH] new services link added --- about.html | 13 +- assets/css/components/2-layout/header.scss | 50 ++++++- assets/css/main.css | 46 ++++++- assets/js/main.js | 19 ++- contact.html | 13 +- events-service.html | 149 ++++++++++++--------- exhebition-service.html | 13 +- index.html | 2 +- indoor-service.html | 13 +- media-service.html | 149 ++++++++++++--------- outdoor-service.html | 13 +- portfolio.html | 13 +- production-service.html | 149 ++++++++++++--------- 13 files changed, 424 insertions(+), 218 deletions(-) diff --git a/about.html b/about.html index da55397..e7f351c 100644 --- a/about.html +++ b/about.html @@ -102,9 +102,18 @@
  • - + Услуги - + + +
    + Наружная реклама + Реклама в помещениях + Выставочные стенды + Организация мероприятий + Реклама в СМИ + Производство +
  • diff --git a/assets/css/components/2-layout/header.scss b/assets/css/components/2-layout/header.scss index 247533b..b4253ff 100644 --- a/assets/css/components/2-layout/header.scss +++ b/assets/css/components/2-layout/header.scss @@ -82,17 +82,64 @@ li { margin-right: 60px; + position: relative; &:last-child { margin-right: 0; } - a { + a, + span { display: block; font-weight: 500; font-size: 16px; line-height: 20px; color: #FFFFFF; + cursor: pointer; + + // &:hover~.service_nav { + // display: block; + // max-height: unset; + // } + } + } + } + + .service_nav { + display: none; + @include transition; + max-height: 0; + overflow: hidden; + background: #fff; + padding: 15px; + + position: absolute; + top: calc(100% + 20px); + left: 50%; + @include transformX; + white-space: nowrap; + z-index: 3; + + &.active { + display: block; + max-height: unset; + } + + a { + display: block; + font-weight: 500; + font-size: 16px; + line-height: 20px; + color: #000; + margin-bottom: 10px; + @include transition; + + &:hover { + opacity: .8; + } + + &:last-child { + margin-bottom: 0; } } } @@ -275,6 +322,7 @@ animation: group-txt 1s linear; -webkit-animation: group-txt 1s linear; } + // ============================================================= svg .svg-elem-1 { diff --git a/assets/css/main.css b/assets/css/main.css index ee05cca..df2d9c0 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -228,16 +228,60 @@ li { } .header .nav ul li { margin-right: 60px; + position: relative; } .header .nav ul li:last-child { margin-right: 0; } -.header .nav ul li a { +.header .nav ul li a, +.header .nav ul li span { display: block; font-weight: 500; font-size: 16px; line-height: 20px; color: #FFFFFF; + cursor: pointer; +} +.header .nav .service_nav { + display: none; + -webkit-transition: all 0.2s ease-in-out 0s; + transition: all 0.2s ease-in-out 0s; + -moz-transition: all 0.2s ease-in-out 0s; + max-height: 0; + overflow: hidden; + background: #fff; + padding: 15px; + position: absolute; + top: calc(100% + 20px); + left: 50%; + transform: translateX(-50%); + -moz-ransform: translateX(-50%); + -o-transform: translateX(-50%); + -ms-transform: translateX(-50%); + -webkit-transform: translateX(-50%); + white-space: nowrap; + z-index: 3; +} +.header .nav .service_nav.active { + display: block; + max-height: unset; +} +.header .nav .service_nav a { + display: block; + font-weight: 500; + font-size: 16px; + line-height: 20px; + color: #000; + margin-bottom: 10px; + -webkit-transition: all 0.2s ease-in-out 0s; + transition: all 0.2s ease-in-out 0s; + -moz-transition: all 0.2s ease-in-out 0s; +} +.header .nav .service_nav a:hover { + opacity: 0.8; +} +.header .nav .service_nav a:last-child { + margin-bottom: 0; } .header .lang { position: relative; diff --git a/assets/js/main.js b/assets/js/main.js index 6da6b6d..a46d193 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -10,6 +10,9 @@ let lang_current = document.querySelector(".lang_current"); let burger = document.querySelector(".burger"); let nav_bg = document.querySelector(".nav_bg"); +let service_nav_link = document.querySelector(".service_nav-link"); +let service_nav = document.querySelector(".service_nav"); + function sleep(time) { return new Promise((resolve) => setTimeout(resolve, time)); @@ -40,11 +43,11 @@ window.onclick = function (e) { // drop_lang.classList.remove('active') // } - if (nav_bg.classList.contains('active') && !e.target.closest('.burger') && !e.target.closest('.lang_current')) { + if (nav_bg.classList.contains('active') && !e.target.closest('.burger') && !e.target.closest('.lang_current') && !e.target.closest('.service_nav-link')) { nav_bg.classList.remove('active') } - if (burger.classList.contains('active') && !e.target.closest('.burger') && !e.target.closest('.lang_current')) { + if (burger.classList.contains('active') && !e.target.closest('.burger') && !e.target.closest('.lang_current') && !e.target.closest('.service_nav-link')) { burger.classList.remove('active') } @@ -52,6 +55,10 @@ window.onclick = function (e) { lang_drop.classList.remove('active') } + if (service_nav.classList.contains('active') && !e.target.closest('.service_nav-link')) { + service_nav.classList.remove('active') + } + } @@ -74,3 +81,11 @@ if (burger != undefined) { }); }); } + +if (service_nav_link != undefined) { + service_nav_link.addEventListener('click', function () { + sleep(2).then(() => { + service_nav.classList.toggle('active'); + }); + }); +} diff --git a/contact.html b/contact.html index 607ddab..8ccb2a8 100644 --- a/contact.html +++ b/contact.html @@ -102,9 +102,18 @@
  • - + Услуги - + + +
    + Наружная реклама + Реклама в помещениях + Выставочные стенды + Организация мероприятий + Реклама в СМИ + Производство +
  • diff --git a/events-service.html b/events-service.html index 735b5e1..3c87581 100644 --- a/events-service.html +++ b/events-service.html @@ -20,71 +20,77 @@
    @@ -97,9 +103,18 @@
  • - + Услуги - + + +
    + Наружная реклама + Реклама в помещениях + Выставочные стенды + Организация мероприятий + Реклама в СМИ + Производство +
  • diff --git a/exhebition-service.html b/exhebition-service.html index 1251302..90ceec3 100644 --- a/exhebition-service.html +++ b/exhebition-service.html @@ -103,9 +103,18 @@
  • - + Услуги - + + +
    + Наружная реклама + Реклама в помещениях + Выставочные стенды + Организация мероприятий + Реклама в СМИ + Производство +
  • diff --git a/index.html b/index.html index 08357e1..d86901d 100644 --- a/index.html +++ b/index.html @@ -103,7 +103,7 @@
  • - + Услуги diff --git a/indoor-service.html b/indoor-service.html index 97387ca..790fa50 100644 --- a/indoor-service.html +++ b/indoor-service.html @@ -103,9 +103,18 @@
  • - + Услуги - + + +
    + Наружная реклама + Реклама в помещениях + Выставочные стенды + Организация мероприятий + Реклама в СМИ + Производство +
  • diff --git a/media-service.html b/media-service.html index cc24799..bdefa77 100644 --- a/media-service.html +++ b/media-service.html @@ -20,71 +20,77 @@
    @@ -97,9 +103,18 @@
  • - + Услуги - + + +
    + Наружная реклама + Реклама в помещениях + Выставочные стенды + Организация мероприятий + Реклама в СМИ + Производство +
  • diff --git a/outdoor-service.html b/outdoor-service.html index 3abf575..fa9c8d6 100644 --- a/outdoor-service.html +++ b/outdoor-service.html @@ -103,9 +103,18 @@
  • - + Услуги - + + +
    + Наружная реклама + Реклама в помещениях + Выставочные стенды + Организация мероприятий + Реклама в СМИ + Производство +
  • diff --git a/portfolio.html b/portfolio.html index 8490bd8..2a6e080 100644 --- a/portfolio.html +++ b/portfolio.html @@ -103,9 +103,18 @@
  • - + Услуги - + + +
    + Наружная реклама + Реклама в помещениях + Выставочные стенды + Организация мероприятий + Реклама в СМИ + Производство +
  • diff --git a/production-service.html b/production-service.html index 93c50ef..e19ed2d 100644 --- a/production-service.html +++ b/production-service.html @@ -20,71 +20,77 @@
    @@ -97,9 +103,18 @@
  • - + Услуги - + + +
    + Наружная реклама + Реклама в помещениях + Выставочные стенды + Организация мероприятий + Реклама в СМИ + Производство +