stackable^js

Stackable is a jQuery plugin that automatically stack menu options when its container gets smaller. You can try it by resizing this window.

Option #1
Option #2
Option #3
Option w/submenu
- Sub A
- Sub B
- Sub C
Option #5
Option #6
Option #7

Usage

Add stackable.css in the <head> section

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

Set up a Navigation bar

<ul class="nav">
    <li><a href="#">Option #1</a></li>
    <li><a href="#">Option #2</a></li>
    <li><a href="#">Option #3</a></li>
    <li><a href="#">Option #4</a></li>
    <li><a href="#">Option #5</a></li>
</ul>

Include jQuery and Stackable right before </body>

<script src="jquery.min.js"></script>
<script src="stackable.min.js"></script>

Plugin call

<script>
    $('.nav').stackable();
</script>

Features

Stacker label

By default the stacker label will be +, but you can change it

$('.nav').stackable({
    stackerLabel: 'More options'
});

Nested items

Use the "submenu" class to nest another list

<ul class="nav">
    <li><a href="#">Option #1</a></li>
    <li class="submenu">
        <a href="#">Option #2 +</a>
        <ul>
            <li><a href="#">Option A</a></li>
            <li><a href="#">Option B</a></li>
            <li><a href="#">Option C</a></li>
        </ul>
    </li>
    <li><a href="#">Option #3</a></li>
</ul>

Styling

Highly customizable css

...
.sa-stacker {}
.sa-stacker.sa-open {}
.submenu { }
.submenu.sa-open {}
...

stackablejs