Off Canvas Pop Out Menu
How do I make an off canvas pop out menu?
Bare bones pattern for a pop up menu, using CSS transitions and a bit of jQuery to toggle classesThe toggle is coming from the element behind the burger menu so there isnt any dead space in-between the lines.. What is a off canvas pop out menu? How do you make a off canvas pop out menu? This script and codes were developed by Keith Light on 18 November 2022, Friday.
Off Canvas Pop Out Menu - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Off Canvas Pop Out Menu</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(https://fonts.googleapis.com/css?family=Lato:300,400);
/* Grid and Reset */
html,body,div,h1,h2,p,a,img,footer,header,section { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;
}
img { vertical-align: bottom; max-width: 100%;
}
* { box-sizing: border-box;
}
.container { max-width: 1020px; position: relative; margin: 0 auto; padding: 0 10px; zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}
.container:before,
.container:after { content: ""; display: table;
}
.container:after { clear: both;
}
.row { zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}
.row:before,
.row:after { content: ""; display: table;
}
.row:after { clear: both;
}
.columns { float: left; display: block; margin-left: 1.5%; margin-bottom: 10px; vertical-align: top;
}
.columns:first-child { margin-left: 0;
}
.columns.three { width: 23.875%;
}
.columns.six { width: 49.25%;
}
.columns.twelve { width: 100%;
}
/* Normal Content */
body { font-family: 'Lato'; font-size: 20px; background-color: #2e2e2e; color: #fff; width: 100%; height: 100%;
}
nav { background: #7A5656; width: 100%; height: 50px; margin-bottom: 40px;
}
.menu-icon { background: transparent; width: 50px; height: 50px; margin: 0 0 0 auto; position: relative; cursor: pointer;
}
.menu-icon span,
.menu-icon span:before,
.menu-icon span:after { cursor: pointer; border-radius: 1px; height: 2px; width: 35px; background: white; position: absolute; left: 30%; top: 50%; display: block; content: ''; transition: all 0.5s ease-in-out;
}
.menu-icon span:before { left: 0; top: -10px;
}
.menu-icon span:after { left: 0; top: 10px;
}
.menu-icon.active span { background-color: transparent;
}
.menu-icon.active span:before,
.menu-icon.active span:after { top: 0;
}
.menu-icon.active span:before { transform: rotate(135deg);
}
.menu-icon.active span:after { transform: rotate(-135deg);
}
/* offCanvasMenu */
.offCanvasMenu { position: fixed; background: #473232; bottom: 0; left: 0; width: 100%; height: 60%; opacity: 0; padding-top: 20px; transform: translate(0%, 100%); transition: all 1s cubic-bezier(1.000, -0.650, 0.000, 1.650);
}
.open { opacity: 1; transform: translate(0%, 10%);
}
h2 { text-align: center; font-size: 30px; margin: 20px; letter-spacing:3px; text-decoration: underline;
}
.offCanvasMenu .columns { opacity: 0; transition: all 1s;
}
.offCanvasMenu .columns:nth-of-type(1){ transition-delay: 0.25s;
}
.offCanvasMenu .columns:nth-of-type(2){ transition-delay: 0.5s;
}
.offCanvasMenu .columns:nth-of-type(3){ transition-delay: 0.75s;
}
.offCanvasMenu .columns:nth-of-type(4){ transition-delay: 1s;
}
.offCanvasMenu.open .columns { opacity: 1;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <nav> <div class="container"> <div class="menu-icon"> <span></span> </div> </div>
</nav>
<div class="container"> <div class="row"> <div class="twelve columns"> <img src="http://placehold.it/1650x350/B2A1A1/ffffff"> </div> </div> <div class="row"> <div class="six columns"> <img src="http://placehold.it/650x150/B2A1A1/ffffff"> </div> <div class="six columns"> <img src="http://placehold.it/650x150/B2A1A1/ffffff"> </div> </div> <div class="row"> <div class="three columns"> <img src="http://placehold.it/650x150/B2A1A1/ffffff"> </div> <div class="three columns"> <img src="http://placehold.it/650x150/B2A1A1/ffffff"> </div> <div class="three columns"> <img src="http://placehold.it/650x150/B2A1A1/ffffff"> </div> <div class="three columns"> <img src="http://placehold.it/650x150/B2A1A1/ffffff"> </div> </div>
</div>
<!-- Off Canvas Menu -->
<div class="offCanvasMenu"> <div class="container"> <h2>Menu</h2> <div class="row"> <div class="three columns"> <img src="http://placehold.it/650x150/B2A1A1/ffffff"> </div> <div class="three columns"> <img src="http://placehold.it/650x150/B2A1A1/ffffff"> </div> <div class="three columns"> <img src="http://placehold.it/650x150/B2A1A1/ffffff"> </div> <div class="three columns"> <img src="http://placehold.it/650x150/B2A1A1/ffffff"> </div> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Off Canvas Pop Out Menu - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Lato:300,400);
/* Grid and Reset */
html,body,div,h1,h2,p,a,img,footer,header,section { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;
}
img { vertical-align: bottom; max-width: 100%;
}
* { box-sizing: border-box;
}
.container { max-width: 1020px; position: relative; margin: 0 auto; padding: 0 10px; zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}
.container:before,
.container:after { content: ""; display: table;
}
.container:after { clear: both;
}
.row { zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}
.row:before,
.row:after { content: ""; display: table;
}
.row:after { clear: both;
}
.columns { float: left; display: block; margin-left: 1.5%; margin-bottom: 10px; vertical-align: top;
}
.columns:first-child { margin-left: 0;
}
.columns.three { width: 23.875%;
}
.columns.six { width: 49.25%;
}
.columns.twelve { width: 100%;
}
/* Normal Content */
body { font-family: 'Lato'; font-size: 20px; background-color: #2e2e2e; color: #fff; width: 100%; height: 100%;
}
nav { background: #7A5656; width: 100%; height: 50px; margin-bottom: 40px;
}
.menu-icon { background: transparent; width: 50px; height: 50px; margin: 0 0 0 auto; position: relative; cursor: pointer;
}
.menu-icon span,
.menu-icon span:before,
.menu-icon span:after { cursor: pointer; border-radius: 1px; height: 2px; width: 35px; background: white; position: absolute; left: 30%; top: 50%; display: block; content: ''; transition: all 0.5s ease-in-out;
}
.menu-icon span:before { left: 0; top: -10px;
}
.menu-icon span:after { left: 0; top: 10px;
}
.menu-icon.active span { background-color: transparent;
}
.menu-icon.active span:before,
.menu-icon.active span:after { top: 0;
}
.menu-icon.active span:before { transform: rotate(135deg);
}
.menu-icon.active span:after { transform: rotate(-135deg);
}
/* offCanvasMenu */
.offCanvasMenu { position: fixed; background: #473232; bottom: 0; left: 0; width: 100%; height: 60%; opacity: 0; padding-top: 20px; transform: translate(0%, 100%); transition: all 1s cubic-bezier(1.000, -0.650, 0.000, 1.650);
}
.open { opacity: 1; transform: translate(0%, 10%);
}
h2 { text-align: center; font-size: 30px; margin: 20px; letter-spacing:3px; text-decoration: underline;
}
.offCanvasMenu .columns { opacity: 0; transition: all 1s;
}
.offCanvasMenu .columns:nth-of-type(1){ transition-delay: 0.25s;
}
.offCanvasMenu .columns:nth-of-type(2){ transition-delay: 0.5s;
}
.offCanvasMenu .columns:nth-of-type(3){ transition-delay: 0.75s;
}
.offCanvasMenu .columns:nth-of-type(4){ transition-delay: 1s;
}
.offCanvasMenu.open .columns { opacity: 1;
}
Off Canvas Pop Out Menu - Script Codes JS Codes
//I am still playing around with this so if you have any suggestions/improvements please let me know
$(".menu-icon").click(function() { $(this).toggleClass("active"); $(".offCanvasMenu").toggleClass("open");
});
Developer | Keith Light |
Username | keefyboooo |
Uploaded | November 18, 2022 |
Rating | 4.5 |
Size | 4,027 Kb |
Views | 16,192 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Material Design Buttons | 5,214 Kb |
Tron Light Cycle Loader | 3,200 Kb |
DevWars Weekly Challenge Week 8 | 7,605 Kb |
Material Design Colour Palette | 14,903 Kb |
JQuery Responsive Tabs | 5,062 Kb |
DevWars weekly challenge week 1 | 6,217 Kb |
Weather App Concept | 5,869 Kb |
Overlay Menu Concept | 4,431 Kb |
Responsive Dock Menu Concept | 5,029 Kb |
SlideToggle Menu | 3,904 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Practice using Wixel | Emnk | 3,057 Kb |
ASCII triangle image overlay | Mitchdot | 2,200 Kb |
Calendar | Miroot | 2,033 Kb |
CSS-Flexbox-Demo | Sstiglets | 1,709 Kb |
Incremental game | Eprouver | 5,868 Kb |
A Pen by Manoz | Manoz | 2,424 Kb |
CSS3 Butterfly | Timohausmann | 3,430 Kb |
Zeichensatz | Moklick | 2,058 Kb |
Tile Animation Thing | Frxnz | 4,332 Kb |
Compare resources on mobile sites | Gyusza | 3,226 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!