{"id":9525,"date":"2024-01-20T18:05:00","date_gmt":"2024-01-20T18:05:00","guid":{"rendered":"https:\/\/codehim.com\/?p=9525"},"modified":"2024-01-22T16:05:45","modified_gmt":"2024-01-22T11:05:45","slug":"off-canvas-menu-using-javascript","status":"publish","type":"post","link":"https:\/\/codehim.com\/menu\/off-canvas-menu-using-javascript\/","title":{"rendered":"Off Canvas Menu using JavaScript"},"content":{"rendered":"<p>This JavaScript code provides an off-canvas menu functionality for your website. When a user clicks the navigation icon, the menu slides in from the right side. This feature is helpful for creating a clean and organized mobile-friendly navigation experience.<\/p>\n<p>It offers a compact and user-friendly navigation solution. You can integrate this code on your website to implement <a href=\"https:\/\/codehim.com\/menu\/css3-animated-off-canvas-menu-with-jquery\/\" target=\"_blank\" rel=\"noopener\">an off-canvas menu<\/a>, which is perfect for mobile and responsive designs.<\/p>\n<h2>How to Create Off Canvas Menu Using JavaScript<\/h2>\n<p>1. First of all, load the <a href=\"https:\/\/necolas.github.io\/normalize.css\/\" target=\"_blank\" rel=\"noopener\">Normalize CSS<\/a> and Google Fonts by adding the following CDN links into the head tag of your HTML document.<\/p>\n<pre class=\"prettyprint linenums lang-html\">&lt;link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/normalize\/5.0.0\/normalize.min.css\"&gt;\r\n&lt;link rel='stylesheet' href='https:\/\/fonts.googleapis.com\/css?family=Raleway|Spectral'&gt;<\/pre>\n<p>2. After that, create the HTML structure for the off-canvas menu. Include a navigation icon and the menu content. For instance, create a div with a unique class for the navigation icon and a nav element for the menu content.<\/p>\n<pre class=\"prettyprint linenums lang-html\">&lt;div class=\"navicon\" id=\"navicon\"&gt;&lt;span&gt;&lt;\/span&gt;&lt;\/div&gt;\r\n\r\n&lt;nav class=\"main-nav\" id=\"main-nav\" role=\"navigation\"&gt;\r\n\t&lt;ul class=\"main-nav__list\"&gt;\r\n\t\t&lt;li&gt;&lt;a class=\"main-nav__link\" href=\"#!0\"&gt;&amp;Uacute;vod&lt;\/a&gt;&lt;\/li&gt;\r\n\t\t&lt;li&gt;&lt;a class=\"main-nav__link\" href=\"#!0\"&gt;Produkty&lt;\/a&gt;&lt;\/li&gt;\r\n\t\t&lt;li&gt;&lt;a class=\"main-nav__link\" href=\"#!0\"&gt;Inform&amp;aacute;cie&lt;\/a&gt;&lt;\/li&gt;\r\n\t\t&lt;li&gt;&lt;a class=\"main-nav__link\" href=\"#!0\"&gt;Kontakt&lt;\/a&gt;&lt;\/li&gt;\r\n\t\t&lt;!--&lt;li&gt;&lt;a class=\"main-nav__link\" href=\"#!0\"&gt;Cart &lt;span&gt;(5)&lt;\/span&gt;&lt;\/a&gt;&lt;\/li&gt; --&gt;\r\n\t&lt;\/ul&gt;\r\n\t&lt;div class=\"main-nav__info\"&gt;\r\n\t\t&lt;p&gt;Aktu\u00e1lne novinky o nov\u00fdch mot\u00edvoch svadobn\u00fdch oznamen\u00ed, pozv\u00e1nok a etikiet, n\u00e1jdete aj na t\u00fdchto soci\u00e1lnych sie\u0165ach:&lt;\/p&gt;\r\n\t&lt;\/div&gt;\r\n\t&lt;div class=\"main-nav__social\"&gt;\r\n\t\t&lt;a href=\"#!0\" target=\"_blank\"&gt;&lt;svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" x=\"0px\" y=\"0px\" width=\"64px\" height=\"64px\" viewBox=\"0 0 64 64\"&gt;&lt;path d=\"M64,12.2c-2.4,1-4.9,1.8-7.5,2.1c2.7-1.6,4.8-4.2,5.8-7.3c-2.5,1.5-5.3,2.6-8.3,3.2C51.5,7.6,48.1,6,44.3,6 c-7.3,0-13.1,5.9-13.1,13.1c0,1,0.1,2,0.3,3C20.6,21.6,10.9,16.3,4.5,8.4c-1.1,1.9-1.8,4.2-1.8,6.6c0,4.6,2.3,8.6,5.8,10.9 c-2.2-0.1-4.2-0.7-5.9-1.6c0,0.1,0,0.1,0,0.2c0,6.4,4.5,11.7,10.5,12.9c-1.1,0.3-2.3,0.5-3.5,0.5c-0.8,0-1.7-0.1-2.5-0.2 c1.7,5.2,6.5,9,12.3,9.1c-4.5,3.5-10.2,5.6-16.3,5.6c-1.1,0-2.1-0.1-3.1-0.2C5.8,55.8,12.7,58,20.1,58c24.2,0,37.4-20,37.4-37.4 c0-0.6,0-1.1,0-1.7C60,17.1,62.2,14.8,64,12.2z\"&gt;&lt;\/path&gt;&lt;\/svg&gt;&lt;\/a&gt;\r\n\t\t&lt;a href=\"#!0\" target=\"_blank\"&gt;&lt;svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" x=\"0px\" y=\"0px\" width=\"64px\" height=\"64px\" viewBox=\"0 0 64 64\"&gt;&lt;path d=\"M32,5.766c8.544,0,9.556,0.033,12.931,0.187c3.642,0.166,7.021,0.895,9.621,3.496 c2.6,2.6,3.329,5.979,3.496,9.621c0.154,3.374,0.187,4.386,0.187,12.931s-0.033,9.556-0.187,12.931 c-0.166,3.642-0.895,7.021-3.496,9.621c-2.6,2.6-5.98,3.329-9.621,3.496c-3.374,0.154-4.386,0.187-12.931,0.187 s-9.557-0.033-12.931-0.187c-3.642-0.166-7.021-0.895-9.621-3.496c-2.6-2.6-3.329-5.979-3.496-9.621 C5.798,41.556,5.766,40.544,5.766,32s0.033-9.556,0.187-12.931c0.166-3.642,0.895-7.021,3.496-9.621 c2.6-2.6,5.979-3.329,9.621-3.496C22.444,5.798,23.456,5.766,32,5.766 M32,0c-8.691,0-9.78,0.037-13.194,0.193 c-5.2,0.237-9.768,1.511-13.436,5.178C1.705,9.037,0.43,13.604,0.193,18.806C0.037,22.22,0,23.309,0,32 c0,8.691,0.037,9.78,0.193,13.194c0.237,5.2,1.511,9.768,5.178,13.436c3.666,3.666,8.234,4.941,13.436,5.178 C22.22,63.963,23.309,64,32,64s9.78-0.037,13.194-0.193c5.199-0.237,9.768-1.511,13.436-5.178c3.666-3.666,4.941-8.234,5.178-13.436 C63.963,41.78,64,40.691,64,32s-0.037-9.78-0.193-13.194c-0.237-5.2-1.511-9.768-5.178-13.436 c-3.666-3.666-8.234-4.941-13.436-5.178C41.78,0.037,40.691,0,32,0L32,0z\"&gt;&lt;\/path&gt;&lt;path d=\"M32,15.568c-9.075,0-16.432,7.357-16.432,16.432c0,9.075,7.357,16.432,16.432,16.432 S48.432,41.075,48.432,32C48.432,22.925,41.075,15.568,32,15.568z M32,42.667c-5.891,0-10.667-4.776-10.667-10.667 c0-5.891,4.776-10.667,10.667-10.667c5.891,0,10.667,4.776,10.667,10.667C42.667,37.891,37.891,42.667,32,42.667z\"&gt;&lt;\/path&gt;&lt;circle cx=\"49.082\" cy=\"14.918\" r=\"3.84\"&gt;&lt;\/circle&gt;&lt;\/svg&gt;&lt;\/a&gt;\r\n\t&lt;\/div&gt;\r\n\t&lt;ul class=\"main-nav__legal\"&gt;\r\n\t\t&lt;li&gt;&lt;a class=\"main-nav__link\" href=\"#!0\"&gt;FAQ &amp;amp; Shipping&lt;\/a&gt;&lt;\/li&gt;\r\n\t\t&lt;li&gt;&lt;a class=\"main-nav__link\" href=\"#!0\"&gt;Obchodn\u00e9 podmienky&lt;\/li&gt;\r\n\t&lt;\/ul&gt;\r\n&lt;\/nav&gt;\r\n\r\n&lt;div class=\"overlay\"&gt;&lt;\/div&gt;<\/pre>\n<p>3. Now, utilize CSS to style the off-canvas menu. Apply styles to hide the menu off-screen initially and to manage its appearance and animations. Use classes like <code>.main-nav<\/code>, <code>.navicon<\/code>, and <code>.overlay<\/code> to structure and style your elements. These classes will handle animations, transitions, and positioning.<\/p>\n<pre class=\"prettyprint linenums lang-css\">.squares {\r\n  fill: none !important;\r\n}\r\n\r\n.is-hidden {\r\n  display: none !important;\r\n  visibility: hidden !important;\r\n}\r\n\r\n.visuallyhidden {\r\n  position: absolute !important;\r\n  clip: rect(0 0 0 0);\r\n  -webkit-clip-path: inset(50%);\r\n  clip-path: inset(50%);\r\n  margin: -1px !important;\r\n  padding: 0 !important;\r\n  width: 1px !important;\r\n  height: 1px !important;\r\n  border: 0 !important;\r\n  overflow: hidden;\r\n  white-space: nowrap;\r\n}\r\n.visuallyhidden.is-focusable:active, .visuallyhidden.is-focusable:focus {\r\n  position: static;\r\n  clip: auto;\r\n  -webkit-clip-path: none;\r\n  clip-path: none;\r\n  margin: 0;\r\n  width: auto;\r\n  height: auto;\r\n  overflow: visible;\r\n  white-space: inherit;\r\n}\r\n\r\n.is-invisible {\r\n  visibility: hidden;\r\n}\r\n\r\nbody{\r\n  font-family: -apple-system, BlinkMacSystemFont, \"avenir next\", avenir, \"Segoe UI\", \"lucida grande\", \"helvetica neue\", helvetica, \"Fira Sans\", roboto, noto, \"Droid Sans\", cantarell, oxygen, ubuntu, \"franklin gothic medium\", \"century gothic\", \"Liberation Sans\", sans-serif;\r\n  font-size: 1rem;\r\n  font-weight: 400;\r\n  line-height: 1.5;\r\n  text-rendering: optimizeLegibility;\r\n  -webkit-font-smoothing: antialiased;\r\n  -moz-osx-font-smoothing: grayscale;\r\n  font-smoothing: antialiased;\r\n  box-sizing: border-box;\r\nposition: relative;\r\n\r\n}\r\n\r\n*,\r\n*:after,\r\n*:before {\r\n  box-sizing: inherit;\r\n}\r\n\r\nhtml,\r\nbody {\r\n  margin: 0;\r\n  padding: 0;\r\n  width: 100%;\r\n}\r\n\r\nimg {\r\n  display: block;\r\n  width: 100%;\r\n  height: auto;\r\n  border: 0;\r\n}\r\n\r\nfigure {\r\n  margin: 0;\r\n}\r\n\r\n.navicon {\r\n  overflow: auto;\r\n  position: absolute;\r\n  top: 1rem;\r\n  right: 1rem;\r\n  width: 2.25rem;\r\n  height: 2.25rem;\r\n  border-radius: 0.25rem;\r\n  background-color: whitesmoke;\r\n  z-index: 10;\r\n  transition: all 680ms;\r\n}\r\n.navicon:hover {\r\n  cursor: pointer;\r\n  background-color: rgba(0, 0, 0, 0.05);\r\n}\r\n.navicon span {\r\n  position: relative;\r\n  margin-top: 6.75px;\r\n  margin-bottom: 6.75px;\r\n  -webkit-user-select: none;\r\n  -moz-user-select: none;\r\n  -ms-user-select: none;\r\n  user-select: none;\r\n  position: absolute;\r\n  top: 50%;\r\n  left: 50%;\r\n  margin-top: -1.125px;\r\n  transform: translateX(-50%);\r\n}\r\n.navicon span, .navicon span::before, .navicon span::after {\r\n  display: block;\r\n  width: 1.5rem;\r\n  height: 2.25px;\r\n  background-color: #767676;\r\n  outline: 1px solid transparent;\r\n  transition-property: background-color, transform;\r\n  transition-duration: 0.34s;\r\n}\r\n.navicon span::before, .navicon span::after {\r\n  position: absolute;\r\n  content: \"\";\r\n}\r\n.navicon span::before {\r\n  top: -6.75px;\r\n}\r\n.navicon span::after {\r\n  top: 6.75px;\r\n}\r\n\r\n.js_is-active {\r\n  background-color: crimson;\r\n}\r\n.js_is-active:hover {\r\n  background-color: crimson;\r\n}\r\n.js_is-active span {\r\n  background-color: transparent;\r\n}\r\n.js_is-active span::before {\r\n  transform: translateY(6.75px) rotate(45deg);\r\n}\r\n.js_is-active span::after {\r\n  transform: translateY(-6.75px) rotate(-45deg);\r\n}\r\n.js_is-active span::before, .js_is-active span::after {\r\n  background-color: #fff;\r\n}\r\n\r\n.main-nav {\r\n  z-index: 9;\r\n  position: fixed;\r\n  top: 0;\r\n  right: 0;\r\n  width: 100%;\r\n  max-width: 515px;\r\n  height: 100%;\r\n  padding: 4rem 4rem 1rem 4rem;\r\n  overflow-y: auto;\r\n  background-color: #2a2a2a;\r\n  transform: translateX(100%);\r\n  transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86);\r\n}\r\n.main-nav__list li {\r\n  opacity: 0;\r\n  transform: translateX(4rem);\r\n  transition: all 0.3s ease;\r\n}\r\n.main-nav__link {\r\n  display: block;\r\n  padding: 1rem 0;\r\n  color: #fff;\r\n  font-family: \"Raleway\", sans-serif;\r\n  font-size: 1.5rem;\r\n  font-weight: 600;\r\n  letter-spacing: 0.25rem;\r\n  text-decoration: none;\r\n  text-transform: uppercase;\r\n  transition: all 0.3s ease;\r\n}\r\n.main-nav__link:hover {\r\n  color: #b7ac7f;\r\n}\r\n.main-nav__link span {\r\n  color: #b7ac7f;\r\n}\r\n.main-nav__info {\r\n  opacity: 0;\r\n  margin: 1rem 0 2rem;\r\n  color: #fff;\r\n  font-family: \"Spectral\", serif;\r\n  font-size: 1.05rem;\r\n  letter-spacing: 0.0625rem;\r\n  transform: translateY(30px);\r\n  transition: all 0.4s ease;\r\n}\r\n.main-nav__social {\r\n  opacity: 0;\r\n  overflow: hidden;\r\n  position: relative;\r\n  margin-top: 2rem;\r\n  padding-bottom: 2rem;\r\n  transform: translateY(2rem);\r\n  transition: all 0.4s ease;\r\n}\r\n.main-nav__social::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  bottom: 0;\r\n  left: -100%;\r\n  width: 100%;\r\n  height: 0.125rem;\r\n  background-color: #b7ac7f;\r\n}\r\n.main-nav__social a {\r\n  display: inline-block;\r\n  width: 2rem;\r\n  height: 2rem;\r\n}\r\n.main-nav__social a:not(:first-of-type) {\r\n  margin-left: 2rem;\r\n}\r\n.main-nav__social a:hover path,\r\n.main-nav__social a:hover circle {\r\n  fill: #b7ac7f;\r\n}\r\n.main-nav__social svg {\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n.main-nav__social svg path,\r\n.main-nav__social svg circle {\r\n  fill: #fff;\r\n  transition: all 0.3s ease;\r\n}\r\n.main-nav__legal {\r\n  opacity: 0;\r\n  margin-top: 2rem;\r\n  transform: translateY(2rem);\r\n  transition: all 0.4s ease;\r\n}\r\n.main-nav__legal li a {\r\n  font-size: 0.9rem;\r\n  transition: all 0.3s ease;\r\n}\r\n.main-nav__legal li a:hover {\r\n  color: #b7ac7f;\r\n}\r\n\r\n.overlay {\r\n  z-index: 1;\r\n  opacity: 0;\r\n  visibility: hidden;\r\n  position: fixed;\r\n  top: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  background-color: rgba(42, 42, 42, 0.75);\r\n  transition: all 0.3s ease-in-out;\r\n}\r\n\r\n.js_show-menu {\r\n  transform: translateX(0);\r\n}\r\n.js_show-menu .main-nav__list li {\r\n  transform: translateX(0);\r\n  opacity: 1;\r\n}\r\n.js_show-menu .main-nav__list li:nth-child(1) {\r\n  transition-delay: 0.15s;\r\n}\r\n.js_show-menu .main-nav__list li:nth-child(2) {\r\n  transition-delay: 0.3s;\r\n}\r\n.js_show-menu .main-nav__list li:nth-child(3) {\r\n  transition-delay: 0.45s;\r\n}\r\n.js_show-menu .main-nav__list li:nth-child(4) {\r\n  transition-delay: 0.6s;\r\n}\r\n.js_show-menu .main-nav__list li:nth-child(5) {\r\n  transition-delay: 0.75s;\r\n}\r\n.js_show-menu .main-nav__list li:nth-child(6) {\r\n  transition-delay: 0.9s;\r\n}\r\n.js_show-menu .main-nav__list li:nth-child(7) {\r\n  transition-delay: 1.05s;\r\n}\r\n.js_show-menu .main-nav__list li:nth-child(8) {\r\n  transition-delay: 1.2s;\r\n}\r\n.js_show-menu .main-nav__list li:nth-child(9) {\r\n  transition-delay: 1.35s;\r\n}\r\n.js_show-menu .main-nav__list li:nth-child(10) {\r\n  transition-delay: 1.5s;\r\n}\r\n.js_show-menu .main-nav__list li:nth-child(11) {\r\n  transition-delay: 1.65s;\r\n}\r\n.js_show-menu .main-nav__list li:nth-child(12) {\r\n  transition-delay: 1.8s;\r\n}\r\n.js_show-menu .main-nav__list li:nth-child(13) {\r\n  transition-delay: 1.95s;\r\n}\r\n.js_show-menu .main-nav__list li:nth-child(14) {\r\n  transition-delay: 2.1s;\r\n}\r\n.js_show-menu .main-nav__list li:nth-child(15) {\r\n  transition-delay: 2.25s;\r\n}\r\n.js_show-menu .main-nav__list li:nth-child(16) {\r\n  transition-delay: 2.4s;\r\n}\r\n.js_show-menu .main-nav__list li:nth-child(17) {\r\n  transition-delay: 2.55s;\r\n}\r\n.js_show-menu .main-nav__list li:nth-child(18) {\r\n  transition-delay: 2.7s;\r\n}\r\n.js_show-menu .main-nav__list li:nth-child(19) {\r\n  transition-delay: 2.85s;\r\n}\r\n.js_show-menu .main-nav__list li:nth-child(20) {\r\n  transition-delay: 3s;\r\n}\r\n.js_show-menu .main-nav__info,\r\n.js_show-menu .main-nav__social,\r\n.js_show-menu .main-nav__legal {\r\n  opacity: 1;\r\n  transform: translateY(0);\r\n  transition-delay: 0.85s;\r\n}\r\n.js_show-menu .main-nav__social::after {\r\n  transform: translateX(100%);\r\n  transition-property: transform;\r\n  transition-duration: 340ms;\r\n  transition-timing-function: ease-in;\r\n  transition-delay: 0.95s;\r\n}\r\n\r\n.js_show-overlay {\r\n  opacity: 0.8;\r\n  visibility: visible;\r\n}\r\n\r\nul {\r\n  margin: 0;\r\n  padding: 0;\r\n  list-style-type: none;\r\n}\r\n\r\np {\r\n  margin: 0;\r\n}<\/pre>\n<p>4. Finally, implement JavaScript functionalities for toggling the menu. The following code includes functions for adding, removing, and toggling classes. When the navigation icon is clicked, these functions are used to display or hide the menu by adding or removing specific classes.<\/p>\n<pre class=\"prettyprint linenums lang-js\">\/\/ jQuery-style functions in pure JS\r\n\/\/ hasClass, addClass, removeClass, toggleClass\r\n\/\/ @author: Todd Motto\r\n\/\/ @link: http:\/\/bit.ly\/pure-js-jquery-style-functions\r\n\/\/ @link: https:\/\/toddmotto.com\/labs\/reusable-js\/\r\n\r\n\/\/ hasClass\r\nfunction hasClass(elem, className) {\r\n  return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' ');\r\n}\r\n\r\n\/\/ addClass\r\nfunction addClass(elem, className) {\r\n  if (!hasClass(elem, className)) {\r\n    elem.className += ' ' + className;\r\n  }\r\n}\r\n\r\n\/\/ removeClass\r\nfunction removeClass(elem, className) {\r\n  var newClass = ' ' + elem.className.replace( \/[\\t\\r\\n]\/g, ' ') + ' ';\r\n  if (hasClass(elem, className)) {\r\n    while (newClass.indexOf(' ' + className + ' ') &gt;= 0 ) {\r\n      newClass = newClass.replace(' ' + className + ' ', ' ');\r\n    }\r\n  elem.className = newClass.replace(\/^\\s+|\\s+$\/g, '');\r\n  }\r\n}\r\n\r\n\/\/ toggleClass\r\nfunction toggleClass(elem, className) {\r\n  var newClass = ' ' + elem.className.replace( \/[\\t\\r\\n]\/g, \" \" ) + ' ';\r\n  if (hasClass(elem, className)) {\r\n    while (newClass.indexOf(\" \" + className + \" \") &gt;= 0 ) {\r\n      newClass = newClass.replace( \" \" + className + \" \" , \" \" );\r\n    }\r\n    elem.className = newClass.replace(\/^\\s+|\\s+$\/g, '');\r\n  } else {\r\n    elem.className += ' ' + className;\r\n  }\r\n}\r\n\r\n\/\/document.getElementById('navicon').onclick = function() {\r\n    \/\/toggleClass(this, 'js_is-active');\r\n\/\/}\r\n\r\nvar menu = document.querySelector('.main-nav'),\r\n    navicon = document.querySelector('.navicon'),\r\n\toverlay = document.querySelector('.overlay');\r\n\r\nnavicon.onclick = function() {\r\n\ttoggleClass(this, 'js_is-active');\r\n    toggleClass(menu, 'js_show-menu');\r\n\ttoggleClass(overlay, 'js_show-overlay');\r\n};\r\n\r\noverlay.onclick = function() {\r\n\tremoveClass(navicon, 'js_is-active');\r\n\tremoveClass(menu, 'js_show-menu');\r\n\tremoveClass(this, 'js_show-overlay');\r\n}<\/pre>\n<p>That&#8217;s all! hopefully, you have successfully created the Off-Canvas Menu Using JavaScript. If you have any questions or suggestions, feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This JavaScript code provides an off-canvas menu functionality for your website. When a user clicks the navigation icon, the menu&#8230;<\/p>\n","protected":false},"author":1,"featured_media":9546,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[38],"tags":[35],"class_list":["post-9525","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-menu","tag-off-canvas-menu"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Off Canvas Menu using JavaScript &#8212; CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a free code snippet to create a Off Canvas Menu using JavaScript. You can view demo and download the source code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codehim.com\/menu\/off-canvas-menu-using-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Off Canvas Menu using JavaScript &#8212; CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a free code snippet to create a Off Canvas Menu using JavaScript. You can view demo and download the source code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/menu\/off-canvas-menu-using-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeHim\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codehimofficial\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-20T18:05:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-22T11:05:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Off-Canvas-Menu-using-JavaScript.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"960\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Asif Mughal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:site\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Asif Mughal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/menu\/off-canvas-menu-using-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/menu\/off-canvas-menu-using-javascript\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"Off Canvas Menu using JavaScript\",\"datePublished\":\"2024-01-20T18:05:00+00:00\",\"dateModified\":\"2024-01-22T11:05:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/menu\/off-canvas-menu-using-javascript\/\"},\"wordCount\":251,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/menu\/off-canvas-menu-using-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Off-Canvas-Menu-using-JavaScript.png\",\"keywords\":[\"Off-Canvas Menu\"],\"articleSection\":[\"Menu &amp; Nav\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/menu\/off-canvas-menu-using-javascript\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/menu\/off-canvas-menu-using-javascript\/\",\"url\":\"https:\/\/codehim.com\/menu\/off-canvas-menu-using-javascript\/\",\"name\":\"Off Canvas Menu using JavaScript &#8212; CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/menu\/off-canvas-menu-using-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/menu\/off-canvas-menu-using-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Off-Canvas-Menu-using-JavaScript.png\",\"datePublished\":\"2024-01-20T18:05:00+00:00\",\"dateModified\":\"2024-01-22T11:05:45+00:00\",\"description\":\"Here is a free code snippet to create a Off Canvas Menu using JavaScript. You can view demo and download the source code.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/menu\/off-canvas-menu-using-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/menu\/off-canvas-menu-using-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/menu\/off-canvas-menu-using-javascript\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Off-Canvas-Menu-using-JavaScript.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Off-Canvas-Menu-using-JavaScript.png\",\"width\":1280,\"height\":960,\"caption\":\"Off Canvas Menu using JavaScript\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/menu\/off-canvas-menu-using-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Menu &amp; Nav\",\"item\":\"https:\/\/codehim.com\/category\/menu\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Off Canvas Menu using JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codehim.com\/#website\",\"url\":\"https:\/\/codehim.com\/\",\"name\":\"CodeHim\",\"description\":\"Web Design Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"alternateName\":\"Web Design Codes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codehim.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codehim.com\/#organization\",\"name\":\"CodeHim - Web Design Code & Scripts\",\"url\":\"https:\/\/codehim.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"contentUrl\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"width\":280,\"height\":280,\"caption\":\"CodeHim - Web Design Code & Scripts\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/codehimofficial\",\"https:\/\/x.com\/CodeHimOfficial\",\"https:\/\/www.instagram.com\/codehim\/\",\"https:\/\/www.linkedin.com\/company\/codehim\",\"https:\/\/co.pinterest.com\/codehim\/\",\"https:\/\/www.youtube.com\/@codehim\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\",\"name\":\"Asif Mughal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"caption\":\"Asif Mughal\"},\"description\":\"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.\",\"sameAs\":[\"https:\/\/codehim.com\"],\"url\":\"https:\/\/codehim.com\/author\/asif-mughal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Off Canvas Menu using JavaScript &#8212; CodeHim","description":"Here is a free code snippet to create a Off Canvas Menu using JavaScript. You can view demo and download the source code.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codehim.com\/menu\/off-canvas-menu-using-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Off Canvas Menu using JavaScript &#8212; CodeHim","og_description":"Here is a free code snippet to create a Off Canvas Menu using JavaScript. You can view demo and download the source code.","og_url":"https:\/\/codehim.com\/menu\/off-canvas-menu-using-javascript\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-01-20T18:05:00+00:00","article_modified_time":"2024-01-22T11:05:45+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Off-Canvas-Menu-using-JavaScript.png","type":"image\/png"}],"author":"Asif Mughal","twitter_card":"summary_large_image","twitter_creator":"@CodeHimOfficial","twitter_site":"@CodeHimOfficial","twitter_misc":{"Written by":"Asif Mughal","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/menu\/off-canvas-menu-using-javascript\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/menu\/off-canvas-menu-using-javascript\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"Off Canvas Menu using JavaScript","datePublished":"2024-01-20T18:05:00+00:00","dateModified":"2024-01-22T11:05:45+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/menu\/off-canvas-menu-using-javascript\/"},"wordCount":251,"commentCount":1,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/menu\/off-canvas-menu-using-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Off-Canvas-Menu-using-JavaScript.png","keywords":["Off-Canvas Menu"],"articleSection":["Menu &amp; Nav"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/menu\/off-canvas-menu-using-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/menu\/off-canvas-menu-using-javascript\/","url":"https:\/\/codehim.com\/menu\/off-canvas-menu-using-javascript\/","name":"Off Canvas Menu using JavaScript &#8212; CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/menu\/off-canvas-menu-using-javascript\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/menu\/off-canvas-menu-using-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Off-Canvas-Menu-using-JavaScript.png","datePublished":"2024-01-20T18:05:00+00:00","dateModified":"2024-01-22T11:05:45+00:00","description":"Here is a free code snippet to create a Off Canvas Menu using JavaScript. You can view demo and download the source code.","breadcrumb":{"@id":"https:\/\/codehim.com\/menu\/off-canvas-menu-using-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/menu\/off-canvas-menu-using-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/menu\/off-canvas-menu-using-javascript\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Off-Canvas-Menu-using-JavaScript.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Off-Canvas-Menu-using-JavaScript.png","width":1280,"height":960,"caption":"Off Canvas Menu using JavaScript"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/menu\/off-canvas-menu-using-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"Menu &amp; Nav","item":"https:\/\/codehim.com\/category\/menu\/"},{"@type":"ListItem","position":3,"name":"Off Canvas Menu using JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/codehim.com\/#website","url":"https:\/\/codehim.com\/","name":"CodeHim","description":"Web Design Code Snippets","publisher":{"@id":"https:\/\/codehim.com\/#organization"},"alternateName":"Web Design Codes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codehim.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codehim.com\/#organization","name":"CodeHim - Web Design Code & Scripts","url":"https:\/\/codehim.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/","url":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","contentUrl":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","width":280,"height":280,"caption":"CodeHim - Web Design Code & Scripts"},"image":{"@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codehimofficial","https:\/\/x.com\/CodeHimOfficial","https:\/\/www.instagram.com\/codehim\/","https:\/\/www.linkedin.com\/company\/codehim","https:\/\/co.pinterest.com\/codehim\/","https:\/\/www.youtube.com\/@codehim"]},{"@type":"Person","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed","name":"Asif Mughal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","caption":"Asif Mughal"},"description":"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.","sameAs":["https:\/\/codehim.com"],"url":"https:\/\/codehim.com\/author\/asif-mughal\/"}]}},"views":1780,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/9525","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/comments?post=9525"}],"version-history":[{"count":0,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/9525\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/9546"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=9525"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=9525"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=9525"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}