index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>Responsive Offcanvas Menu</title>
<link href="css/offcanvas.css" rel="stylesheet" />
</head>
<body>
<section id="offcanvas-sidebar">
<div>
<h4>Menu 1</h4>
<ul>
<li>
<a href="#">Link 1.1</a>
<ul>
<li><a href="#">Link 1.1.1</a></li>
<li><a href="#">Link 1.1.2</a></li>
<li><a href="#">Link 1.1.3</a></li>
<li><a href="#">Link 1.1.4</a></li>
</ul>
</li>
<li><a href="#">Link 1.2</a></li>
<li><a href="#">Link 1.3</a></li>
<li><a href="#">Link 1.4</a></li>
</ul>
<h4>Menu 2</h4>
<ul>
<li><a href="#">Link 2.1</a></li>
<li><a href="#">Link 2.2</a></li>
<li><a href="#">Link 2.3</a></li>
</ul>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="js/offcanvas.min.js"></script>
</body>
</html>
offcanvas.css
body {
margin: 0;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: scrollbar;
}
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
font-family: "Open Sans", sans-serif;
font-size: 16px;
font-weight: 300;
line-height: 1.6;
overflow: hidden;
min-height: 100vh;
}
.container {
max-width: 728px;
margin: auto;
padding: 20px;
min-height: 100vh;
}
#offcanvas-sidebar {
width: 250px;
height: 100%;
position: fixed;
top: 0;
overflow-x: hidden;
overflow-y: auto;
transition: all 400ms ease;
}
#page-wrap {
background: #fff;
transition: all 400ms ease;
}
#offcanvas-navicon {
position: fixed;
top: 8px;
right: 0;
z-index: 102;
height: 48px;
width: 48px;
padding: 10px 6px;
background: rgb(255 255 255 / 62%);
border-radius: 50%;
transition: all 400ms ease;
}
#offcanvas-navicon:after, #offcanvas-navicon:before, #offcanvas-navicon span {
display: block;
content: "";
display: block;
height: 4px;
margin: 4px;
border-radius: 2px;
background: #000;
transition: all 400ms ease;
}
#offcanvas-navicon:hover {
cursor: pointer;
}
.offcanvas-open #offcanvas-navicon:before {
transform: translate3d(0, 8px, 0) rotate(135deg);
}
.offcanvas-open #offcanvas-navicon:after {
transform: translate3d(0, -8px, 0) rotate(-135deg);
}
.offcanvas-open #offcanvas-navicon span {
transform: scale(0);
}
#offcanvas-sidebar {
background: #181818;
padding-top: 50px;
}
#offcanvas-sidebar h4 {
margin: 24px 0 0;
color: #f3f3f3;
padding: 15px 16px;
}
#offcanvas-sidebar h4 a {
margin: -8px -16px;
}
#offcanvas-sidebar ul {
width: 250px;
margin: 0;
border-top: 1px dashed rgb(214, 214, 214);
list-style-type: none;
padding: 0;
}
#offcanvas-sidebar li {
border-bottom: 1px dashed rgb(214, 214, 214);
}
#offcanvas-sidebar a {
display: block;
padding: 15px 16px;
color: #e3e3e3;
text-decoration: none;
transition: all 0.25s ease;
}
#offcanvas-sidebar a:hover {
color: #ccc;
background: #444;
cursor: pointer;
}
#offcanvas-sidebar ul ul {
display: none;
position: absolute;
float: right;
margin-top: -41px;
margin-left: 250px;
}
#offcanvas-sidebar div {
transition: all 400ms ease;
}
#offcanvas-sidebar.offcanvas-child-open > div {
margin-left: -250px;
}
#offcanvas-sidebar.offcanvas-child-open > div .offcanvas-child-visible {
display: block;
}
.offcanvas-child-link {
position: absolute;
display: inline-block;
width: 44px;
height: 55px;
margin-top: -55px;
margin-left: 205px;
border-left: 1px dashed rgb(214, 214, 214);
padding: 14px 16px;
background: #181818;
color: #e3e3e3;
text-decoration: none;
transition: all 0.25s ease;
}
.offcanvas-child-link:hover {
color: #ccc;
background: #444;
cursor: pointer;
}
.offcanvas-child-back-link {
position: absolute;
display: block;
width: 100%;
margin-top: -50px;
border-top: 1px solid rgb(255 255 255);
padding: 14px 16px;
color: #262626;
text-decoration: none;
transition: all 0.25s ease;
background: white;
}
.offcanvas-child-back-link:hover {
color: #ccc;
background: #444;
cursor: pointer;
}
body #offcanvas-navicon {
right: 8px;
}
body #offcanvas-sidebar {
right: 0;
z-index: 101;
margin-right: -250px;
}
body.offcanvas-open #page-wrap {
margin-left: -250px;
margin-right: 250px;
}
body.offcanvas-open #offcanvas-sidebar {
margin-right: 0;
}
offcanvas.min.js
! function ($)
{
"use strict";
$(document).ready(function ()
{
function a()
{
$("body").addClass("offcanvas-open")
}
function n()
{
$("body").removeClass("offcanvas-open"), $("#offcanvas-sidebar ul ul").removeClass("offcanvas-child-visible"), $("#offcanvas-sidebar").delay(400).animate(
{
scrollTop: 0
}, 50)
}
function s(s)
{
$("body").hasClass("offcanvas-open") ? n() : a(), s.preventDefault()
}
function c()
{
$("#offcanvas-sidebar").addClass("offcanvas-child-open")
}
function o()
{
$("#offcanvas-sidebar").removeClass("offcanvas-child-open")
}
function f(a)
{
$(a.currentTarget).siblings("ul").addClass("offcanvas-child-visible"), c(), a.preventDefault()
}
function e(a)
{
$(a.currentTarget).parents("ul").removeClass("offcanvas-child-visible"), o(), a.preventDefault()
}
function i(a)
{
$("body").hasClass("offcanvas-open") && (n(), o(), a.preventDefault())
}
$("body").prepend('<div id="offcanvas-navicon"><span></span></div>'), $("#offcanvas-sidebar ul ul").parent().append('<span class="offcanvas-child-link">»</span>'), $("#offcanvas-sidebar ul ul").prepend('<span class="offcanvas-child-back-link">« Back</span>'), $("#offcanvas-navicon").on("click", s), $("#offcanvas-navicon").on("touchstart", s), $(".offcanvas-child-link").on("click", f), $(".offcanvas-child-link").on("touchstart", f), $(".offcanvas-child-back-link").on("click", e), $(".offcanvas-child-back-link").on("touchstart", e), $("#page-wrap").on("click", i), $("#page-wrap").on("touchstart", i), $(window).on("resize", i)
})
}(jQuery);
2.49 KB