Off canvas menu

Developer
Matheus Silva
Size
7,017 Kb
Views
18,216
  1. Off canvas menu Previews
  2. Off canvas menu HTML Codes
  3. Off canvas menu CSS Codes
  4. Off canvas menu JS Codes

How do I make an off canvas menu?

Leave a comment with suggestions or doubts. check-list . What is a off canvas menu? How do you make a off canvas menu? This script and codes were developed by Matheus Silva on 16 October 2022, Sunday.

Off canvas menu Previews
IQ Test

Off canvas menu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>off canvas menu</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <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! */ /*Fontawesome Iconfont*/
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css);
@import url("https://fonts.googleapis.com/css?family=Inconsolata");
/*Montserrat, Open Sans*/
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300);
* { margin: 0; padding: 0;
}
html, body { width: 100%; height: 100%; background: #333;
}
.wrapper { width: 645px; height: 500px; margin: 35px auto 0 auto;
}
h1 { color: white; font: 300 40px Inconsolata; width: 300px; padding: 30px; float: left;
}
.mobile { float: left; position: relative; box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.5); overflow: hidden;
}
/*Hiding the checkbox*/
#tm { display: none;
}
/*Content area*/
.mobile section { background: url("http://www.stockazoo.com/uploads/3/5/4/5/3545172/100037_bryce.jpg"); background-color: #303F9F; width: 285px; height: 500px; position: relative; transition: all 0.25s;
}
.mobile section label { outline: none; color: teal; font: bold 14px Inconsolata; text-align: center; border: 2px solid teal; border-radius: 4px; display: block; padding: 10px 0; width: 25%; position: absolute; left: 20%; top: 100px; cursor: pointer; text-transform: uppercase; transition: all 0.4s ease;
}
.mobile section label:after { content: ''; width: 5px; height: 10px; background-color: salmon;
}
/*Nav styles*/
.sidenav { background: teal; width: 150px; position: absolute; left: 0; top: 0; bottom: 0; padding-top: 100px;
}
.sidenav li { list-style-type: none; transition: all .5s;
}
.sidenav li:hover { background: #ff5722;
}
.sidenav a { color: white; text-decoration: none;
}
.sidenav b { font: bold 12px/48px Inconsolata; display: block; opacity: 0; transform: translateX(50px); transition: all 0.4s;
}
.sidenav i { display: block; width: 50px; float: left; font-size: 16px; line-height: 48px; text-align: center;
}
/*Animation controls using checkbox hack*/
/*Animate content area to the right*/
section { transform-origin: right;
}
#tm:checked ~ section { transform: translateX(150px);
}
/*Animate links from right to left + fade in effect*/
#tm:checked ~ .sidenav b { opacity: 1; transform: translateX(0);
}
#tm:checked ~ section label { width: 30%; border-radius: 10%; width: 10%;
}
#tm:checked ~ section label span { display: none;
}
#tm:checked ~ section label i { margin-left: -10%; transform: rotate(180deg);
}
/*Adding delay to link animation - in multiples of .08s*/
/*One can use jQuery also for creating the delayed effect. But I will stick to manual CSS for this walkthrough.*/
#tm:checked ~ .sidenav li:nth-child(1) b { transition-delay: 0.08s;
}
#tm:checked ~ .sidenav li:nth-child(2) b { transition-delay: 0.16s;
}
#tm:checked ~ .sidenav li:nth-child(3) b { transition-delay: 0.24s;
}
#tm:checked ~ .sidenav li:nth-child(4) b { transition-delay: 0.32s;
}
#tm:checked ~ .sidenav li:nth-child(5) b { transition-delay: 0.40s;
}
#tm:checked ~ .sidenav li:nth-child(6) b { transition-delay: 0.48s;
}
#fbm { visibility: hidden;
}
.madewith { color: #727272;
}
.madewith .heart { color: salmon;
}
.madewith a { color: #FFFFFF;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="wrapper">	<h1>Off Canvas Menu with Animated Links</h1>	<div class="mobile">	<!-- Checkbox to toggle the menu -->	<input type="checkbox" id="tm" />	<!-- The menu -->	<ul class="sidenav">	<li><a href="#"><i class="fa fa-check"></i><b>Tasks</b></a></li>	<li><a href="#"><i class="fa fa-inbox"></i><b>Messages</b></a></li>	<li><a href="#"><i class="fa fa-pencil"></i><b>New Post</b></a></li>	<li><a href="#"><i class="fa fa-cog"></i><b>Settings</b></a></li>	<li><a href="#"><i class="fa fa-star"></i><b>Starred</b></a></li>	<li><a href="#"><i class="fa fa-power-off"></i><b>Logout</b></a></li>	</ul>	<!-- Content area -->	<section>	<!-- Label for #tm checkbox -->	<label for="tm"><span>menu</span> <i class="fa fa-chevron-right"></i></label>	</section>	</div>
</div>
<span class="madewith">Made with <i class="fa fa-heart heart"></i> By <a href="http://mugfoundation.com">Matheus Silva</a> <span id="fbm">Happy bithday father!!</span></span> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Off canvas menu - Script Codes CSS Codes

/*Fontawesome Iconfont*/
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css);
@import url("https://fonts.googleapis.com/css?family=Inconsolata");
/*Montserrat, Open Sans*/
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300);
* { margin: 0; padding: 0;
}
html, body { width: 100%; height: 100%; background: #333;
}
.wrapper { width: 645px; height: 500px; margin: 35px auto 0 auto;
}
h1 { color: white; font: 300 40px Inconsolata; width: 300px; padding: 30px; float: left;
}
.mobile { float: left; position: relative; box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.5); overflow: hidden;
}
/*Hiding the checkbox*/
#tm { display: none;
}
/*Content area*/
.mobile section { background: url("http://www.stockazoo.com/uploads/3/5/4/5/3545172/100037_bryce.jpg"); background-color: #303F9F; width: 285px; height: 500px; position: relative; transition: all 0.25s;
}
.mobile section label { outline: none; color: teal; font: bold 14px Inconsolata; text-align: center; border: 2px solid teal; border-radius: 4px; display: block; padding: 10px 0; width: 25%; position: absolute; left: 20%; top: 100px; cursor: pointer; text-transform: uppercase; transition: all 0.4s ease;
}
.mobile section label:after { content: ''; width: 5px; height: 10px; background-color: salmon;
}
/*Nav styles*/
.sidenav { background: teal; width: 150px; position: absolute; left: 0; top: 0; bottom: 0; padding-top: 100px;
}
.sidenav li { list-style-type: none; transition: all .5s;
}
.sidenav li:hover { background: #ff5722;
}
.sidenav a { color: white; text-decoration: none;
}
.sidenav b { font: bold 12px/48px Inconsolata; display: block; opacity: 0; transform: translateX(50px); transition: all 0.4s;
}
.sidenav i { display: block; width: 50px; float: left; font-size: 16px; line-height: 48px; text-align: center;
}
/*Animation controls using checkbox hack*/
/*Animate content area to the right*/
section { transform-origin: right;
}
#tm:checked ~ section { transform: translateX(150px);
}
/*Animate links from right to left + fade in effect*/
#tm:checked ~ .sidenav b { opacity: 1; transform: translateX(0);
}
#tm:checked ~ section label { width: 30%; border-radius: 10%; width: 10%;
}
#tm:checked ~ section label span { display: none;
}
#tm:checked ~ section label i { margin-left: -10%; transform: rotate(180deg);
}
/*Adding delay to link animation - in multiples of .08s*/
/*One can use jQuery also for creating the delayed effect. But I will stick to manual CSS for this walkthrough.*/
#tm:checked ~ .sidenav li:nth-child(1) b { transition-delay: 0.08s;
}
#tm:checked ~ .sidenav li:nth-child(2) b { transition-delay: 0.16s;
}
#tm:checked ~ .sidenav li:nth-child(3) b { transition-delay: 0.24s;
}
#tm:checked ~ .sidenav li:nth-child(4) b { transition-delay: 0.32s;
}
#tm:checked ~ .sidenav li:nth-child(5) b { transition-delay: 0.40s;
}
#tm:checked ~ .sidenav li:nth-child(6) b { transition-delay: 0.48s;
}
#fbm { visibility: hidden;
}
.madewith { color: #727272;
}
.madewith .heart { color: salmon;
}
.madewith a { color: #FFFFFF;
}

Off canvas menu - Script Codes JS Codes

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-61157304-1', 'auto'); ga('send', 'pageview');
var d = new Date();
if(d.getMonth() == 4 && d.getDate() == 31) { $("#fbm").css("visibility", 'visible');
}
Off canvas menu - Script Codes
Off canvas menu - Script Codes
Home Page Home
Developer Matheus Silva
Username matheusxaviersi
Uploaded October 16, 2022
Rating 4.5
Size 7,017 Kb
Views 18,216
Do you need developer help for Off canvas menu?

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!

Matheus Silva (matheusxaviersi) Script Codes
Name
Color switching button
Mug foundation-pre loader
A Pen by Matheus Silva
Login page
Recipe site layout
Sample page
Simple yet functional
Simple syntax higlighter
Just some fun with 3d transforms
Css3 loaders 4rd revision
Create amazing Facebook ads with AI!

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!