OFF CANVAS MENU

Developer
Luke Watts
Size
3,206 Kb
Views
40,480
  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?

Creating a slide out menu which sites below a top header. Uses calc to make the height of the menu.. What is a off canvas menu? How do you make a off canvas menu? This script and codes were developed by Luke Watts on 14 October 2022, Friday.

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> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="header" role="banner"> <div class="masthead"><a class="home-link logo" href="#"> <div class="nav-menu-button icon icon-bars" id="header-mobile-button"></div></a><a class="branding" href="#">OFF CANVAS MENU</a></div>
</header>
<nav class="main-nav" role="navigation"> <ul class="main-nav-menu"> <li class="main-nav-menu-item"><a class="main-nav-menu-item-link" href="#">Home</a></li> <li class="main-nav-menu-item"><a class="main-nav-menu-item-link" href="#">About</a></li> <li class="main-nav-menu-item"><a class="main-nav-menu-item-link" href="#">News</a></li> <li class="main-nav-menu-item"><a class="main-nav-menu-item-link" href="#">Contact</a></li> <li class="main-nav-menu-item"><a class="main-nav-menu-item-link" href="#">Sign Up</a></li> </ul>
</nav> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://use.fonticons.com/25e3cc81.js'></script> <script src="js/index.js"></script>
</body>
</html>

OFF CANVAS MENU - Script Codes CSS Codes

.header, .main-nav { font-size: 1rem;
}
.header { line-height: 3rem; padding: 0 1rem; font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; background-color: #26343F;
}
.home-link, .branding { color: white; text-decoration: none;
}
.branding { margin-left: 1rem;
}
.main-nav { width: 320px; height: calc(100vh - 3rem); position: relative; -webkit-transition: 300ms ease; transition: 300ms ease; -webkit-transform: translateX(-320px); transform: translateX(-320px); background-color: #1c272f;
}
.main-nav.open { -webkit-transform: translateX(0); transform: translateX(0);
}
.main-nav-menu { margin: 0; list-style: none; padding-top: 0.5rem; padding-bottom: 0.5rem;
}
.main-nav-menu-item { padding-top: 0.5rem; padding-bottom: 0.5rem;
}
.main-nav-menu-item-link { color: white; text-decoration: none;
}

OFF CANVAS MENU - Script Codes JS Codes

jQuery(document).ready(function() { jQuery('#header-mobile-button').on('click', function(event) { event.preventDefault(); jQuery('.main-nav').toggleClass('open'); });
});
OFF CANVAS MENU - Script Codes
OFF CANVAS MENU - Script Codes
Home Page Home
Developer Luke Watts
Username lukewatts
Uploaded October 14, 2022
Rating 3
Size 3,206 Kb
Views 40,480
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!

Luke Watts (lukewatts) Script Codes
Name
Christmas Countdown
Custom Google Maps
AFFINITY4 SERVICES ANIMATION
Webkit Background Text Clip
CSS Dark Neon LED Volume Dial
SmartQRTravel Login Form
HUD Animation Test
Sass Get Function
A Pen by Luke Watts
Turnable LED Dial
Create amazing video scripts 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!