diff --git a/layout/js/main.js b/layout/js/main.js new file mode 100644 index 0000000..df9397e --- /dev/null +++ b/layout/js/main.js @@ -0,0 +1,29 @@ +$(document).ready(function() { + var hashValue = window.location.hash.substring(1); + + if (hashValue) { + var hashText = hashValue.toUpperCase(); + + + setTimeout(function() { + var $tabsBlock = $('ul.nav.nav-tabs[role="tablist"]'); + + if ($tabsBlock.length) { + $tabsBlock.find('li a').each(function() { + var tabText = $(this).text().trim().toUpperCase(); + if (tabText === hashText) { + $(this).trigger('click'); + + setTimeout(function() { + $('html, body').animate({ + scrollTop: $tabsBlock.offset().top - 150 + }, 600); + }, 1000); + + return false; + } + }); + } + }, 1000); + } +}); \ No newline at end of file diff --git a/layout/style-css/nav-menu.css b/layout/style-css/nav-menu.css new file mode 100644 index 0000000..66b9fb9 --- /dev/null +++ b/layout/style-css/nav-menu.css @@ -0,0 +1 @@ +@import"https://fonts.googleapis.com/css2?family=Alegreya+Sans:ital,wght@0,100;0,300;0,400;0,500;0,700;0,800;0,900;1,100;1,300;1,400;1,500;1,700;1,800;1,900&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap";@import"https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&display=swap";@import"http://fonts.cdnfonts.com/css/bahnschrift";@font-face{font-family:"URW Form Extra";src:url("/layout/fonts/urw-font-wof/URWForm-ExtraBoldItalic.woff2") format("woff2"),url("/layout/fonts/urw-font-wof/URWForm-ExtraBoldItalic.woff") format("woff");font-weight:bold;font-style:italic;font-display:swap}@font-face{font-family:"URW Form";src:url("/layout/fonts/urw-font-wof/URWForm-BoldItalic.woff2") format("woff2"),url("/layout/fonts/urw-font-wof/URWForm-BoldItalic.woff") format("woff");font-weight:bold;font-style:italic;font-display:swap}@font-face{font-family:"URW Form";src:url("/layout/fonts/urw-font-wof/URWForm-Bold.woff2") format("woff2"),url("/layout/fonts/urw-font-wof/URWForm-Bold.woff") format("woff");font-weight:bold;font-style:normal;font-display:swap}@font-face{font-family:"URW Form Demi";src:url("/layout/fonts/urw-font-wof/URWForm-Demi.woff2") format("woff2"),url("/layout/fonts/urw-font-wof/URWForm-Demi.woff") format("woff");font-weight:normal;font-style:normal;font-display:swap}@font-face{font-family:"URW Form Extra";src:url("/layout/fonts/urw-font-wof/URWForm-ExtraBoldItalic.woff2") format("woff2"),url("/layout/fonts/urw-font-wof/URWForm-ExtraBoldItalic.woff") format("woff");font-weight:bold;font-style:italic;font-display:swap}@font-face{font-family:"URW Form Extra";src:url("/layout/fonts/urw-font-wof/URWForm-ExtraBold.woff2") format("woff2"),url("/layout/fonts/urw-font-wof/URWForm-ExtraBold.woff") format("woff");font-weight:bold;font-style:normal;font-display:swap}@font-face{font-family:"URW Form Demi";src:url("/layout/fonts/urw-font-wof/URWForm-Demi.woff2") format("woff2"),url("/layout/fonts/urw-font-wof/URWForm-Demi.woff") format("woff");font-weight:normal;font-style:normal;font-display:swap}@font-face{font-family:"URW Form";src:url("/layout/fonts/urw-font-wof/URWForm-BoldItalic.woff2") format("woff2"),url("/layout/fonts/urw-font-wof/URWForm-BoldItalic.woff") format("woff");font-weight:bold;font-style:italic;font-display:swap}@font-face{font-family:"URW Form Extra";src:url("/layout/fonts/urw-font-wof/URWForm-ExtraBold.woff2") format("woff2"),url("/layout/fonts/urw-font-wof/URWForm-ExtraBold.woff") format("woff");font-weight:bold;font-style:normal;font-display:swap}@font-face{font-family:"URW Form";src:url("/layout/fonts/urw-font-wof/URWForm-Bold.woff2") format("woff2"),url("/layout/fonts/urw-font-wof/URWForm-Bold.woff") format("woff");font-weight:bold;font-style:normal;font-display:swap}@font-face{font-family:"URW Form";src:url("/layout/fonts/urw-font-wof/URWForm-Medium.woff2") format("woff2"),url("/layout/fonts/urw-font-wof/URWForm-Medium.woff") format("woff");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:"URW Form";src:url("/layout/fonts/urw-font-wof/URWForm-Italic.woff2") format("woff2"),url("/layout/fonts/urw-font-wof/URWForm-Italic.woff") format("woff");font-weight:normal;font-style:italic;font-display:swap}@font-face{font-family:"URW Form";src:url("/layout/fonts/urw-font-wof/URWForm-Light.woff2") format("woff2"),url("/layout/fonts/urw-font-wof/URWForm-Light.woff") format("woff");font-weight:300;font-style:normal;font-display:swap}@font-face{font-family:"URW Form";src:url("/layout/fonts/urw-font-wof/URWForm-MediumItalic.woff2") format("woff2"),url("/layout/fonts/urw-font-wof/URWForm-MediumItalic.woff") format("woff");font-weight:500;font-style:italic;font-display:swap}@font-face{font-family:"URW Form";src:url("/layout/fonts/urw-font-wof/URWForm-LightItalic.woff2") format("woff2"),url("/layout/fonts/urw-font-wof/URWForm-LightItalic.woff") format("woff");font-weight:300;font-style:italic;font-display:swap}@font-face{font-family:"URW Form";src:url("/layout/fonts/urw-font-wof/URWForm-Medium.woff2") format("woff2"),url("/layout/fonts/urw-font-wof/URWForm-Medium.woff") format("woff");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:"URW Form";src:url("/layout/fonts/urw-font-wof/URWForm-Regular.woff2") format("woff2"),url("/layout/fonts/urw-font-wof/URWForm-Regular.woff") format("woff");font-weight:normal;font-style:normal;font-display:swap}@font-face{font-family:"URW Form";src:url("/layout/fonts/urw-font-wof/URWForm-Light.woff2") format("woff2"),url("/layout/fonts/urw-font-wof/URWForm-Light.woff") format("woff");font-weight:300;font-style:normal;font-display:swap}@font-face{font-family:"URW Form Extra";src:url("/layout/fonts/urw-font-wof/URWForm-ExtraLightItalic.woff2") format("woff2"),url("/layout/fonts/urw-font-wof/URWForm-ExtraLightItalic.woff") format("woff");font-weight:200;font-style:italic;font-display:swap}@font-face{font-family:"URW Form";src:url("/layout/fonts/urw-font-wof/URWForm-LightItalic.woff2") format("woff2"),url("/layout/fonts/urw-font-wof/URWForm-LightItalic.woff") format("woff");font-weight:300;font-style:italic;font-display:swap}@font-face{font-family:"URW Form Extra";src:url("/layout/fonts/urw-font-wof/URWForm-ExtraLight.woff2") format("woff2"),url("/layout/fonts/urw-font-wof/URWForm-ExtraLight.woff") format("woff");font-weight:200;font-style:normal;font-display:swap}@font-face{font-family:"URW Form";src:url("/layout/fonts/urw-font-wof/URWForm-MediumItalic.woff2") format("woff2"),url("/layout/fonts/urw-font-wof/URWForm-MediumItalic.woff") format("woff");font-weight:500;font-style:italic;font-display:swap}@font-face{font-family:"URW Form Extra";src:url("/layout/fonts/urw-font-wof/URWForm-ExtraLightItalic.woff2") format("woff2"),url("/layout/fonts/urw-font-wof/URWForm-ExtraLightItalic.woff") format("woff");font-weight:200;font-style:italic;font-display:swap}@font-face{font-family:"URW Form Extra";src:url("/layout/fonts/urw-font-wof/URWForm-ExtraLight.woff2") format("woff2"),url("/layout/fonts/urw-font-wof/URWForm-ExtraLight.woff") format("woff");font-weight:200;font-style:normal;font-display:swap}@font-face{font-family:"URW Form";src:url("/layout/fonts/urw-font-wof/URWForm-Italic.woff2") format("woff2"),url("/layout/fonts/urw-font-wof/URWForm-Italic.woff") format("woff");font-weight:normal;font-style:italic;font-display:swap}@font-face{font-family:"URW Form";src:url("/layout/fonts/urw-font-wof/URWForm-Regular.woff2") format("woff2"),url("/layout/fonts/urw-font-wof/URWForm-Regular.woff") format("woff");font-weight:normal;font-style:normal;font-display:swap}@font-face{font-family:"URW Form";src:url("/layout/fonts/urw-font-wof/URWForm-Thin.woff2") format("woff2"),url("/layout/fonts/urw-font-wof/URWForm-Thin.woff") format("woff");font-weight:100;font-style:normal;font-display:swap}@font-face{font-family:"URW Form";src:url("/layout/fonts/urw-font-wof/URWForm-ThinItalic.woff2") format("woff2"),url("/layout/fonts/urw-font-wof/URWForm-ThinItalic.woff") format("woff");font-weight:100;font-style:italic;font-display:swap}@font-face{font-family:"URW Form";src:url("/layout/fonts/urw-font-wof/URWForm-ThinItalic.woff2") format("woff2"),url("/layout/fonts/urw-font-wof/URWForm-ThinItalic.woff") format("woff");font-weight:100;font-style:italic;font-display:swap}@font-face{font-family:"URW Form";src:url("/layout/fonts/urw-font-wof/URWForm-Thin.woff2") format("woff2"),url("/layout/fonts/urw-font-wof/URWForm-Thin.woff") format("woff");font-weight:100;font-style:normal;font-display:swap}header#header .header-data{height:54px}header#header #header-nav nav#header-mine-menu .submenu{position:absolute;left:0;right:0;top:calc(100% - 25px);background:#fff;border-bottom:1px solid #dcdcdc;box-shadow:0 1.5px 4px 0 rgba(0,0,0,.05);padding-top:25px;padding-bottom:25px;opacity:0;visibility:hidden}header#header #header-nav nav#header-mine-menu .submenu .container{position:relative}header#header #header-nav nav#header-mine-menu ul{list-style:none}header#header #header-nav nav#header-mine-menu ul:not(.container){padding:0;margin:0}header#header #header-nav nav#header-mine-menu ul.lvl-1{display:flex;flex-direction:row;-moz-column-gap:40px;column-gap:40px}header#header #header-nav nav#header-mine-menu ul.lvl-1>li{height:54px;align-content:center}header#header #header-nav nav#header-mine-menu ul.lvl-1>li:hover>.submenu{opacity:1;visibility:visible}header#header #header-nav nav#header-mine-menu ul.lvl-1>li>a{display:flex;flex-direction:row;align-items:center;-moz-column-gap:5px;column-gap:5px}header#header #header-nav nav#header-mine-menu ul.lvl-1>li>a span{color:#1d1d1e;font-size:15px;font-family:"URW Form",sans-serif;font-weight:700;letter-spacing:1px;text-transform:uppercase;line-height:1;margin-bottom:-4px}header#header #header-nav nav#header-mine-menu ul.lvl-2{width:150px}header#header #header-nav nav#header-mine-menu ul.lvl-2>li:not(:last-child){margin-bottom:20px}header#header #header-nav nav#header-mine-menu ul.lvl-2>li:hover>a span{text-shadow:0px .3px 0px #1d1d1e,0px -0.3px 0px #1d1d1e,.3px 0px 0px #1d1d1e,-0.3px 0px 0px #1d1d1e,-0.3px -0.3px 0px #1d1d1e,.3px .3px 0px #1d1d1e,.3px -0.3px 0px #1d1d1e,-0.3px .3px 0px #1d1d1e,-0.3px .3px 0px #1d1d1e}header#header #header-nav nav#header-mine-menu ul.lvl-2>li:hover>a span::before{width:100%;visibility:visible}header#header #header-nav nav#header-mine-menu ul.lvl-2>li:hover>a img{width:11px}header#header #header-nav nav#header-mine-menu ul.lvl-2>li:hover .lvl-3{opacity:1;visibility:visible}header#header #header-nav nav#header-mine-menu ul.lvl-2>li>a{position:relative;width:100%;display:inline-flex;flex-direction:row;align-items:center;-moz-column-gap:5px;column-gap:5px;text-decoration:none;transition:all 250ms ease-in-out}header#header #header-nav nav#header-mine-menu ul.lvl-2>li>a span{display:inline-block;position:relative;color:#1d1d1e;font-size:16px;font-family:"URW Form",sans-serif;font-weight:500;line-height:1;transition:all 250ms ease-in-out}header#header #header-nav nav#header-mine-menu ul.lvl-2>li>a span::before{content:"";position:absolute;bottom:-10px;left:0;width:0;height:3px;background:#1d1d1e;visibility:hidden;transition:all 250ms ease-in-out}header#header #header-nav nav#header-mine-menu ul.lvl-2>li>a img{transform:rotate(-90deg);width:0;transition:all 250ms ease-in-out}header#header #header-nav nav#header-mine-menu ul.lvl-3{position:absolute;left:150px;top:0;right:0;bottom:0;transition:all 250ms ease-in-out;padding-left:75px;opacity:0;visibility:hidden}header#header #header-nav nav#header-mine-menu ul.lvl-3.lvl-3-big{display:flex;flex-direction:row;flex-wrap:wrap;-moz-column-gap:60px;column-gap:60px}header#header #header-nav nav#header-mine-menu ul.lvl-3.lvl-3-big>li>a{text-decoration:none}header#header #header-nav nav#header-mine-menu ul.lvl-3.lvl-3-big>li>a span{color:#1d1d1e;font-size:16px;font-family:"URW Form",sans-serif;font-weight:700;line-height:1}header#header #header-nav nav#header-mine-menu ul.lvl-3:not(.lvl-3-big)>li:not(:last-child){margin-bottom:20px}header#header #header-nav nav#header-mine-menu ul.lvl-3:not(.lvl-3-big)>li>a{text-decoration:none}header#header #header-nav nav#header-mine-menu ul.lvl-3:not(.lvl-3-big)>li>a span{color:#1d1d1e;font-size:20px;font-family:"URW Form",sans-serif;font-weight:300;line-height:1}header#header #header-nav nav#header-mine-menu ul.lvl-4{margin-top:20px}header#header #header-nav nav#header-mine-menu ul.lvl-4>li:not(:last-child){margin-bottom:20px}header#header #header-nav nav#header-mine-menu ul.lvl-4>li>a{text-decoration:none}header#header #header-nav nav#header-mine-menu ul.lvl-4>li>a span{color:#1d1d1e;font-size:20px;font-family:"URW Form",sans-serif;font-weight:300;line-height:1}/*# sourceMappingURL=nav-menu.css.map */ \ No newline at end of file diff --git a/layout/style-css/nav-menu.css.map b/layout/style-css/nav-menu.css.map new file mode 100644 index 0000000..85274e3 --- /dev/null +++ b/layout/style-css/nav-menu.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["../style-scss/_variables.scss","../style-scss/nav-menu.scss"],"names":[],"mappings":"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","file":"nav-menu.css"} \ No newline at end of file diff --git a/layout/style-scss/nav-menu.scss b/layout/style-scss/nav-menu.scss new file mode 100644 index 0000000..fe455ac --- /dev/null +++ b/layout/style-scss/nav-menu.scss @@ -0,0 +1,222 @@ +@import 'variables'; +@import '_mixins'; + +header#header { + .header-data { + // position: relative; + height: 54px; + } + #header-nav { + nav#header-mine-menu { + .submenu { + position: absolute; + left: 0; + right: 0; + top: calc(100% - 25px); + background: $cWhite; + border-bottom: 1px solid #dcdcdc; + box-shadow: 0 1.5px 4px 0 rgba(0, 0, 0, 0.05); + padding-top: 25px; + padding-bottom: 25px; + + opacity: 0; + visibility: hidden; + + .container { + position: relative; + } + } + + ul { + list-style: none; + + &:not(.container) { + padding: 0; + margin: 0; + } + + &.lvl-1 { + display: flex; + flex-direction: row; + column-gap: 40px; + + > li { + height: 54px; + align-content: center; + + &:hover { + > .submenu { + opacity: 1; + visibility: visible; + } + } + > a { + display: flex; + flex-direction: row; + align-items: center; + column-gap: 5px; + + span { + color: $cTxtBlack; + font-size: 15px; + font-family: $font3; + font-weight: 700; + letter-spacing: 1px; + text-transform: uppercase; + line-height: 1; + margin-bottom: -4px; + } + } + } + } + &.lvl-2 { + width: 150px; + + > li { + &:not(:last-child) { + margin-bottom: 20px; + } + + &:hover { + > a { + span { + text-shadow: 0px 0.3px 0px $cTxtBlack, + 0px -0.3px 0px $cTxtBlack, 0.3px 0px 0px $cTxtBlack, + -0.3px 0px 0px $cTxtBlack, -0.3px -0.3px 0px $cTxtBlack, + 0.3px 0.3px 0px $cTxtBlack, 0.3px -0.3px 0px $cTxtBlack, + -0.3px 0.3px 0px $cTxtBlack, -0.3px 0.3px 0px $cTxtBlack; + + &::before { + width: 100%; + visibility: visible; + } + } + + img { + width: 11px; + } + } + + .lvl-3 { + opacity: 1; + visibility: visible; + } + } + + > a { + position: relative; + width: 100%; + display: inline-flex; + flex-direction: row; + align-items: center; + column-gap: 5px; + text-decoration: none; + transition: all 250ms ease-in-out; + + span { + display: inline-block; + position: relative; + color: $cTxtBlack; + font-size: 16px; + font-family: $font3; + font-weight: 500; + line-height: 1; + transition: all 250ms ease-in-out; + + &::before { + content: ''; + position: absolute; + bottom: -10px; + left: 0; + width: 0; + height: 3px; + background: $cTxtBlack; + visibility: hidden; + transition: all 250ms ease-in-out; + } + } + + img { + transform: rotate(-90deg); + width: 0; + transition: all 250ms ease-in-out; + } + } + } + } + &.lvl-3 { + position: absolute; + // left: calc(150px + 15px + 60px); + left: 150px; + top: 0; + right: 0; + bottom: 0; + transition: all 250ms ease-in-out; + padding-left: 75px; + + opacity: 0; + visibility: hidden; + + &.lvl-3-big { + display: flex; + flex-direction: row; + flex-wrap: wrap; + column-gap: 60px; + + > li { + > a { + text-decoration: none; + + span { + color: $cTxtBlack; + font-size: 16px; + font-family: $font3; + font-weight: 700; + line-height: 1; + } + } + } + } + + &:not(.lvl-3-big) { + > li { + &:not(:last-child) { + margin-bottom: 20px; + } + > a { + text-decoration: none; + + span { + color: $cTxtBlack; + font-size: 20px; + font-family: $font3; + font-weight: 300; + line-height: 1; + } + } + } + } + } + + &.lvl-4 { + margin-top: 20px; + > li { + &:not(:last-child) { + margin-bottom: 20px; + } + > a { + text-decoration: none; + span { + color: $cTxtBlack; + font-size: 20px; + font-family: $font3; + font-weight: 300; + line-height: 1; + } + } + } + } + } + } + } +}