{"componentChunkName":"component---src-templates-post-js","path":"/pensieve/nav-menu","result":{"data":{"markdownRemark":{"html":"<p><a href=\"https://codepen.io/bhargavborse/pen/KKvrbLv\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Codepen Demo</a></p>\n<h2>HTML</h2>\n<div class=\"gatsby-highlight\" data-language=\"htmlpug\"><pre class=\"language-htmlpug\"><code class=\"language-htmlpug\">.sidebar\n\tul\n\t\tli\n\t\t\ta(href=&quot;#&quot;) Home\n\t\tli\n\t\t\ta(href=&quot;#&quot;) About\n\t\tli\n\t\t\ta(href=&quot;#&quot;) Services\n\t\tli\n\t\t\ta(href=&quot;#&quot;) Portfolio\n\t\tli\n\t\t\ta(href=&quot;#&quot;) Contact\n\tbutton.sidebar-btn\n\t\tspan</code></pre></div>\n<h2>CSS Variables</h2>\n<div class=\"gatsby-highlight\" data-language=\"cssscss\"><pre class=\"language-cssscss\"><code class=\"language-cssscss\">body{\n\tmargin: 0;\n\tpadding: 0;\n\tfont-family: Lato, sans-serif\n}\n\n.sidebar{\n\tposition: fixed;\n\ttop: 0;\n\tleft: -250px;\n\theight: 100%;\n\twidth: 250px;\n\tbackground: #262626;\n\ttransition: .5s;\n\t\n\t&amp;-btn{\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tright: -50px;\n\t\twidth: 50px;\n\t\theight: 50px;\n\t\toutline: none;\n\t\tborder: none;\n\t\tbackground: transparent;\n\t\tcursor: pointer;\n\t\tbox-sizing: border-box;\n\t\t\n\t\tspan{\n\t\t\twidth: 35px;\n\t\t\theight: 3px;\n\t\t\tbackground: #262626;\n\t\t\tposition: absolute;\n\t\t\ttop: 20px;\n\t\t\t\n\t\t\t&amp;:before, \n\t\t\t&amp;:after{\n\t\t\t\tcontent: &#39;&#39;;\n\t\t\t\twidth: 35px;\n\t\t\t\theight: 3px;\n\t\t\t\tbackground: #262626;\n\t\t\t\tposition: absolute;\n\t\t\t\tleft: 0;\n\t\t\t\ttransition: .5s;\n\t\t\t}\n\t\t\t\n\t\t\t&amp;:before{\n\t\t\t\ttop: -10px;\n\t\t\t}\n\t\t\t&amp;:after{\n\t\t\t\ttop: 10px;\n\t\t\t}\n\t\t}\n\t}\n}\n\nul{\n\tmargin: 0;\n\tpadding: 20px 0;\n\t\n\tli{\n\t\tlist-style: none;\n\t}\n}\n\na{\n\tcolor: #fff;\n\tfont-size: 1.3em;\n\ttext-decoration: none;\n\tdisplay: block;\n\tpadding: 10px 20px;\n\tborder-bottom: 1px solid rgba(0,0,0, .2);\n\ttransition: .5;\n\t\n\t&amp;:hover{\n\t\ttransition: .3s;\n\t\tcolor: lightblue;\n\t}\n}\n\n.active{\n\ttransition: .5s;\n\tleft: 0;\n}\n\n.toggle span{\n\tbackground: transparent;\n\t\n\t&amp;:before{\n\t\ttop: 0;\n\t\ttransform: rotate(45deg);\n\t\ttransition: .5s;\n\t}\n\t&amp;:after{\n\t\ttop: 0;\n\t\ttransform: rotate(-45deg);\n\t\ttransition: .5s;\n\t}\n}</code></pre></div>\n<h2>JavaScript</h2>\n<div class=\"gatsby-code-title\">app.js</div>\n<div class=\"gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\"><span class=\"token function\">$</span><span class=\"token punctuation\">(</span><span class=\"token string\">'.sidebar-btn'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">click</span><span class=\"token punctuation\">(</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n\t<span class=\"token function\">$</span><span class=\"token punctuation\">(</span><span class=\"token string\">'.sidebar'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">toggleClass</span><span class=\"token punctuation\">(</span><span class=\"token string\">'active'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\t<span class=\"token function\">$</span><span class=\"token punctuation\">(</span><span class=\"token string\">'.sidebar-btn'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">toggleClass</span><span class=\"token punctuation\">(</span><span class=\"token string\">'toggle'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre></div>","frontmatter":{"title":"Nav Menu Animation","description":"A simple animation for the nav menu bar","date":"2021-04-21T00:00:00.000Z","slug":"/pensieve/nav-menu","tags":["Theming","Nav Bar"]}}},"pageContext":{}},"staticQueryHashes":["1994492073","2681795072","3391063840","604461682"]}