{"id":1602,"date":"2023-06-20T12:48:42","date_gmt":"2023-06-20T09:48:42","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=1602"},"modified":"2023-06-20T12:48:45","modified_gmt":"2023-06-20T09:48:45","slug":"tab-bar-menu-animation","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/headermenu\/1602\/","title":{"rendered":"Tab Bar Menu Animation"},"content":{"rendered":"<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\"><figure class=\"wp-block-media-text__media\"><img fetchpriority=\"high\" decoding=\"async\" width=\"920\" height=\"481\" src=\"https:\/\/notes.profidev.online\/wp-content\/uploads\/2023\/06\/peek-2023-06-20-11-45.gif\" alt=\"Tab Bar Menu Animation\" class=\"wp-image-1603 size-full\"\/><\/figure><div class=\"wp-block-media-text__content\">\n<p class=\"wp-block-paragraph\"><\/p>\n<\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\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;nav class=&quot;navigation-tab&quot;&gt;\n  &lt;div class=&quot;navigation-tab-item active&quot;&gt;\n    &lt;span class=&quot;navigation-tab__icon&quot;&gt;\n          &lt;svg\n            xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;\n            width=&quot;32&quot;\n            height=&quot;32&quot;\n            viewbox=&quot;0 0 24 24&quot;\n            fill=&quot;none&quot;\n            stroke=&quot;currentColor&quot;\n            stroke-width=&quot;2&quot;\n            stroke-linecap=&quot;round&quot;\n            stroke-linejoin=&quot;round&quot;\n            class=&quot;feather feather-list&quot;\n          &gt;\n            &lt;line x1=&quot;8&quot; y1=&quot;6&quot; x2=&quot;21&quot; y2=&quot;6&quot;&gt;&lt;\/line&gt;\n            &lt;line x1=&quot;8&quot; y1=&quot;12&quot; x2=&quot;21&quot; y2=&quot;12&quot;&gt;&lt;\/line&gt;\n            &lt;line x1=&quot;8&quot; y1=&quot;18&quot; x2=&quot;21&quot; y2=&quot;18&quot;&gt;&lt;\/line&gt;\n            &lt;line x1=&quot;3&quot; y1=&quot;6&quot; x2=&quot;3&quot; y2=&quot;6&quot;&gt;&lt;\/line&gt;\n            &lt;line x1=&quot;3&quot; y1=&quot;12&quot; x2=&quot;3&quot; y2=&quot;12&quot;&gt;&lt;\/line&gt;\n            &lt;line x1=&quot;3&quot; y1=&quot;18&quot; x2=&quot;3&quot; y2=&quot;18&quot;&gt;&lt;\/line&gt;\n          &lt;\/svg&gt;\n        &lt;\/span&gt;\n    &lt;span class=&quot;navigation-tab__txt&quot;&gt;List&lt;\/span&gt;\n  &lt;\/div&gt;\n  &lt;div class=&quot;navigation-tab-item&quot;&gt;\n    &lt;span class=&quot;navigation-tab__icon&quot;&gt;\n          &lt;svg\n            xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;\n            width=&quot;32&quot;\n            height=&quot;32&quot;\n            viewbox=&quot;0 0 24 24&quot;\n            fill=&quot;none&quot;\n            stroke=&quot;currentColor&quot;\n            stroke-width=&quot;2&quot;\n            stroke-linecap=&quot;round&quot;\n            stroke-linejoin=&quot;round&quot;\n            class=&quot;feather feather-tag&quot;\n          &gt;\n            &lt;path d=&quot;M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z&quot;&gt;&lt;\/path&gt;\n            &lt;line x1=&quot;7&quot; y1=&quot;7&quot; x2=&quot;7&quot; y2=&quot;7&quot;&gt;&lt;\/line&gt;\n          &lt;\/svg&gt;\n        &lt;\/span&gt;\n    &lt;span class=&quot;navigation-tab__txt&quot;&gt;\u0422\u044d\u0433\u0438&lt;\/span&gt;\n  &lt;\/div&gt;\n  &lt;div class=&quot;navigation-tab-item&quot;&gt;\n    &lt;span class=&quot;navigation-tab__icon&quot;&gt;\n          &lt;svg\n            xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;\n            width=&quot;32&quot;\n            height=&quot;32&quot;\n            viewbox=&quot;0 0 24 24&quot;\n            fill=&quot;none&quot;\n            stroke=&quot;currentColor&quot;\n            stroke-width=&quot;2&quot;\n            stroke-linecap=&quot;round&quot;\n            stroke-linejoin=&quot;round&quot;\n            class=&quot;feather feather-shopping-bag&quot;\n          &gt;\n            &lt;path d=&quot;M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z&quot;&gt;&lt;\/path&gt;\n            &lt;line x1=&quot;3&quot; y1=&quot;6&quot; x2=&quot;21&quot; y2=&quot;6&quot;&gt;&lt;\/line&gt;\n            &lt;path d=&quot;M16 10a4 4 0 0 1-8 0&quot;&gt;&lt;\/path&gt;\n          &lt;\/svg&gt;\n        &lt;\/span&gt;\n    &lt;span class=&quot;navigation-tab__txt&quot;&gt;Bag&lt;\/span&gt;\n  &lt;\/div&gt;\n  &lt;div class=&quot;navigation-tab-item&quot;&gt;\n    &lt;span class=&quot;navigation-tab__icon&quot;&gt;\n          &lt;svg\n            xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;\n            width=&quot;32&quot;\n            height=&quot;32&quot;\n            viewbox=&quot;0 0 24 24&quot;\n            fill=&quot;none&quot;\n            stroke=&quot;currentColor&quot;\n            stroke-width=&quot;2&quot;\n            stroke-linecap=&quot;round&quot;\n            stroke-linejoin=&quot;round&quot;\n            class=&quot;feather feather-bell&quot;\n          &gt;\n            &lt;path d=&quot;M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9&quot;&gt;&lt;\/path&gt;\n            &lt;path d=&quot;M13.73 21a2 2 0 0 1-3.46 0&quot;&gt;&lt;\/path&gt;\n          &lt;\/svg&gt;\n        &lt;\/span&gt;\n    &lt;span class=&quot;navigation-tab__txt&quot;&gt;Notifications&lt;\/span&gt;\n  &lt;\/div&gt;\n  &lt;div class=&quot;navigation-tab-overlay&quot;&gt;&lt;\/div&gt;\n&lt;\/nav&gt;\n  \n  &lt;script  src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.3.1\/jquery.min.js&quot;&gt;&lt;\/script&gt;<\/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;}\">* {\n  font-family: &quot;Roboto Condensed&quot;, sans-serif;\n}\n\nhtml,\nbody {\n  height: 100%;\n}\n\nbody {\n  margin: 0;\n  padding: 0;\n  background-color: #7dbfff;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.navigation-tab {\n  height: 150px;\n  width: 600px;\n  background-color: #fff;\n  box-shadow: 0 50px 30px 0 rgba(0, 0, 0, 0.175);\n  border-radius: 20px 20px 90px 90px;\n  overflow: hidden;\n  border: 15px solid #fff;\n  display: flex;\n  position: relative;\n  flex-shrink: 0;\n}\n.navigation-tab-item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: 130px;\n  flex-shrink: 0;\n  cursor: pointer;\n  transition: 0.3s;\n  position: relative;\n  z-index: 2;\n}\n.navigation-tab-item.active {\n  width: 210px;\n}\n.navigation-tab-item.active .navigation-tab__icon {\n  transform: translate(0px, -10px);\n}\n.navigation-tab-item.active .navigation-tab__txt {\n  opacity: 1;\n  transform: translate(0, 10px);\n}\n.navigation-tab-overlay {\n  border-radius: 20px;\n  background-color: #e4f2ff;\n  height: 100%;\n  width: 210px;\n  position: absolute;\n  left: 0;\n  top: 0;\n  transition: 0.3s;\n}\n.navigation-tab__icon {\n  display: block;\n  color: #4298e7;\n  transition-duration: 0.3s;\n  line-height: 1;\n  transform: translate(0, 11px);\n}\n.navigation-tab__txt {\n  display: block;\n  font-weight: 400;\n  font-size: 20px;\n  color: #4298e7;\n  opacity: 0;\n  transition-duration: 0.3s;\n  transform: translate(0, 20px);\n  user-select: none;\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;}\">$(function () {\n  $(&quot;.navigation-tab-item&quot;).click(function () {\n    $(&quot;.navigation-tab-item&quot;).removeClass(&quot;active&quot;);\n    $(this).addClass(&quot;active&quot;);\n    $(&quot;.navigation-tab-overlay&quot;).css({\n      left: $(this).prevAll().length * 130 + &quot;px&quot; });\n\n  });\n});<\/pre><\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":1603,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[17,71],"class_list":["post-1602","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-headermenu","tag-jquery","tag-tab-bar"],"_links":{"self":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1602","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=1602"}],"version-history":[{"count":1,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1602\/revisions"}],"predecessor-version":[{"id":1604,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1602\/revisions\/1604"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/1603"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=1602"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=1602"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=1602"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}