JSFiddle - React, Tailwind, and code Playground

jQuery Infinite Slide Menu

by Jennifer Perrin

HTML

<div class="example">
<h3>Example 1 <span class="note">(random ease in)</span></h3>    
<div class="menuContainer style1" id="example1">
<ul>
<li><a href="">Menu 1</a>
    <ul>
    <li><a href="">Envato</a>
        <ul>
            <li><a href="">Marketplace</a>            
                <ul>
                <li><a href="">ActiveDen</a></li>                    
                <li><a href="">CodeCanyon</a></li>
                <li><a href="">ThemeForest</a></li>
                </ul>            
            </li>
        <li><a href="">Tut Site</a>
            <ul>
            <li><a href="">Fourth menu 1</a></li>
            <li><a href="">Fourth menu 2</a></li>
            <li><a href="">Fourth menu 3</a></li>
            </ul>
        </li>
        <li><a href="">Storm Site</a>
            <ul>
            <li><a href="">Fourth menu 1</a></li>
            <li><a href="">Fourth menu 2</a></li>
            </ul>
        </li>
        <li><a href="">Third menu 4</a>
            <ul>
            <li><a href="">Fourth menu 1</a></li>
            </ul>
        </li>
        </ul>
    </li>
    <li><a href="">Sub Menu 2</a>
        <ul>
        <li><a href="">Third menu 1</a></li>
        <li><a href="">Third menu 2</a></li>
        <li><a href="">Third menu 3</a></li>
        </ul>
    </li>
    <li><a href="">Second menu 3</a>
        <ul>
        <li><a href="">Third menu 1</a></li>
        <li><a href="">Third menu 2</a></li>
        </ul>
    </li>
    </ul>
</li>
<li><a href="">menu 2</a>
    <ul>
    <li><a href="">Second menu 1</a>
        <ul>
        <li><a href="">Third menu 1</a></li>
        <li><a href="">Third menu 2</a></li>
        <li><a href="">Third menu 3</a></li>
        <li><a href="">Third menu 4</a></li>
        <li><a href="">Third menu 5</a></li>
        <li><a href="">Third menu 6</a></li>
        <li><a href="">Third menu 7</a></li>
        <li><a href="">Third menu 8</a></li>
        <li><a href="">Third menu 9</a></li>
        <li><a...

CSS

body {
    font-size: 100%;
    line-height: 140%;
    font: .7em/1.2em "Lucida Grande", "Lucida Sans Unicode", helvetica, verdana, arial, sans-serif;
    background: #fff;
    margin-left: 20px;
}

a:link { text-decoration:none; color: #333;}
a:visited { text-decoration:none; color: #333;}
a:active { text-decoration:none; color: #333;}
a:hover { text-decoration:none; color: #333; background: #DDD;}

#wrap {
    width: 960px;
    margin: 0 auto;
}

.menuContainer {
    padding-bottom: 0;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    overflow: hidden;
}

.menuContainer ul {
    width: auto;
    float: left;
    overflow: hidden;
}

.menuContainer ul li {
    width: auto;
    display: block;
    vertical-align: text-bottom;
}
.menuContainer ul li a.arrow{
    background:url(http://jenniferperrin.com/blog/wp-content/uploads/2012/08/arrow.png) no-repeat center right;
    
}

.menuContainer ul li a {
    padding: 15px 0;
    text-indent: 10px;
    display: block;
    float: left;
    position: relative;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;    
    border-bottom: 1px dotted #CCC;    
}
.menuContainer ul li a:hover {
    background: #DDD;
    
}
.menuContainer ul li a.arrow:hover{
    background: #DDD url(http://jenniferperrin.com/blog/wp-content/uploads/2012/08/arrow.png) no-repeat center right;
}

.menuContainer ul li a span {
    right: 10px;
    position: absolute;
}

.menuContainer a.backMenu {
    background:url(http://jenniferperrin.com/blog/wp-content/uploads/2012/08/prev.png) no-repeat center left;
    color: #333;
}

.menuContainer a.backMenu:hover {
    background:#DDD url(http://jenniferperrin.com/blog/wp-content/uploads/2012/08/prev.png) no-repeat center left;    
}

.menuContainer ul li ul {
    display: none;
}



.menuContainer ul li:after {
    content: ".";
    height: 0;
    clear: both;
   ...

JavaScript

(function() {
    $.fn.extend({
        slideMenu: function(a) {
            var d = {
                container: "",
                width: 300,
                css3: true,
                easeIn: "bounceIn",
                backLabel: "",
                random: true,
                showCurrent: true,
                backLabelCenter: true
            };
            if (a) {
                $.extend(d, a);
            }
            var h = this;
            var c = ["bounce", "bounceIn", "fadeIn", "fadeInLeft", "fadeInRight", "bounce", "shake", "tada", "swing", "wobble", "wiggle", "pulse", "flipInX", "flipInY", "rotateIn", "rotateInDownLeft", "rotateInDownRight", "rotateInUpLeft", "rotateInUpRight", "twirlIn"];
            var f = c.length;
            h.find("ul li ul").hide();
            $("li:has(ul) > a", h).each(function() {
                $(this).addClass("arrow");
                $(this).parent("li").children("ul").prepend('<li><a href="#" class="backMenu">' + d.backLabel + "</a></li>");
                if (d.backLabelCenter) {
                    $(this).parent("li").children("ul").find(".backMenu").css({
                        width: d.width,
                        "text-align": "center"
                    });
                }
            });
            var e = d.width;
            var b = d.random ? c[Math.floor(Math.random() * f)] : d.easeIn;
            $(d.container).css({
                width: e + "px",
                height: "auto"
            });
            $(d.container + " ul li, " + d.container + " ul li a").css({
                width: e + "px"
            });
            $("li:has(ul) > a", h).on("click", {
                container: h
            }, function(i) {
                $(this).parents("li").animate({
                    width: "+=" + e + "px"
                }, 0);
                var k = $("ul", i.data.container).first().height();
                i.data.container.css("height", k + "px");
                $("ul",...