Multilevel Vertical Nav w/ Breadcrumbs

by kthornbloom

HTML

<a href="#" class="breadcrumbs"></a>

<nav>
    <div class="nav-stage">
<ul>
	<li><a href="#">Home</a></li>
	<li><a href="#">Staff</a>
		<ul>
			<li><a href="#">Sublevel1</a></li>
			<li><a href="#">Sublevel2</a></li>
			<li><a href="#">Sublevel3</a>
				<ul>
					<li><a href="#">Sub-Sublevel1</a></li>
					<li><a href="#">Sub-Sublevel2</a></li>
					<li><a href="#">Sub-Sublevel3</a>
						<ul>
							<li><a href="#">Sub-Sub-Sublevel1</a></li>
							<li><a href="#">Sub-Sub-Sublevel2</a></li>
							<li><a href="#">Sub-Sub-Sublevel3</a>
								<ul>
									<li><a href="#">Outer Space</a></li>
								</ul>
							</li>
						</ul>
					</li>
				</ul>
			</li>
		</ul>
	</li>
	<li><a href="#">Events</a></li>
	<li><a href="#">Ordinances</a></li>
	<li><a href="#">Etc</a></li>
</ul>
    </div>
</nav>

CSS

body {    
    font-family:Veranda, sans-serif;
    font-size:12px;
    padding:30px;
}
.breadcrumbs {
    display:block;
    width:170px;
    color:inherit;
    padding:15px;
    text-decoration:none;
    background:#E2E2E2;
}
.breadcrumbs:empty{padding:0;}
nav {
    overflow:hidden;
    width:200px;
    font-family:sans-serif;
    font-size:0;    
    background:#eee;
}
.nav-stage {
    white-space:nowrap;
    transition:all .2s ease-out;
    position:relative;
    left:0;
}
.nav-stage li {
    position:relative;
    list-style:none;
}
.nav-stage > ul {
    display:inline-block;
    width:170px;
    vertical-align:top;
    padding:15px;
}
.nav-stage > ul > li ul {
    display:none;
}
.nav-level > ul > li ul {
    display:none;
}
nav a:link, nav a:visited {
    color:inherit;
    text-decoration:none;
    display:block;
    font-size:14px;
    padding:10px;
    background:rgba(0, 0, 0, .05);
    margin-bottom:1px;
}
nav a:hover {
    background:rgba(0,0,0,.1);
}
.nav-level {
    display:inline-block;
    vertical-align:top;
    width:170px;
    padding:15px;
}
.parent:before {
    content:'〉';
    display:inline-block;
    float:right;
    font-size:14px;
    font-weight:bold;
    padding:10px 5px 10px 0;
}

JavaScript

$('nav li:has(ul)').addClass('parent');

$(document.body).on('click', 'nav a', function (e) {
    e.stopPropagation();
    var hasChild = $(this).parent().find('ul').length;
    if (hasChild == 0) {
        var link = $(this).attr('href');
        // Uncomment in the final use
        //window.location = "+'link'+";
    } else {
        var nextNav = $(this).parent().find('ul')[0].outerHTML,
            text = $(this).text();
        $('.nav-stage').append("<div class='nav-level'>" + nextNav + "</div>");
        $('.nav-stage').css('left', '-=200px');
        $('.breadcrumbs span').hide();
        $('.breadcrumbs').append("<span>〈 " + text + "</span>");
    }
});

$(document.body).on('click', '.breadcrumbs', function (e) {
    var posLeft = parseInt($('.nav-stage').css('left')),
        posLeftAdj = posLeft * (-1);

    if (posLeftAdj > 1) {
        $('.nav-stage').css('left', '+=200px');
        $('.breadcrumbs span:last').remove();
        $('.breadcrumbs span:last').show();
        setTimeout(function () {
            $('.nav-level:last').remove();
        }, 200); // Set to same time as CSS easing
    }
});