{"id":436,"date":"2023-03-08T15:44:09","date_gmt":"2023-03-08T12:44:09","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=436"},"modified":"2023-03-27T14:31:06","modified_gmt":"2023-03-27T11:31:06","slug":"sidebar","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/headermenu\/436\/","title":{"rendered":"Side bar"},"content":{"rendered":"<figure class=\"wp-block-video\"><video height=\"581\" style=\"aspect-ratio: 1216 \/ 581;\" width=\"1216\" controls src=\"https:\/\/notes.profidev.online\/wp-content\/uploads\/2023\/03\/vokoscreenng-2023-03-08_13-41-14.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;button id=&quot;menu-toggle&quot;&gt;&lt;\/button&gt;\n&lt;nav id=&quot;menu&quot; role=&quot;navigation&quot;&gt;\n  &lt;div class=&quot;brand&quot;&gt;&amp;Aopf;&lt;\/div&gt;            \n  &lt;ul&gt;\n    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Item 1&lt;\/a&gt;&lt;\/li&gt;\n    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Item 2&lt;\/a&gt;&lt;\/li&gt;\n    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Item 3&lt;\/a&gt;&lt;\/li&gt;\n  &lt;\/ul&gt;\n&lt;\/nav&gt;\n&lt;div class=&quot;page-wrap&quot;&gt;\n  &lt;div class=&quot;container&quot; role=&quot;main&quot;&gt;\n    &lt;article&gt;\n      &lt;h2&gt;Vanilla Javascript push menu&lt;\/h2&gt;\n      &lt;p&gt;Sometimes you just need a really simple push menu, without any Javascript Libraries. I made this in a rush for a client with the instructions to not use any jQuery.&lt;\/p&gt;\n      &lt;p&gt;I like the thought of adding a class to the body and climb the DOM instead of adding classes to the affected elements.&lt;\/p&gt;\n      &lt;p&gt;Less is more.&lt;\/p&gt;\n    &lt;\/article&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;\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;}\">html, body {\n  height: 100%;\n  overflow: hidden;\n}\nbody {\n  width: 100%;\n  margin: 0;\n\n  font-family: &quot;Roboto&quot;, sans-serif;\n\n  color: #fff;\n  background-color: #232629;\n}\n\np {\n  line-height: 1.7;\n}\nh2 {\n  margin-top: 30px;\n\n  font-size: 1.7em;\n  line-height: 1;\n\n  letter-spacing: 2px;\n  text-transform: uppercase;\n}\n\/* PUSH MENU *\/\n#menu {\n  position: absolute;\n  top: 0;\n  left: -300px;\n\n  width: 300px;\n  height: 100%;\n  padding: 50px 30px;\n  -webkit-box-sizing: border-box;\n  -moz-box-sizing: border-box;\n  box-sizing: border-box;\n\n  -webkit-transition: all .3s ease-in;\n  -moz-transition: all .3s ease-in;\n  -o-transition: all .3s ease-in;\n  transition: all .3s ease-in;\n  text-align: center;\n\n  background-color: #fff;\n  \/*transform: translateX(-300px);*\/\n}\n#menu .brand {\n  height: 51px;\n\n  font-size: 70px;\n  font-weight: 900;\n  line-height: .6;\n\n  color: #ddd;\n}\n#menu ul {\n  padding: 0;\n  margin-top: 30px;\n}\n\n#menu ul li a {\n  display: block;\n\n  font-weight: 900;\n  line-height: 50px;\n\n  -webkit-transition: all .3s ease;\n  -moz-transition: all .3s ease;\n  -o-transition: all .3s ease;\n  transition: all .3s ease;\n  text-decoration: none;\n  text-transform: uppercase;\n\n  color: #232629;\n  border-top: 1px solid #eee;\n}\n#menu ul li:last-child a {\n  border-bottom: 1px solid #eee;\n}\n#menu ul li a:hover {\n  letter-spacing: 1px;\n}\n\/* MAIN PAGE *\/\n.page-wrap {\n\n  padding: 50px;\n  -webkit-box-sizing: border-box;\n  -moz-box-sizing: border-box;\n  box-sizing: border-box;\n\n  -webkit-transition: all .3s ease-in;\n  -moz-transition: all .3s ease-in;\n  -o-transition: all .3s ease-in;\n  transition: all .3s ease-in;\n}\n\n\/* MENU TOGGLE ICON *\/\n\nbutton:focus {\n  outline: none;\n}\n#menu-toggle {\n  position: absolute;\n  top: 50px;\n  left: 50px;\n\n  width: 51px;\n  height: 51px;\n\n  cursor: pointer;\n\n  border: none;\n  -webkit-border-radius: 50px;\n  -moz-border-radius: 50px;\n  border-radius: 50px;\n  background: #fff;\n  transition: all 0.3s ease-in;\n}\n#menu-toggle:focus {\n  z-index: -10;\n  transform: translateX(300px);\n}\n#menu-toggle:focus ~ .page-wrap {\n  transform: translateX(300px);\n}\n#menu-toggle:focus ~ #menu {\n  transform: translateX(300px);\n  \/*left: 0;*\/\n}\n#menu-toggle:before,\n#menu-toggle:after {\n  position: absolute;\n\n  content: &quot;&quot;;\n  content: &quot;&quot;;\n  -webkit-transition: all .5s ease;\n  -moz-transition: all .5s ease;\n  -o-transition: all .5s ease;\n  transition: all .5s ease;\n\n  background-color: #232629;\n}\n\n#menu-toggle:before {\n  top: 12px;\n  left: 25px;\n\n  width: 1px;\n  height: 27px;\n}\n#menu-toggle:after {\n  top: 25px;\n  left: 12px;\n\n  width: 27px;\n  height: 1px;\n}\n\n#menu-toggle:focus:before,\n#menu-toggle:focus:after {\n  -webkit-transform: rotate(45deg);\n  -ms-transform: rotate(45deg);\n  transform: rotate(45deg);\n}\n\/* CONTENT CONTAINER *\/\n.container {\n  max-width: 600px;\n  min-width: 200px;\n  margin: 0 auto;\n}<\/pre><\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":438,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[16,34],"class_list":["post-436","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-headermenu","tag-htmlcss","tag-sidebar"],"_links":{"self":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/436","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=436"}],"version-history":[{"count":0,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/436\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/438"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=436"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=436"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=436"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}