{"id":530,"date":"2023-03-09T22:39:05","date_gmt":"2023-03-09T19:39:05","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=530"},"modified":"2023-03-28T23:35:52","modified_gmt":"2023-03-28T20:35:52","slug":"animirovannoe-menyu","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/headermenu\/530\/","title":{"rendered":"Animated menu"},"content":{"rendered":"<figure class=\"wp-block-video\"><video height=\"456\" style=\"aspect-ratio: 834 \/ 456;\" width=\"834\" controls src=\"https:\/\/notes.profidev.online\/wp-content\/uploads\/2023\/03\/vokoscreenng-2023-03-09_20-35-00.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;div class=&quot;drop&quot;&gt;\n  &lt;div class=&quot;option active placeholder&quot; data-value=&quot;placeholder&quot;&gt;\n    Choose wisely\n  &lt;\/div&gt;\n  &lt;div class=&quot;option&quot; data-value=&quot;wow&quot;&gt;\n    Wow!\n  &lt;\/div&gt;\n  &lt;div class=&quot;option&quot; data-value=&quot;drop&quot;&gt;\n    So dropdown!\n  &lt;\/div&gt;\n  &lt;div class=&quot;option&quot; data-value=&quot;select&quot;&gt;\n    Very select!\n  &lt;\/div&gt;\n  &lt;div class=&quot;option&quot; data-value=&quot;custom&quot;&gt;\n    Much custom!\n  &lt;\/div&gt;\n  &lt;div class=&quot;option&quot; data-value=&quot;animation&quot;&gt; \n    Such animation!\n  &lt;\/div&gt;\n&lt;\/div&gt;\n\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: Nikolay Talanov. @suez<\/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;}\">*, *:before, *:after {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\n@font-face {\n  font-family: pfs-bold;\n  src: url(&quot;https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/142996\/PFSquareSansPro-Bold.otf&quot;);\n}\nbody {\n  background: #35414a;\n}\n\n.drop {\n  width: 20em;\n  margin: 5em auto;\n  font-family: pfs-bold;\n  color: #86919a;\n  text-transform: uppercase;\n  position: relative;\n  transition: width 0.5s;\n  will-change: width;\n}\n.drop .option {\n  padding: 1em;\n  cursor: pointer;\n  background-color: #485761;\n}\n.drop .option:not(.active) {\n  display: none;\n  opacity: 0;\n  transform: translateY(-50%);\n}\n.drop.visible {\n  -webkit-animation: bounce 1s;\n          animation: bounce 1s;\n  width: 24em;\n}\n.drop.visible:before, .drop.visible:after {\n  border-color: #fff;\n}\n.drop.visible:before {\n  opacity: 0;\n}\n.drop.visible:after {\n  opacity: 1;\n}\n.drop.visible .option {\n  color: #fff;\n  display: block;\n}\n.drop.opacity .option {\n  transform: translateZ(0);\n  opacity: 1;\n}\n.drop.opacity .option:nth-child(0) {\n  transition: opacity 0.5s 0s, transform 0.5s 0s;\n}\n.drop.opacity .option:nth-child(1) {\n  transition: opacity 0.5s 0.1s, transform 0.5s 0.1s;\n}\n.drop.opacity .option:nth-child(2) {\n  transition: opacity 0.5s 0.2s, transform 0.5s 0.2s;\n}\n.drop.opacity .option:nth-child(3) {\n  transition: opacity 0.5s 0.3s, transform 0.5s 0.3s;\n}\n.drop.opacity .option:nth-child(4) {\n  transition: opacity 0.5s 0.4s, transform 0.5s 0.4s;\n}\n.drop.opacity .option:nth-child(5) {\n  transition: opacity 0.5s 0.5s, transform 0.5s 0.5s;\n}\n.drop.opacity .option:nth-child(6) {\n  transition: opacity 0.5s 0.6s, transform 0.5s 0.6s;\n}\n.drop.opacity .option:nth-child(7) {\n  transition: opacity 0.5s 0.7s, transform 0.5s 0.7s;\n}\n.drop.opacity .option:nth-child(8) {\n  transition: opacity 0.5s 0.8s, transform 0.5s 0.8s;\n}\n.drop.opacity .option:nth-child(9) {\n  transition: opacity 0.5s 0.9s, transform 0.5s 0.9s;\n}\n.drop.withBG .option {\n  transition: background-color 0.1s;\n}\n.drop.withBG .option:not(.placeholder):hover {\n  background-color: #5aafee;\n}\n.drop.withBG .option:not(.placeholder).active {\n  background-color: #5aafee;\n}\n.drop:after, .drop:before {\n  content: &quot;&quot;;\n  position: absolute;\n  top: 1.5em;\n  right: 1em;\n  width: 0.75em;\n  height: 0.75em;\n  border: 0.2em solid #86919a;\n  transform: rotate(45deg);\n  transform-origin: 50% 50%;\n  transition: opacity 0.2s;\n}\n.drop:before {\n  border-left: none;\n  border-top: none;\n  top: 1.2em;\n}\n.drop:after {\n  border-right: none;\n  border-bottom: none;\n  opacity: 0;\n}\n\n.mini-hack {\n  opacity: 0;\n  transform: translateY(-50%);\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;}\">$(document).ready(function() {\n    $(&quot;.drop .option&quot;).click(function() {\n      var val = $(this).attr(&quot;data-value&quot;),\n          $drop = $(&quot;.drop&quot;),\n          prevActive = $(&quot;.drop .option.active&quot;).attr(&quot;data-value&quot;),\n          options = $(&quot;.drop .option&quot;).length;\n      $drop.find(&quot;.option.active&quot;).addClass(&quot;mini-hack&quot;);\n      $drop.toggleClass(&quot;visible&quot;);\n      $drop.removeClass(&quot;withBG&quot;);\n      $(this).css(&quot;top&quot;);\n      $drop.toggleClass(&quot;opacity&quot;);\n      $(&quot;.mini-hack&quot;).removeClass(&quot;mini-hack&quot;);\n      if ($drop.hasClass(&quot;visible&quot;)) {\n        setTimeout(function() {\n          $drop.addClass(&quot;withBG&quot;);\n        }, 400 + options*100); \n      }\n      triggerAnimation();\n      if (val !== &quot;placeholder&quot; || prevActive === &quot;placeholder&quot;) {\n        $(&quot;.drop .option&quot;).removeClass(&quot;active&quot;);\n        $(this).addClass(&quot;active&quot;);\n      };\n    });\n    \n    function triggerAnimation() {\n      var finalWidth = $(&quot;.drop&quot;).hasClass(&quot;visible&quot;) ? 22 : 20;\n      $(&quot;.drop&quot;).css(&quot;width&quot;, &quot;24em&quot;);\n      setTimeout(function() {\n        $(&quot;.drop&quot;).css(&quot;width&quot;, finalWidth + &quot;em&quot;);\n      }, 400);\n    }\n  });<\/pre><\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":533,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[17,43],"class_list":["post-530","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\/530","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=530"}],"version-history":[{"count":0,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/530\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/533"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=530"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=530"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=530"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}