HTML, jQuery and CSS mobile Offcanvas menu
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


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:

<link rel="stylesheet" href="css/offcanvas-mobile-menu.css" />

3.) HTML structure:


    <button id="trigger">trigger menu</button>

  <section id="main"></section>

  <section id="offcanvas">
        <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>

  <script src=""></script>
  <script src=""></script>


4.) Options:

    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