Responsive Sliding Hamburger Menu Plugin For jQuery - elmenu

File Size: 39.6 KB
Views Total: 5578
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Responsive Sliding Hamburger Menu Plugin For jQuery - elmenu

Just another jQuery based responsive nav solution that converts the normal horizontal dropdown navigation into a mobile-friendly sliding hamburger menu (aka off-canvas menu) on small screens. Supports nested, multi-level sub menus and has the ability to take all menus in the header and clones them into the mobile nav. Fully customizable via SCSS.

How to use it:

1. First you need to put jQuery library and the jQuery elmenu plugin's script at the bottom of your html document.

<script src="//"></script>
<script src="js/elmenu.js"></script>

2. Put the compiled CSS file in the head section of the document.

<link rel="stylesheet" href="css/styles.min.css">

3. Create a multi-level site navigaton and insert it together with the main page content to a container named 'canvas'.

<div id="canvas">
  <header id="elmain">

    <div class="elmtoggle__holder">
      <a href="#!" id="elmtoggle" class="cf"><img src="img/hamburger.svg" alt="Open Sub Menu" class="elmtoggle__icon"></a>

    <div class="navholder--utility cf">

        <ul class="nav--utility elm__list">
          <li class="elm__item"><a class="elm__link" href="#!">About</a></li>
          <li class="elm__item"><a class="elm__link" href="#!">Contact</a></li>
          <li class="elm__item"><a class="elm__link" href="#!">Blog</a></li>

      <ul class="nav--social elm__list">
        <li class="elm__item"><a class="elm__link" href="#!">Facebook</a></li>
        <li class="elm__item"><a class="elm__link" href="#!">Twitter</a></li>


    <div class="navholder--main">

        <ul class="nav--main elm__list">
          <li class="elm__item hassub"><a class="elm__link" href="#!">Product 1</a>
            <ul class="elm__list--sub">
              <li class="elm__item--sub hassubsub"><a class="elm__link--sub" href="#!">Product 1.1</a>
                <ul class="elm__list--subsub">
                  <li class="elm__item--subsub"><a class="elm__link--subsub" href="#!">Product 1.1.1</a></li>
                  <li class="elm__item--subsub"><a class="elm__link--subsub" href="#!">Product 1.1.2</a></li>
                  <li class="elm__item--subsub"><a class="elm__link--subsub" href="#!">Product 1.1.3</a></li>
              <li class="elm__item--sub"><a class="elm__link--sub" href="#!">Product 1.2</a></li>
              <li class="elm__item--sub"><a class="elm__link--sub" href="#!">Product 1.3</a></li>
          <li class="elm__item"><a class="elm__link" href="#!">Product 2</a></li>
          <li class="elm__item"><a class="elm__link" href="#!">Product 3</a></li>



  Main content goes here

4. Initialize the plugin and set the order you want the nav elements to show up in the mobile nav. Reminder: it's an array, so 0 is the first item. .

var menuOrder = ['2','0','1'];
$( '#elmain' ).elmenu( menuOrder );

Change log:


  • v1.1.0 Fixes a bug where multiple toggle icons where spinning on a single icon click, so individual elements needed to be targeted specifically


This awesome jQuery plugin is developed by elmnt. For more Advanced Usages, please check the demo page or visit the official website.