{"id":2185,"date":"2016-07-29T09:23:59","date_gmt":"2016-07-29T09:23:59","guid":{"rendered":"http:\/\/www.jquery-az.com\/?p=2185"},"modified":"2023-11-11T09:29:04","modified_gmt":"2023-11-11T09:29:04","slug":"a-pure-css-off-canvas-menu-with-2-demos","status":"publish","type":"post","link":"https:\/\/www.jquery-az.com\/a-pure-css-off-canvas-menu-with-2-demos\/","title":{"rendered":"A Pure CSS off-canvas Menu with 2 Demos"},"content":{"rendered":"

The off-canvas menu using pure CSS<\/strong><\/h3>\n

The off-canvas menu is the one that slides and overlaps the main content with the navigation links.<\/p>\n

Generally, you may need to use JavaScript to create this type of menu. In this post, an off-canvas menu is shared with pure CSS.<\/p>\n

This menu type can particularly be useful for mobile websites where a user may navigate easily to the other sections of the\u00a0website.<\/p>\n

A demo of flying CSS menu <\/strong><\/h3>\n

The menu uses font-awesome<\/em> based icons, so the CSS file of that library is included in the <head> section. You may use some other or design your own icons.<\/p>\n

As you bring the mouse over the\u00a0black bar with icons, the menu will open with navigation links in flying manner. Have a look by clicking the image or link below:<\/p>\n

\"CSS<\/p>\n

See online demo and code<\/strong><\/h6>\n

The CSS:<\/strong><\/p>\n

@import url(http:\/\/fonts.googleapis.com\/css?family=Raleway:500);\r\n\r\nbody {\r\n\r\n\u00a0 width: 100%;\r\n\r\n\u00a0 margin: 0;\r\n\r\n\u00a0 padding: 0;\r\n\r\n\u00a0 overflow: hidden;\r\n\r\n\u00a0 background: #f2f2f3;\r\n\r\n\u00a0 font-family: 'Raleway', sans-serif;\r\n\r\n}\r\n\r\nbody h1 {\r\n\r\n\u00a0 text-align: center;\r\n\r\n\u00a0 margin-top: 35px;\r\n\r\n\u00a0 color: #333333;\r\n\r\n\u00a0 letter-spacing: 1px;\r\n\r\n\u00a0 text-shadow: 1px 1px #f2f2f3, -1px -1px #f2f2f3;\r\n\r\n}\r\n\r\n\u00a0\r\n\r\n.css-fly-menu {\r\n\r\n\u00a0 height: 100%;\r\n\r\n\u00a0 position: fixed;\r\n\r\n\u00a0 left: -2em;\r\n\r\n\u00a0 top: 0;\r\n\r\n\u00a0 z-index: 1000;\r\n\r\n\u00a0 -webkit-transform-style: preserve-3d;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 transform-style: preserve-3d;\r\n\r\n\u00a0 -webkit-perspective: 1000px;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 perspective: 1000px;\r\n\r\n}\r\n\r\n\u00a0\r\n\r\n.menu-icon-style {\r\n\r\n\u00a0 position: absolute;\r\n\r\n\u00a0 left: 0;\r\n\r\n\u00a0 top: 0;\r\n\r\n\u00a0 z-index: 990;\r\n\r\n\u00a0 height: 100%;\r\n\r\n\u00a0 background: #262626;\r\n\r\n}\r\n\r\n.menu-icon-style li {\r\n\r\n\u00a0 border-bottom: 1px solid rgba(0, 0, 0, 0.3);\r\n\r\n\u00a0 list-style-type: none;\r\n\r\n}\r\n\r\n.menu-icon-style a {\r\n\r\n\u00a0 display: block;\r\n\r\n\u00a0 width: 64px;\r\n\r\n\u00a0 height: 64px;\r\n\r\n\u00a0 line-height: 64px;\r\n\r\n\u00a0 text-align: center;\r\n\r\n\u00a0 font-size: 1.6em;\r\n\r\n\u00a0 color: #999999;\r\n\r\n\u00a0 text-shadow: 0 1px 0 black;\r\n\r\n\u00a0 -webkit-transition: all .5s ease-out;\r\n\r\n\u00a0 transition: all .5s ease-out;\r\n\r\n}\r\n\r\n.menu-icon-style a:hover {\r\n\r\n\u00a0 color: white;\r\n\r\n\u00a0 -webkit-transform: translateX(10px) scale(1.2);\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 transform: translateX(10px) scale(1.2);\r\n\r\n}\r\n\r\n\u00a0\r\n\r\n.css-fly-menu:hover .text {\r\n\r\n\u00a0 -webkit-transform: rotateY(0deg);\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 transform: rotateY(0deg);\r\n\r\n}\r\n\r\n\u00a0\r\n\r\n.text {\r\n\r\n\u00a0 position: absolute;\r\n\r\n\u00a0 left: 63px;\r\n\r\n\u00a0 top: 0;\r\n\r\n\u00a0 z-index: 980;\r\n\r\n\u00a0 height: 100%;\r\n\r\n\u00a0 background: #262626;\r\n\r\n\u00a0 border-right: 1px solid rgba(0, 0, 0, 0.3);\r\n\r\n\u00a0 -webkit-transition: -webkit-transform .24s linear;\r\n\r\n\u00a0 transition: -webkit-transform .24s linear;\r\n\r\n\u00a0 transition: transform .24s linear;\r\n\r\n\u00a0 transition: transform .24s linear, -webkit-transform .24s linear;\r\n\r\n\u00a0 -webkit-backface-visibility: hidden;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 backface-visibility: hidden;\r\n\r\n\u00a0 -webkit-transform-origin: left;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 transform-origin: left;\r\n\r\n\u00a0 -webkit-transform: perspective(1000px) rotateY(90deg);\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 transform: perspective(1000px) rotateY(90deg);\r\n\r\n}\r\n\r\n.text li {\r\n\r\n\u00a0 border-bottom: 1px solid rgba(0, 0, 0, 0.3);\r\n\r\n}\r\n\r\n.text a {\r\n\r\n\u00a0 display: block;\r\n\r\n\u00a0 width: 200px;\r\n\r\n\u00a0 height: 64px;\r\n\r\n\u00a0 line-height: 64px;\r\n\r\n\u00a0 text-indent: 1em;\r\n\r\n\u00a0 font-size: 1.4em;\r\n\r\n\u00a0 text-decoration: none;\r\n\r\n\u00a0 color: #999999;\r\n\r\n\u00a0 text-shadow: 0 1px 0 black;\r\n\r\n\u00a0 -webkit-transition: all .5s ease;\r\n\r\n\u00a0 transition: all .5s ease;\r\n\r\n}\r\n\r\n.text a:hover {\r\n\r\n\u00a0 color: white;\r\n\r\n\u00a0 -webkit-transform: translateX(-14px);\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 transform: translateX(-14px);\r\n\r\n}\r\n\r\n\u00a0\r\n\r\n.css-fly-menu:hover .info {\r\n\r\n\u00a0 left: 0;\r\n\r\n\u00a0 opacity: 1;\r\n\r\n\u00a0 -webkit-transition: opacity 0.5s ease-in 0.1s;\r\n\r\n\u00a0 transition: opacity 0.5s ease-in 0.1s;\r\n\r\n}\r\n\r\n\u00a0\r\n\r\n.info {\r\n\r\n\u00a0 position: absolute;\r\n\r\n\u00a0 padding-left: 2em;\r\n\r\n\u00a0 bottom: 30px;\r\n\r\n\u00a0 z-index: 999;\r\n\r\n\u00a0 width: 264px;\r\n\r\n\u00a0 color: white;\r\n\r\n\u00a0 text-align: center;\r\n\r\n\u00a0 line-height: 1.6;\r\n\r\n\u00a0 opacity: 0;\r\n\r\n}\r\n\r\n.info .logo p {\r\n\r\n\u00a0 width: 100px;\r\n\r\n\u00a0 height: 100px;\r\n\r\n\u00a0 margin: 0 auto;\r\n\r\n\u00a0 background: #262626;\r\n\r\n\u00a0 color: #424242;\r\n\r\n\u00a0 opacity: .6;\r\n\r\n\u00a0 overflow: hidden;\r\n\r\n\u00a0 text-align: center;\r\n\r\n\u00a0 -webkit-transition: all .5s ease;\r\n\r\n\u00a0 transition: all .5s ease;\r\n\r\n\u00a0 font-size: 2em;\r\n\r\n\u00a0 text-shadow: -1px -1px #4f4f4f, 1px 1px #121212;\r\n\r\n}\r\n\r\n.info .logo p:hover {\r\n\r\n\u00a0 opacity: 1;\r\n\r\n\u00a0 color: white;\r\n\r\n\u00a0 text-shadow: -1px -1px #575757, 1px 1px #121212;\r\n\r\n}\r\n\r\n.info .name {\r\n\r\n\u00a0 font-size: 2em;\r\n\r\n\u00a0 font-weight: bold;\r\n\r\n\u00a0 letter-spacing: 2px;\r\n\r\n\u00a0 color: #424242;\r\n\r\n\u00a0 text-shadow: -1px -1px #4f4f4f, 1px 1px #121212;\r\n\r\n}\r\n\r\n.info .quote {\r\n\r\n\u00a0 color: #444;\r\n\r\n\u00a0 text-shadow: 1px 1px #121212;\r\n\r\n}\r\n\r\n.info .social a {\r\n\r\n\u00a0 font-size: 2em;\r\n\r\n\u00a0 color: #333333;\r\n\r\n\u00a0 letter-spacing: .5em;\r\n\r\n\u00a0 text-shadow: 1px 1px #454545, -1px -1px #121212;\r\n\r\n\u00a0 -webkit-transition: all .5s ease;\r\n\r\n\u00a0 transition: all .5s ease;\r\n\r\n}\r\n\r\n.info .social a:hover {\r\n\r\n\u00a0 color: white;\r\n\r\n\u00a0 text-shadow: -1px -1px #575757, 1px 1px #121212;\r\n\r\n}\r\n\r\n\u00a0\r\n\r\n\u00a0\r\n\r\n@media screen and (max-height: 550px) {\r\n\r\n\u00a0 .info {\r\n\r\n\u00a0\u00a0\u00a0 display: none;\r\n\r\n\u00a0 }\r\n\r\n}\r\n\r\n@media screen and (max-width: 450px) {\r\n\r\n\u00a0 h1 {\r\n\r\n\u00a0\u00a0\u00a0 font-size: 7.5vw;\r\n\r\n\u00a0 }\r\n\r\n}<\/pre>\n
 <\/p>\n
The markup:<\/strong><\/p>\n
<h1>A demo of CSS fly-out off-canvas menu<\/h1>\r\n<div id=\"nav\" class=\"css-fly-menu\">\r\n<div class=\"menu-icon-style\">\r\n<ul>\r\n<li><a title=\"Home\" href=\"#\"><i class=\"fa fa-home \"><\/i><\/a><\/li>\r\n<li><a href=\"About\"><i class=\"fa fa-search \"><\/i><\/a><\/li>\r\n<li><a href=\"#\"><i class=\"fa fa-edit \"><\/i><\/a><\/li>\r\n<li><a href=\"#\"><i class=\"fa fa-cog\"><\/i><\/a><\/li>\r\n<li><a href=\"#\"><i class=\"fa fa-code\"><\/i><\/a><\/li>\r\n<li><a href=\"#\"><i class=\"fa fa-code\"><\/i><\/a><\/li> \r\n\r\n<\/ul>\r\n<\/div>\r\n<div class=\"text\">\r\n<ul>\r\n<li><a title=\"Home\" href=\"https:\/\/www.jquery-az.com\/\">Home<\/a><\/li>\r\n<li><a href=\"https:\/\/www.jquery-az.com\/?s=\" >Search<\/a>\r\n<\/li>\r\n<li><a href=\"https:\/\/www.jquery-az.com\/contact\/\" >Contact<\/a>\r\n<\/li>\r\n<li><a href=\"https:\/\/www.jquery-az.com\/css-tutorials\/\" >CSS<\/a>\r\n<li><a href=\"https:\/\/www.jquery-az.com\/html-tutorials\/\" >HTML<\/a>\r\n<li><a href=\"https:\/\/www.jquery-az.com\/jquery-tips\/\" >jQuery<\/a>\r\n<\/li>\r\n<\/ul>\r\n<\/div>\r\n<div class=\"info\">\r\n<div class=\"logo\"><p>LOGO<\/p><\/div>\r\n<div class=\"name\">Busniess name<\/div>\r\n<div class=\"quote\">The Slogan of business\/company<\/div>\r\n<div class=\"social\">\r\n<a target=\"_blank\" href=\"https:\/\/twitter.com\/tmrDevelops\"><i class=\"fa fa-twitter\"><\/i><\/a>\r\n<\/div>\r\n<\/div>\r\n<\/div><\/pre>\n
A demo of the menu with different style<\/strong><\/h3>\n
Using the same menu as in the above demo, in this example, I have played with a few CSS properties for different elements of the menu. For example, the background color is changed along with text color and shadow. The transition is changed to linear<\/em><\/strong> from the ease<\/em> <\/strong>value that occurs as you bring the mouse over any item. Have a look:<\/p>\n
\"CSS<\/p>\n
The CSS in this demo:<\/strong><\/p>\n
@import url(http:\/\/fonts.googleapis.com\/css?family=Raleway:500);\r\n\r\nbody {\r\n\r\n\u00a0 width: 100%;\r\n\r\n\u00a0 margin: 0;\r\n\r\n\u00a0 padding: 0;\r\n\r\n\u00a0 overflow: hidden;\r\n\r\n\u00a0 background: #f2f2f3;\r\n\r\n\u00a0 font-family: 'Raleway', sans-serif;\r\n\r\n}\r\n\r\nbody h1 {\r\n\r\n\u00a0 text-align: center;\r\n\r\n\u00a0 margin-top: 35px;\r\n\r\n\u00a0 color: #333333;\r\n\r\n\u00a0 letter-spacing: 1px;\r\n\r\n\u00a0 text-shadow: 1px 1px #f2f2f3, -1px -1px #f2f2f3;\r\n\r\n}\r\n\r\n\u00a0\r\n\r\n.css-fly-menu {\r\n\r\n\u00a0 height: 100%;\r\n\r\n\u00a0 position: fixed;\r\n\r\n\u00a0 left: -2em;\r\n\r\n\u00a0 top: 0;\r\n\r\n\u00a0 z-index: 1000;\r\n\r\n\u00a0 -webkit-transform-style: preserve-3d;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 transform-style: preserve-3d;\r\n\r\n\u00a0 -webkit-perspective: 1000px;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 perspective: 1000px;\r\n\r\n}\r\n\r\n\u00a0\r\n\r\n.menu-icon-style {\r\n\r\n\u00a0 position: absolute;\r\n\r\n\u00a0 left: 0;\r\n\r\n\u00a0 top: 0;\r\n\r\n\u00a0 z-index: 990;\r\n\r\n\u00a0 height: 100%;\r\n\r\n\u00a0 background: #408080;\r\n\r\n}\r\n\r\n.menu-icon-style li {\r\n\r\n\u00a0 border-bottom: 1px solid rgba(0, 0, 0, 0.3);\r\n\r\n\u00a0 list-style-type: none;\r\n\r\n}\r\n\r\n.menu-icon-style a {\r\n\r\n\u00a0 display: block;\r\n\r\n\u00a0 width: 64px;\r\n\r\n\u00a0 height: 64px;\r\n\r\n\u00a0 line-height: 64px;\r\n\r\n\u00a0 text-align: center;\r\n\r\n\u00a0 font-size: 1.6em;\r\n\r\n\u00a0 color: #CB9696;\r\n\r\n\u00a0 text-shadow: 0 1px 0 black;\r\n\r\n\u00a0 -webkit-transition: all .5s ease-out;\r\n\r\n\u00a0 transition: all .5s ease-out;\r\n\r\n}\r\n\r\n.menu-icon-style a:hover {\r\n\r\n\u00a0 color: white;\r\n\r\n\u00a0 -webkit-transform: translateX(10px) scale(1.2);\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 transform: translateX(10px) scale(1.2);\r\n\r\n}\r\n\r\n\u00a0\r\n\r\n.css-fly-menu:hover .text {\r\n\r\n\u00a0 -webkit-transform: rotateY(0deg);\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 transform: rotateY(0deg);\r\n\r\n}\r\n\r\n\u00a0\r\n\r\n.text {\r\n\r\n\u00a0 position: absolute;\r\n\r\n\u00a0 left: 63px;\r\n\r\n\u00a0 top: 0;\r\n\r\n\u00a0 z-index: 980;\r\n\r\n\u00a0 height: 100%;\r\n\r\n\u00a0 background: #A3D1D1;\r\n\r\n\u00a0 border-right: 1px solid rgba(0, 0, 0, 0.3);\r\n\r\n\u00a0 -webkit-transition: -webkit-transform .24s linear;\r\n\r\n\u00a0 transition: -webkit-transform .24s linear;\r\n\r\n\u00a0 transition: transform .24s linear;\r\n\r\n\u00a0 transition: transform .24s linear, -webkit-transform .24s linear;\r\n\r\n\u00a0 -webkit-backface-visibility: hidden;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 backface-visibility: hidden;\r\n\r\n\u00a0 -webkit-transform-origin: left;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 transform-origin: left;\r\n\r\n\u00a0 -webkit-transform: perspective(1000px) rotateY(90deg);\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 transform: perspective(1000px) rotateY(90deg);\r\n\r\n}\r\n\r\n.text li {\r\n\r\n\u00a0 border-bottom: 1px solid rgba(0, 0, 0, 0.3);\r\n\r\n}\r\n\r\n.text a {\r\n\r\n\u00a0 display: block;\r\n\r\n\u00a0 width: 200px;\r\n\r\n\u00a0 height: 64px;\r\n\r\n\u00a0 line-height: 64px;\r\n\r\n\u00a0 text-indent: 1em;\r\n\r\n\u00a0 font-size: 1.4em;\r\n\r\n\u00a0 text-decoration: none;\r\n\r\n\u00a0 color: #408080;\r\n\r\n\u00a0 text-shadow: 2px 1px 0 #800000;\r\n\r\n\u00a0 -webkit-transition: all .5s linear;\r\n\r\n\u00a0 transition: all .5s linear;\r\n\r\n}\r\n\r\n.text a:hover {\r\n\r\n\u00a0 color: white;\r\n\r\n\u00a0 -webkit-transform: translateY(8px);\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 transform: translateY(8px);\r\n\r\n}\r\n\r\n\u00a0\r\n\r\n.css-fly-menu:hover .info {\r\n\r\n\u00a0 left: 0;\r\n\r\n\u00a0 opacity: 1;\r\n\r\n\u00a0 -webkit-transition: opacity 0.5s ease-in-out 0.2s;\r\n\r\n\u00a0 transition: opacity 0.5s ease-in-out 0.2s;\r\n\r\n}\r\n\r\n\u00a0\r\n\r\n.info {\r\n\r\n\u00a0 position: absolute;\r\n\r\n\u00a0 padding-left: 2em;\r\n\r\n\u00a0 bottom: 30px;\r\n\r\n\u00a0 z-index: 999;\r\n\r\n\u00a0 width: 264px;\r\n\r\n\u00a0 color: white;\r\n\r\n\u00a0 text-align: center;\r\n\r\n\u00a0 line-height: 1.6;\r\n\r\n\u00a0 opacity: 0;\r\n\r\n}\r\n\r\n.info .logo p {\r\n\r\n\u00a0 width: 100px;\r\n\r\n\u00a0 height: 100px;\r\n\r\n\u00a0 margin: 0 auto;\r\n\r\n\u00a0 background: #408080;\r\n\r\n\u00a0 color: #400000;\r\n\r\n\u00a0 opacity: .6;\r\n\r\n\u00a0 overflow: hidden;\r\n\r\n\u00a0 text-align: center;\r\n\r\n\u00a0 -webkit-transition: all .5s ease;\r\n\r\n\u00a0 transition: all .5s ease;\r\n\r\n\u00a0 font-size: 2em;\r\n\r\n\u00a0 text-shadow: -1px -1px #4f4f4f, 1px 1px #121212;\r\n\r\n}\r\n\r\n.info .logo p:hover {\r\n\r\n\u00a0 opacity: 1;\r\n\r\n\u00a0 color: white;\r\n\r\n\u00a0 text-shadow: -1px -1px #575757, 1px 1px #121212;\r\n\r\n}\r\n\r\n.info .name {\r\n\r\n\u00a0 font-size: 2em;\r\n\r\n\u00a0 font-weight: bold;\r\n\r\n\u00a0 letter-spacing: 2px;\r\n\r\n\u00a0 color: #CB9696;\r\n\r\n\u00a0 text-shadow: -1px -1px #4f4f4f, 1px 1px #121212;\r\n\r\n}\r\n\r\n.info .quote {\r\n\r\n\u00a0 color: #CB9696;\r\n\r\n\u00a0 text-shadow: 1px 1px #121212;\r\n\r\n}\r\n\r\n.info .social a {\r\n\r\n\u00a0 font-size: 2em;\r\n\r\n\u00a0 color: #333333;\r\n\r\n\u00a0 letter-spacing: .5em;\r\n\r\n\u00a0 text-shadow: 1px 1px #454545, -1px -1px #121212;\r\n\r\n\u00a0 -webkit-transition: all .5s ease;\r\n\r\n\u00a0 transition: all .5s ease;\r\n\r\n}\r\n\r\n.info .social a:hover {\r\n\r\n\u00a0 color: white;\r\n\r\n\u00a0 text-shadow: -1px -1px #575757, 1px 1px #121212;\r\n\r\n}\r\n\r\n\u00a0\r\n\r\n\u00a0\r\n\r\n@media screen and (max-height: 550px) {\r\n\r\n\u00a0 .info {\r\n\r\n\u00a0\u00a0\u00a0 display: none;\r\n\r\n\u00a0 }\r\n\r\n}\r\n\r\n@media screen and (max-width: 450px) {\r\n\r\n\u00a0 h1 {\r\n\r\n\u00a0\u00a0\u00a0 font-size: 7.5vw;\r\n\r\n\u00a0 }\r\n\r\n}<\/pre>\n
 <\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
The off-canvas menu using pure CSS The off-canvas menu is the one that slides and overlaps the main content with the navigation links. Generally, you may need to use JavaScript to create this type of menu. In this post, an off-canvas menu is shared with pure CSS. This menu type can particularly be useful for … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":2187,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[12],"tags":[34],"yoast_head":"\nA Pure CSS off-canvas Menu with 2 Demos<\/title>\n<meta name=\"robots\" content=\"noindex, follow\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A Pure CSS off-canvas Menu with 2 Demos\" \/>\n<meta property=\"og:description\" content=\"The off-canvas menu using pure CSS The off-canvas menu is the one that slides and overlaps the main content with the navigation links. Generally, you may need to use JavaScript to create this type of menu. In this post, an off-canvas menu is shared with pure CSS. This menu type can particularly be useful for ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jquery-az.com\/a-pure-css-off-canvas-menu-with-2-demos\/\" \/>\n<meta property=\"article:published_time\" content=\"2016-07-29T09:23:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-11T09:29:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/07\/16.0_2-CSS-menu-off-canvas-.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"273\" \/>\n\t<meta property=\"og:image:height\" content=\"642\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"jqueryaz\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"jqueryaz\" \/>\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\":\"WebPage\",\"@id\":\"https:\/\/www.jquery-az.com\/a-pure-css-off-canvas-menu-with-2-demos\/\",\"url\":\"https:\/\/www.jquery-az.com\/a-pure-css-off-canvas-menu-with-2-demos\/\",\"name\":\"A Pure CSS off-canvas Menu with 2 Demos\",\"isPartOf\":{\"@id\":\"https:\/\/www.jquery-az.com\/#website\"},\"datePublished\":\"2016-07-29T09:23:59+00:00\",\"dateModified\":\"2023-11-11T09:29:04+00:00\",\"author\":{\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jquery-az.com\/a-pure-css-off-canvas-menu-with-2-demos\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jquery-az.com\/a-pure-css-off-canvas-menu-with-2-demos\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jquery-az.com\/a-pure-css-off-canvas-menu-with-2-demos\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.jquery-az.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"A Pure CSS off-canvas Menu with 2 Demos\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jquery-az.com\/#website\",\"url\":\"https:\/\/www.jquery-az.com\/\",\"name\":\"\",\"description\":\"PHP, Bootstrap, jQuery, CSS, Python, Java and others\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jquery-az.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\",\"name\":\"jqueryaz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"caption\":\"jqueryaz\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"A Pure CSS off-canvas Menu with 2 Demos","robots":{"index":"noindex","follow":"follow"},"og_locale":"en_US","og_type":"article","og_title":"A Pure CSS off-canvas Menu with 2 Demos","og_description":"The off-canvas menu using pure CSS The off-canvas menu is the one that slides and overlaps the main content with the navigation links. Generally, you may need to use JavaScript to create this type of menu. In this post, an off-canvas menu is shared with pure CSS. This menu type can particularly be useful for ... Read more","og_url":"https:\/\/www.jquery-az.com\/a-pure-css-off-canvas-menu-with-2-demos\/","article_published_time":"2016-07-29T09:23:59+00:00","article_modified_time":"2023-11-11T09:29:04+00:00","og_image":[{"width":273,"height":642,"url":"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/07\/16.0_2-CSS-menu-off-canvas-.jpg","type":"image\/jpeg"}],"author":"jqueryaz","twitter_misc":{"Written by":"jqueryaz","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jquery-az.com\/a-pure-css-off-canvas-menu-with-2-demos\/","url":"https:\/\/www.jquery-az.com\/a-pure-css-off-canvas-menu-with-2-demos\/","name":"A Pure CSS off-canvas Menu with 2 Demos","isPartOf":{"@id":"https:\/\/www.jquery-az.com\/#website"},"datePublished":"2016-07-29T09:23:59+00:00","dateModified":"2023-11-11T09:29:04+00:00","author":{"@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3"},"breadcrumb":{"@id":"https:\/\/www.jquery-az.com\/a-pure-css-off-canvas-menu-with-2-demos\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jquery-az.com\/a-pure-css-off-canvas-menu-with-2-demos\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.jquery-az.com\/a-pure-css-off-canvas-menu-with-2-demos\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.jquery-az.com\/"},{"@type":"ListItem","position":2,"name":"A Pure CSS off-canvas Menu with 2 Demos"}]},{"@type":"WebSite","@id":"https:\/\/www.jquery-az.com\/#website","url":"https:\/\/www.jquery-az.com\/","name":"","description":"PHP, Bootstrap, jQuery, CSS, Python, Java and others","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jquery-az.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3","name":"jqueryaz","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","caption":"jqueryaz"}}]}},"_links":{"self":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/2185"}],"collection":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/comments?post=2185"}],"version-history":[{"count":5,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/2185\/revisions"}],"predecessor-version":[{"id":11269,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/2185\/revisions\/11269"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media\/2187"}],"wp:attachment":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media?parent=2185"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/categories?post=2185"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/tags?post=2185"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}