{"id":552,"date":"2023-03-11T00:58:29","date_gmt":"2023-03-10T21:58:29","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=552"},"modified":"2023-03-28T23:35:58","modified_gmt":"2023-03-28T20:35:58","slug":"animaczionnoe-menyu","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/headermenu\/552\/","title":{"rendered":"Animated menu"},"content":{"rendered":"\n<figure class=\"wp-block-video\"><video height=\"967\" style=\"aspect-ratio: 1812 \/ 967;\" width=\"1812\" controls src=\"https:\/\/notes.profidev.online\/wp-content\/uploads\/2023\/03\/vokoscreenng-2023-03-10_22-47-42.webm\"><\/video><\/figure>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;HTML&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;html&quot;}\">&lt;header class=&quot;header-main&quot;&gt;\n\n  &lt;a class='header-main__menu js-menu-toggle'&gt;\n   &lt;div class='header-main__menu-bars'&gt;&lt;\/div&gt;\n  &lt;\/a&gt; \n&lt;\/header&gt;  \n\n&lt;section class=&quot;header-menu height--100&quot;&gt;\n  &lt;div class=&quot;header-menu__content&quot;&gt;\n\n  &lt;nav class=&quot;header-menu__nav-cases&quot;&gt;\n\n      &lt;span class=&quot;nav__label&quot;&gt;Stories&lt;\/span&gt;\n    &lt;ul&gt;\n      &lt;li&gt;\n    &lt;article class=&quot;header-menu__page&quot;&gt;\n      &lt;span class=&quot;page__label&quot;&gt;01 &lt;span&gt;Pemco&lt;\/span&gt;&lt;\/span&gt;\n      &lt;img src=&quot;https:\/\/unsplash.it\/g\/600\/400?image=453&quot;\/&gt;\n    &lt;\/article&gt;  \n      &lt;\/li&gt;\n      \n      &lt;li&gt;\n    &lt;article class=&quot;header-menu__page&quot;&gt;\n      &lt;span class=&quot;page__label&quot;&gt;02 &lt;span&gt;Acme&lt;\/span&gt;&lt;\/span&gt;\n      &lt;img src=&quot;https:\/\/unsplash.it\/g\/600\/400?image=486&quot;\/&gt;\n    &lt;\/article&gt;  \n      &lt;\/li&gt;\n      &lt;li&gt;\n    &lt;article class=&quot;header-menu__page&quot;&gt;\n      &lt;span class=&quot;page__label&quot;&gt;03 &lt;span&gt;Turtles&lt;\/span&gt;&lt;\/span&gt;\n      &lt;img src=&quot;https:\/\/unsplash.it\/g\/600\/400?image=655&quot;\/&gt;\n    &lt;\/article&gt;  \n      &lt;\/li&gt;\n    &lt;li&gt;\n    &lt;article class=&quot;header-menu__page&quot;&gt;\n      &lt;span class=&quot;page__label&quot;&gt;04 &lt;span&gt;Wombats&lt;\/span&gt;&lt;\/span&gt;\n      &lt;img src=&quot;https:\/\/unsplash.it\/g\/600\/400?image=735&quot;\/&gt;\n    &lt;\/article&gt;  \n      &lt;\/li&gt;\n      &lt;li&gt;\n    &lt;article class=&quot;header-menu__page&quot;&gt;\n      &lt;span class=&quot;page__label&quot;&gt;05 &lt;span&gt;Meerkat&lt;\/span&gt;&lt;\/span&gt;\n      &lt;img src=&quot;https:\/\/unsplash.it\/g\/600\/400?image=802&quot;\/&gt;\n    &lt;\/article&gt; \n      &lt;\/li&gt;\n      \n      &lt;li&gt;\n    &lt;article class=&quot;header-menu__page&quot;&gt;\n      &lt;span class=&quot;page__label&quot;&gt;06 &lt;span&gt;Stink Beetles&lt;\/span&gt;&lt;\/span&gt;\n      &lt;img src=&quot;https:\/\/unsplash.it\/g\/600\/400?image=939&quot;\/&gt;\n    &lt;\/article&gt; \n      &lt;\/li&gt;\n       &lt;li&gt;\n    &lt;article class=&quot;header-menu__page&quot;&gt;\n      &lt;span class=&quot;page__label&quot;&gt;07 &lt;span&gt;Donkeys&lt;\/span&gt;&lt;\/span&gt;\n      &lt;img src=&quot;https:\/\/unsplash.it\/g\/600\/400?image=335&quot;\/&gt;\n    &lt;\/article&gt;  \n      &lt;\/li&gt;\n      &lt;li&gt;\n    &lt;article class=&quot;header-menu__page&quot;&gt;\n      &lt;span class=&quot;page__label&quot;&gt;08 &lt;span&gt;Sheeps&lt;\/span&gt;&lt;\/span&gt;\n      &lt;img src=&quot;https:\/\/unsplash.it\/g\/600\/400?image=811&quot;\/&gt;\n    &lt;\/article&gt; \n      &lt;\/li&gt;\n      \n      &lt;li&gt;\n    &lt;article class=&quot;header-menu__page&quot;&gt;\n      &lt;span class=&quot;page__label&quot;&gt;09 &lt;span&gt;Cuttle Fishes&lt;\/span&gt;&lt;\/span&gt;\n      &lt;img src=&quot;https:\/\/unsplash.it\/g\/600\/400?image=919&quot;\/&gt;\n    &lt;\/article&gt; \n      &lt;\/li&gt;\n    &lt;\/ul&gt;\n  &lt;\/nav&gt;\n  &lt;\/div&gt;\n&lt;\/section&gt;  \n\n&lt;!-- Main\n============================== --&gt;\t\n&lt;main role=&quot;main&quot;&gt;\n\n&lt;!-- Mast\n============================== --&gt;\t\n&lt;section class=&quot;mast-page mast--overlay align--vcenter height--100&quot;&gt;\n  &lt;div class=&quot;mast-page__content&quot;&gt;\n    &lt;h1&gt;This A Header&lt;\/h1&gt;\n    &lt;p&gt;And this right here is a little intro paragraphy.&lt;\/p&gt;\n  &lt;\/div&gt;\n&lt;\/section&gt;\n&lt;\/main&gt;\n&lt;script src=&quot;\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/2.1.3\/jquery.min.js&quot;&gt;&lt;\/script&gt;\n\/\/\u0421\u043a\u0440\u0438\u043f\u0442 js \u043d\u0430\u0434\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0437\u0434\u0435\u0441\u044c\n\/\/\u0410\u0432\u0442\u043e\u0440: Stephen Scaff. @StephenScaff<\/pre><\/div>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;css&quot;,&quot;mime&quot;:&quot;text\/css&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;CSS&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;css&quot;}\">::-webkit-scrollbar-thumb {\n  background-color: transparent;\n}\n\n::-webkit-scrollbar {\n  -webkit-appearance: none;\n  width: 5px;\n  height: 5px;\n  background: transparent;\n}\n\n\/*---------------------------------   \n--mixin for links\n-----------------------------------  *\/\n\/*-----------------------------   \n--Mixin for Overlays\n-------------------------------  *\/\n\/*---------------------------------   \n-Setup\n-----------------------------------  *\/\n*, *:before, *:after {\n  -webkit-box-sizing: border-box;\n  -moz-box-sizing: border-box;\n  box-sizing: border-box;\n}\n\nhtml {\n  font-size: 100%;\n  overflow-y: scroll;\n  overflow-x: hidden;\n  width: 100%;\n  -webkit-text-size-adjust: 100%;\n  background-color: #fff;\n}\n\n\/*---------------------------------   \n--Typography\n-----------------------------------  *\/\nbody {\n  font-family: &quot;Source Serif Pro&quot;, georgia, times, serif;\n  color: #444;\n  position: relative;\n  width: 100%;\n  font-weight: 400;\n  font-style: normal;\n  line-height: 1.9;\n  -ms-text-size-adjust: 100%;\n  -webkit-text-size-adjust: 100%;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-rendering: optimizeLegibility;\n  margin: 0;\n}\n\n\/*---------------------------------   \n--Fluid body sizing\n-----------------------------------  *\/\nbody {\n  font-size: 100%;\n}\n@media (min-width: 36em) {\n  body {\n    font-size: 110%;\n  }\n}\n@media (min-width: 58em) {\n  body {\n    font-size: 120%;\n  }\n}\n@media (min-width: 86em) {\n  body {\n    font-size: 130%;\n  }\n}\n@media (min-width: 115em) {\n  body {\n    font-size: 160%;\n  }\n}\n@media (min-width: 125em) {\n  body {\n    font-size: 170%;\n  }\n}\n@media (min-width: 145em) {\n  body {\n    font-size: 180%;\n  }\n}\n\n\/*---------------------------------   \n--Images\n-----------------------------------  *\/\nimg, object, embed {\n  max-width: 100%;\n  height: auto;\n}\n\nimg {\n  -ms-interpolation-mode: bicubic;\n  border: 0;\n  max-width: 100%;\n  width: 100%;\n}\n\nfigure {\n  margin: 1em 0;\n}\n\n.code-block {\n  font-size: 75%;\n  background-color: #eee;\n  display: block;\n  padding: 2em;\n  border-radius: 4px;\n  overflow-x: scroll;\n}\n\n\/*---------------------------------   \n--Headers\n-----------------------------------  *\/\nh1, h2, h3, h4, h5, h6 {\n  margin: 0;\n  font-weight: 400;\n  display: block;\n  font-family: &quot;Montserrat&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif;\n  text-rendering: optimizeLegibility;\n}\n\n\/*---------------------------------   \n--h1 Theme\n-----------------------------------  *\/\nh1, .font-h1 {\n  font-size: 2em;\n  line-height: 1;\n  margin-bottom: 0.25em;\n}\n@media (min-width: 58em) {\n  h1, .font-h1 {\n    font-size: 2.15em;\n  }\n}\n@media (min-width: 115em) {\n  h1, .font-h1 {\n    font-size: 2.4em;\n  }\n}\n\n\/*---------------------------------   \n--h2 theme\n-----------------------------------  *\/\nh2, .font-h2 {\n  font-size: 1.75em;\n  line-height: 1.35;\n  margin-bottom: 0.5em;\n}\n@media (min-width: 115em) {\n  h2, .font-h2 {\n    font-size: 2em;\n  }\n}\n\n\/*---------------------------------   \n--h3 Theme\n-----------------------------------  *\/\nh3, .font-h3 {\n  font-size: 1.4em;\n  line-height: 1.35;\n  margin-bottom: 0.6em;\n}\n@media (min-width: 115em) {\n  h3, .font-h3 {\n    font-size: 1.65em;\n  }\n}\n\n\/*---------------------------------   \n--h4 Theme\n-----------------------------------  *\/\nh4, .font-h4 {\n  font-size: 1.2em;\n  line-height: 1.4;\n  margin-bottom: 0.5em;\n  font-weight: 400;\n}\n@media (min-width: 115em) {\n  h4, .font-h4 {\n    font-size: 1.45em;\n  }\n}\n\n\/*---------------------------------   \n--h5 theme\n-----------------------------------  *\/\nh5, .font-h5 {\n  font-size: 0.9em;\n  line-height: 1.4;\n  margin-bottom: 0.4em;\n}\n\/*---------------------------------   \n--Headers Apply Theme\n-----------------------------------  *\/\n\/*--------------------------------   \n--Font Lead\n----------------------------------  *\/\n.font-lead {\n  font-size: 120%;\n  hyphens: none;\n  margin-bottom: 0.8em;\n  line-height: 1.6;\n}\n@media (min-width: 58em) {\n  .font-lead {\n    font-size: 135%;\n  }\n}\n\n\/*---------------------------------   \n--typography\n-----------------------------------  *\/\np {\n  margin-top: 0;\n  margin-bottom: 1.3em;\n}\n\nsmall {\n  font-size: 0.77em;\n}\n\n\/*--------------------------------   \n--Links\n----------------------------------  *\/\na {\n  color: #63F1E3;\n  text-decoration: none;\n  line-height: inherit;\n  -webkit-transition: color 0.4s ease-in-out;\n  -moz-transition: color 0.4s ease-in-out;\n  transition: color 0.4s ease-in-out;\n}\na:hover, a:focus {\n  color: #a9f7f0;\n  -webkit-transition: color 0.4s ease-out-out;\n  -moz-transition: color 0.4s ease-out-out;\n  transition: color 0.4s ease-out-out;\n}\na:active {\n  color: #34eddb;\n}\n\n\/*--------------------------------   \n--Selection\n----------------------------------  *\/\n*::selection {\n  background: #0c82a5;\n  color: white;\n}\n\n\/*---------------------------------   \n--Layout: Row\/container\n-----------------------------------  *\/\n.row {\n  width: 90%;\n  margin-left: auto;\n  margin-right: auto;\n}\n@media (min-width: 36em) {\n  .row {\n    max-width: 80%;\n  }\n}\n@media (min-width: 86em) {\n  .row {\n    max-width: 60%;\n  }\n}\n\n.stacked {\n  border: 0;\n  border-top: 1px solid #ddd;\n  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 0 -1px #FFF, 0 4px 1px 0px rgba(0, 0, 0, 0.19), 0 8px 0 -2px #FFF, 0 8px 2px -1px rgba(0, 0, 0, 0.17);\n}\n\n\/*---------------------------------   \n--Layout: Positoning\n-----------------------------------  *\/\n.align--vcenter, .align--top, .align--bottom {\n  display: -webkit-box;\n  display: -moz-box;\n  display: box;\n  display: -webkit-flex;\n  display: -moz-flex;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-pack: center;\n  -moz-box-pack: center;\n  box-pack: center;\n  -webkit-justify-content: center;\n  -moz-justify-content: center;\n  -ms-justify-content: center;\n  -o-justify-content: center;\n  justify-content: center;\n  -ms-flex-pack: center;\n}\n\n.align--vcenter {\n  -webkit-box-align: center;\n  -moz-box-align: center;\n  box-align: center;\n  -webkit-align-items: center;\n  -moz-align-items: center;\n  -ms-align-items: center;\n  -o-align-items: center;\n  align-items: center;\n  -ms-flex-align: center;\n}\n\n.align--vtop {\n  -webkit-box-align: start;\n  -moz-box-align: start;\n  box-align: start;\n  -webkit-align-items: flex-start;\n  -moz-align-items: flex-start;\n  -ms-align-items: flex-start;\n  -o-align-items: flex-start;\n  align-items: flex-start;\n  -ms-flex-align: start;\n}\n\n.align--vbottom {\n  -webkit-box-align: end;\n  -moz-box-align: end;\n  box-align: end;\n  -webkit-align-items: flex-end;\n  -moz-align-items: flex-end;\n  -ms-align-items: flex-end;\n  -o-align-items: flex-end;\n  align-items: flex-end;\n  -ms-flex-align: end;\n}\n\n\/*---------------------------------   \n--Height modifier\n-----------------------------------  *\/\n.height--100 {\n  height: 100vh;\n}\n\n\/*---------------------------------   \n--Header\n-----------------------------------  *\/\n.header-main {\n  position: fixed;\n  z-index: 98;\n  top: 0;\n  left: 0;\n  right: 1em;\n  width: 100%;\n}\n\n.header-main__menu {\n  position: absolute;\n  right: 1em;\n  top: 0.5em;\n}\n\n\/*-------------------------------   \n--Mobile Nav: Menu Bars\n----------------------------------  *\/\n.header-main__menu-bars {\n  width: 2rem;\n  height: 1px;\n  margin: 0.75em 0;\n  background: #fff;\n  position: relative;\n  z-index: 99;\n  -webkit-transition: top 0.3s ease-in-out;\n  -moz-transition: top 0.3s ease-in-out;\n  transition: top 0.3s ease-in-out;\n}\n.header-main__menu-bars:before {\n  top: -8px;\n}\n.header-main__menu-bars:after {\n  top: 8px;\n}\n.header-main__menu-bars:after, .header-main__menu-bars:before {\n  content: &quot;&quot;;\n  display: block;\n  width: 2rem;\n  height: 1px;\n  background: #fff;\n  position: absolute;\n  z-index: -1;\n  -webkit-transition: all 0.3s ease-in-out;\n  -moz-transition: all 0.3s ease-in-out;\n  transition: all 0.3s ease-in-out;\n}\n.header-main__menu-bars:hover {\n  cursor: pointer;\n}\n\n\/*---------------------------------   \n--Header-menu -offcanvas\n-----------------------------------  *\/\n.header-menu {\n  background-color: rgba(0, 0, 0, 0.5);\n  position: fixed;\n  z-index: 91;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  overflow-y: scroll;\n  -webkit-overflow-scrolling: touch;\n  z-index: -1;\n  -webkit-transform: scale(15);\n  -moz-transform: scale(15);\n  -ms-transform: scale(15);\n  -o-transform: scale(15);\n  transform: scale(15);\n  -webkit-transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1);\n  -moz-transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1);\n  transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1);\n}\n.header-menu .header-menu__content {\n  margin-top: 4em;\n  padding: 0 1%;\n}\n.header-menu .nav__label {\n  font-family: &quot;Roboto Condensed&quot;, &quot;Montserrat&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif;\n  text-transform: uppercase;\n  font-size: 0.6em;\n  padding-left: 0.5em;\n  color: rgba(255, 255, 255, 0.4);\n}\n.header-menu__nav {\n  position: relative;\n  z-index: 99;\n}\n.header-menu__nav {\n  *zoom: 1;\n}\n.header-menu__nav:before, .header-menu__nav:after {\n  content: &quot;&quot;;\n  display: table;\n}\n.header-menu__nav:after {\n  clear: both;\n}\n.header-menu__nav li {\n  display: inline;\n  -webkit-transition: opacity 0.6s ease, -webkit-transform 4s ease;\n  -moz-transition: opacity 0.6s ease, -moz-transform 4s ease;\n  transition: opacity 0.6s ease, transform 4s ease;\n}\n.header-menu nav {\n  position: relative;\n  z-index: 99;\n}\n.header-menu nav ul {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n.header-menu nav ul li {\n  opacity: 0;\n  -webkit-transition: all 0.6s ease;\n  -moz-transition: all 0.6s ease;\n  transition: all 0.6s ease;\n}\n.header-menu .header-menu__nav {\n  width: 100%;\n}\n.header-menu .header-menu__nav a {\n  font-family: &quot;Roboto Condensed&quot;, &quot;Montserrat&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif;\n  font-size: 1em;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  position: relative;\n  overflow: hidden;\n  display: inline-block;\n  padding: 0 0.25em;\n  color: rgba(255, 255, 255, 0.9);\n  text-decoration: none;\n  line-height: inherit;\n  -webkit-transition: color 0.4s ease-in-out;\n  -moz-transition: color 0.4s ease-in-out;\n  transition: color 0.4s ease-in-out;\n}\n.header-menu .header-menu__nav a:hover, .header-menu .header-menu__nav a:focus {\n  color: rgba(255, 255, 255, 0.4);\n  -webkit-transition: color 0.4s ease-out-out;\n  -moz-transition: color 0.4s ease-out-out;\n  transition: color 0.4s ease-out-out;\n}\n.header-menu .header-menu__nav a:active {\n  color: rgba(191, 191, 191, 0.4);\n}\n.header-menu .header-menu__nav a:after {\n  content: &quot;&quot;;\n  position: absolute;\n  height: 2px;\n  background-color: rgba(255, 255, 255, 0.4);\n  left: 0;\n  right: 0;\n  top: 60%;\n  margin: 0 auto;\n  -webkit-transform: translateX(-100%);\n  -moz-transform: translateX(-100%);\n  -ms-transform: translateX(-100%);\n  -o-transform: translateX(-100%);\n  transform: translateX(-100%);\n  -webkit-transition: all 0.6s ease;\n  -moz-transition: all 0.6s ease;\n  transition: all 0.6s ease;\n}\n.header-menu .header-menu__nav a:hover:after {\n  width: 100%;\n  -webkit-transform: translateX(0);\n  -moz-transform: translateX(0);\n  -ms-transform: translateX(0);\n  -o-transform: translateX(0);\n  transform: translateX(0);\n  -webkit-transition: -webkit-transform 0.6s ease;\n  -moz-transition: -moz-transform 0.6s ease;\n  transition: transform 0.6s ease;\n}\n.header-menu .header-menu__nav-cases {\n  width: 100%;\n}\n.header-menu .header-menu__nav-cases ul {\n  margin-left: -0.6%;\n  margin-right: -0.6%;\n}\n.header-menu .header-menu__nav-cases ul li {\n  list-style: none;\n  font-family: &quot;Montserrat&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif;\n  letter-spacing: 0.05em;\n  position: relative;\n  float: left;\n  width: 33.333%;\n  padding: 1%;\n}\n.header-menu .page__label {\n  font-family: &quot;Roboto Condensed&quot;, &quot;Montserrat&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif;\n  font-size: 0.9rem;\n  padding-left: 1em;\n}\n.header-menu .page__label span {\n  font-family: &quot;Source Serif Pro&quot;, georgia, times, serif;\n  font-style: italic;\n}\n.header-menu .header-menu__page {\n  background: #fff;\n  float: left;\n  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);\n}\n.header-menu .header-menu__page img {\n  float: left;\n}\n\n\/*----------------------------------   \n--JS-Nav-Open: Menu Bars Animate\n-----------------------------------  *\/\n.js-menu--is-open {\n  \/*--Menu-bars--*\/\n  \/*-- is--open header-menu --*\/\n}\n.js-menu--is-open .header-main__menu-bars {\n  background: none !important;\n}\n.js-menu--is-open .header-main__menu-bars:after, .js-menu--is-open .header-main__menu-bars:before {\n  top: 0 !important;\n  background: #fff !important;\n  zoom: 1;\n}\n.js-menu--is-open .header-main__menu-bars:after {\n  -webkit-transform: rotate(45deg);\n  -moz-transform: rotate(45deg);\n  -ms-transform: rotate(45deg);\n  -o-transform: rotate(45deg);\n  transform: rotate(45deg);\n}\n.js-menu--is-open .header-main__menu-bars:before {\n  -webkit-transform: rotate(-45deg);\n  -moz-transform: rotate(-45deg);\n  -ms-transform: rotate(-45deg);\n  -o-transform: rotate(-45deg);\n  transform: rotate(-45deg);\n}\n.js-menu--is-open .header-menu {\n  height: 100%;\n  opacity: 1;\n  z-index: 91;\n  background-color: #333;\n  -webkit-transform: scale(1);\n  -moz-transform: scale(1);\n  -ms-transform: scale(1);\n  -o-transform: scale(1);\n  transform: scale(1);\n  -webkit-transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1);\n  -moz-transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1);\n  transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1);\n}\n.js-menu--is-open .header-menu nav li {\n  opacity: 1;\n  -webkit-transform: translateY(0);\n  -moz-transform: translateY(0);\n  -ms-transform: translateY(0);\n  -o-transform: translateY(0);\n  transform: translateY(0);\n  -webkit-transition: all 0.6s 0.6s ease;\n  -moz-transition: all 0.6s 0.6s ease;\n  transition: all 0.6s 0.6s ease;\n}\n.js-menu--is-open .header-menu nav li:nth-of-type(1n) {\n  -webkit-transition-delay: 0.6s;\n  -moz-transition-delay: 0.6s;\n  transition-delay: 0.6s;\n}\n.js-menu--is-open .header-menu nav li:nth-of-type(2n) {\n  -webkit-transition-delay: 0.7s;\n  -moz-transition-delay: 0.7s;\n  transition-delay: 0.7s;\n}\n.js-menu--is-open .header-menu nav li:nth-of-type(3n) {\n  -webkit-transition-delay: 0.8s;\n  -moz-transition-delay: 0.8s;\n  transition-delay: 0.8s;\n}\n.js-menu--is-open .header-menu nav li:nth-of-type(4n) {\n  -webkit-transition-delay: 0.9s;\n  -moz-transition-delay: 0.9s;\n  transition-delay: 0.9s;\n}\n.js-menu--is-open .header-menu nav li:nth-of-type(5n) {\n  -webkit-transition-delay: 1s;\n  -moz-transition-delay: 1s;\n  transition-delay: 1s;\n}\n.js-menu--is-open .header-menu nav li:nth-of-type(6n) {\n  -webkit-transition-delay: 1.1s;\n  -moz-transition-delay: 1.1s;\n  transition-delay: 1.1s;\n}\n.js-menu--is-open .header-menu nav li:nth-of-type(7n) {\n  -webkit-transition-delay: 1.2s;\n  -moz-transition-delay: 1.2s;\n  transition-delay: 1.2s;\n}\n.js-menu--is-open .header-menu nav li:nth-of-type(8n) {\n  -webkit-transition-delay: 1.3s;\n  -moz-transition-delay: 1.3s;\n  transition-delay: 1.3s;\n}\n.js-menu--is-open .header-menu nav li:nth-of-type(9n) {\n  -webkit-transition-delay: 1.4s;\n  -moz-transition-delay: 1.4s;\n  transition-delay: 1.4s;\n}\n.js-menu--is-open .header-menu:before {\n  -webkit-transform: translateX(0);\n  -moz-transform: translateX(0);\n  -ms-transform: translateX(0);\n  -o-transform: translateX(0);\n  transform: translateX(0);\n  -webkit-transition: all 0.6s 0.6s cubic-bezier(0.77, 0, 0.175, 1);\n  -moz-transition: all 0.6s 0.6s cubic-bezier(0.77, 0, 0.175, 1);\n  transition: all 0.6s 0.6s cubic-bezier(0.77, 0, 0.175, 1);\n}\n.js-menu--is-open .header-menu:after {\n  -webkit-transform: translateX(0);\n  -moz-transform: translateX(0);\n  -ms-transform: translateX(0);\n  -o-transform: translateX(0);\n  transform: translateX(0);\n  -webkit-transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1);\n  -moz-transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1);\n  transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1);\n}\n\n\/*---------------------------------   \n--Sections\n-----------------------------------  *\/\n.section--padding {\n  padding: 2em 0;\n}\n@media (min-width: 58em) {\n  .section--padding {\n    padding: 4em 0;\n  }\n}\n\n\/*---------------------------------   \n--overlay\n-----------------------------------  *\/\n.mast--overlay {\n  position: relative;\n}\n.mast--overlay:before {\n  content: &quot;&quot;;\n  display: block;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: rgba(0, 0, 0, 0.4);\n}\n.mast--overlay &gt; div {\n  position: relative;\n  z-index: 5;\n}\n\n.mast-page {\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: cover;\n}\n\n\/*---------------------------------   \n--Masthead\n-----------------------------------  *\/\n.mast-page {\n  background-image: url(https:\/\/unsplash.it\/g\/1900\/1100?image=436);\n}\n.mast-page__content {\n  text-align: center;\n}\n.mast-page__content h1 {\n  font-size: 2em;\n  font-weight: 700;\n  color: #fff;\n  font-family: &quot;Montserrat&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif;\n  text-shadow: 0px 8px 10px rgba(0, 0, 0, 0.05);\n}\n@media (min-width: 58em) {\n  .mast-page__content h1 {\n    font-size: 5vw;\n  }\n}\n.mast-page__content p {\n  color: #fff;\n}\n@media (min-width: 58em) {\n  .mast-page__content p {\n    font-size: 2vw;\n  }\n}<\/pre><\/div>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;javascript&quot;,&quot;mime&quot;:&quot;text\/javascript&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;JavaScript&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;js&quot;}\">$(&quot;.js-menu-toggle&quot;).click(function (e) {\n  $(&quot;body&quot;).toggleClass(&quot;js-menu--is-open&quot;);\n  e.preventDefault();\n});\n\n\/*----------------------------------------------   \n--Web font loader\n-----------------------------------------------  *\/\nWebFontConfig = {\n  google: {\n    families: [\n      &quot;Montserrat:400,700:latin&quot;,\n      &quot;Source Serif Pro&quot;,\n      &quot;Roboto Condensed:300,400&quot;\n    ]\n  }\n};\n\n(function () {\n  var wf = document.createElement(&quot;script&quot;);\n  wf.src =\n    (&quot;https:&quot; == document.location.protocol ? &quot;https&quot; : &quot;http&quot;) +\n    &quot;:\/\/ajax.googleapis.com\/ajax\/libs\/webfont\/1\/webfont.js&quot;;\n  wf.type = &quot;text\/javascript&quot;;\n  wf.async = &quot;true&quot;;\n  var t = document.getElementsByTagName(&quot;script&quot;)[0];\n  t.parentNode.insertBefore(wf, t);\n})();<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":554,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[17,43],"class_list":["post-552","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-headermenu","tag-jquery","tag-menu"],"_links":{"self":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/552","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/comments?post=552"}],"version-history":[{"count":0,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/552\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/554"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=552"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=552"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=552"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}