HTML, jQuery and CSS mobile Offcanvas menu
What you need:
- jQuery (min 1.12.4)
Let´s go:
1.) Download CSS + JS
2.) Bind the CSS:
<head>
[...]
<link rel="stylesheet" href="css/offcanvas-mobile-menu.css" />
</head>3.) HTML structure:
<body>
<header>
<button id="trigger">trigger menu</button>
</header>
<section id="main"></section>
<section id="offcanvas">
<nav>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</nav>
</section>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="jquery.mobile-offcanvas-menu.js"></script>
<script>
$("#offcanvas").offcanvasmenu();
</script>
</body>4.) Options:
$("#offcanvas").offcanvasmenu({
menuTrigger: "some-other-id" // With this id you trigger the action (default: trigger)
position: "right", // which side the menu is coming out
speed: "0.3", // animation speed (example: 0.5 = 500ms; do not write 500 etc)
width: "220px" // width of the menu
fixedContainer: false,
fixedContainerName: ""
});Further ideas are in progress:
- Close menu not only by clicking the trigger id