Responsive jQuery Mobile-Style Sliding Menu Plugin - Slinky

Slinky is a fully responsive jQuery plugin used to create a mobile App style sliding navigation menu that has nested ul based multi-level functionality. The next level can cover the previous one with a smooth sliding effect to save space on your web page.

Installation:

# Yarn
$ yarn add jquery-slinky

# NPM
$ npm install jquery-slinky --save

How to use it:

1. Include the jQuery sliding menu plugin and other resources in your Html file.

<link rel="stylesheet" type="text/css" href="css/jquery-sliding-menu.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-sliding-menu.js"></script>

2. Create an empty container element for the sliding navigation menu.

<div id="menu"> </div>

3. Create menu items using nested Html lists.

<div id="menu">
<ul>
<li> <a href="#">Artists</a>
<ul>
<li> <a href="#">Aerosmith</a>
<ul>
<li> <a href="#">Get Your Wings</a>
<ul>
<li> <a href="#">Train Kept A-Rollin'</a> </li>
<li> <a href="#">Same Old Song and Dance</a> </li>
</ul>
</li>
</ul>
</li>
<li> <a href="#">Eagles</a>
<ul>
<li> <a href="#">Hotel California</a>
<ul>
<li> <a href="#">Hotel California</a> </li>
<li> <a href="#">Pretty Maids All in a Row</a> </li>
</ul>
</li>
</ul>
</li>
<li> <a href="#">Led Zeppelin</a>
<ul>
<li> <a href="#">Physical Graffiti</a>
<ul>
<li> <a href="#">In My Time of Dying</a> </li>
<li> <a href="#">Houses of the Holy</a> </li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li> <a href="#">Albums</a>
<ul>
<li> <a href="#">Get Your Wings</a>
<ul>
<li> <a href="#">Train Kept A-Rollin'</a> </li>
<li> <a href="#">Same Old Song and Dance</a> </li>
</ul>
</li>
<li> <a href="#">Hotel California</a>
<ul>
<li> <a href="#">Hotel California</a> </li>
<li> <a href="#">Pretty Maids All in a Row</a> </li>
</ul>
</li>
<li> <a href="#">Physical Graffiti</a>
<ul>
<li> <a href="#">In My Time of Dying</a> </li>
<li> <a href="#">Houses of the Holy</a> </li>
</ul>
</li>
</ul>
</li>
<li> <a href="#">Songs</a>
<ul>
<li> <a href="#">In My Time of Dying</a> </li>
<li> <a href="#">Houses of the Holy</a> </li>
<li> <a href="#">Hotel California</a> </li>
<li> <a href="#">Pretty Maids All in a Row</a> </li>
<li> <a href="#">Train Kept A-Rollin'</a> </li>
<li> <a href="#">Same Old Song and Dance</a> </li>
</ul>
</li>
<li> <a href="#">Genres</a>
<ul>
<li> <a href="#">Rock</a>
<ul>
<li> <a href="#">Hotel California</a> </li>
<li> <a href="#">Pretty Maids All in a Row</a> </li>
<li> <a href="#">Train Kept A-Rollin'</a> </li>
<li> <a href="#">Same Old Song and Dance</a> </li>
</ul>
</li>
<li> <a href="#">Hard rock</a>
<ul>
<li> <a href="#">In My Time of Dying</a> </li>
<li> <a href="#">Houses of the Holy</a> </li>
</ul>
</li>
</ul>
</li>
<li> <a href="#">Settings</a>
<ul>
<li> <a href="#">Profile</a> </li>
<li> <a href="#">Player</a>
<ul>
<li> <a href="#">Volume</a> </li>
<li> <a href="#">Equalizer</a> </li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

4. Or using JSON data format in the javascript.

var data = [
{
"label": "Item 1",
"children": [
{
"label": "Item I",
"href": "#"
},
{
"label": "Item II",
"children": [
{
"label": "Item A",
"href": "#"
},
{
"label": "Item B",
"href": "#"
},
{
"label": "Item C",
"href": "#"
},
{
"label": "Item D",
"href": "#"
}
]
}
]
},
{
"label": "Item 2",
"href": "#"
},
{
"label": "Item 3",
"href": "#"
},
{
"label": "Item 4",
"href": "#"
},
{
"label": "Item 5",
"children": [
{
"label": "Item I",
"href": "#"
},
{
"label": "Item II",
"href": "#"
},
{
"label": "Item III",
"children": [
{
"label": "Item A",
"href": "#"
},
{
"label": "Item B",
"href": "#"
},
{
"label": "Item C",
"href": "#"
},
{
"label": "Item D",
"href": "#"
}
]
}
]
}
]

4. Call the plugin on the container you just created.

$('#menu').slinky(data);

5. Options and defaults.

$('#menu').slinky({

  // auto resize height
  resize: true,

  // animation speed
  speed: 300,

  // theme CSS
  theme: 'slinky-theme-default',

  // shows title of sub menu
  title: false
  
});

6. API methods.

const slinky = $('.menu').slinky(options)

// back to the root menu
// animate: true or false
slinky.home(animate)

// jump to a sub menu
// target: target selector
// animate: true or false
slinky.jump(target, animate)

// destroy the menu
slinky.destroy()

Changelog:

v4.2.1 (2019-07-14)

• refactor

2018-07-12

• Dependencies upgraded

2018-01-08

• Set initial height on the menu

2017-10-31

• bugfix

2017-10-25

• v4

---

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