waslidemenu

by Mike Pol

HTML

<script src="https://cdn.rawgit.com/webasyst/waslidemenu/master/src/js/waslidemenu.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/webasyst/waslidemenu/master/src/css/waslidemenu.css">
<h1>Global Surfing Spot Atlas</h1>

<div id="slidemenu1">
    <ul>
        <li class="collapsible"><a href="#">Pacific Ocean</a>

            <ul>
                <li class="collapsible"><a href="#">Hawaii</a>

                    <ul>
                        <li class="collapsible"><a href="#">Oahu</a>

                            <ul>
                                <li><a href="#">Sandy Beach</a>
                                </li>
                                <li><a href="#">Banzai Pipeline</a>
                                </li>
                                <li><a href="#">Waimea Bay</a>
                                </li>
                                <li><a href="#">Waikiki Beach</a>
                                </li>
                                <li><a href="#">Canoes</a>
                                </li>
                            </ul>
                        </li>
                        <li><a href="#">Big Island</a>
                        </li>
                        <li><a href="#">Kauai</a>
                        </li>
                        <li><a href="#">Honolua Bay</a>
                        </li>
                        <li><a href="#">Peahi Jaws</a>
                        </li>
                    </ul>
                </li>
                <li class="collapsible"><a href="#">Australia</a>

                    <ul>
                        <li><a href="#">Gold Coast</a>
                        </li>
                        <li><a href="#">Noosa Heads</a>
                        </li>
                        <li><a href="#">New South Wales</a>
                        </li>
                        <li><a href="#">Cyclops</a>
                        </li>
                    </ul>
                </li>
              ...

CSS

body {
    background-color: white;
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
#slidemenu1{
    width: 60%;
    margin: 0 15%;
}
ul {
    margin: 0 0 20px;
    padding: 0;
}
.collapsible {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAgCAYAAACinX6EAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPxJREFUeNpi/P//P8NIBkwMIxyMBsBoAIxwwEILQxkZGUlSP5AFMS1TgMpIzwISQFw2kgPgCBBfAOK8kVwI7gLi+0CcNZJrgc1A/AqIk0ZyNbgGiH8CcfRIbgcsBWIuIA4ayQ2h2UAsBcS+I7klOAXaRnAbyU3hfiA2AmKbkdwX+DeSU0AhtJF0ZCQGAKhRdAfaSBpxKQDUGHoBbRyNuFogGtoYWjcS2wGgxg87tDE04lqCvtCu8byR2BcANXYUgXjaSOwNgho5BkA8aTCPBzDSYjwOOiYoD8QPiVE/kGOCtAwAosFABgBNRoWH0nTb6MTIaACMBsDIBgABBgA88i/oqGpRJgAAAABJRU5ErkJggg==) no-repeat;
    background-position: 100% 50%;
    background-size: 32px 16px;
    background-color: #eee;
}
li {
    list-style: none;
    padding: 0;
    line-height: 1.3em;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    background-color: #eee;
}
a {
    padding: 15px 26px 15px 16px;
    display: block;
    text-decoration: none;
    color: #006bd8;
}
.selected > a {
    font-weight: bold;
}
.waSlideMenu-back {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAgCAYAAACinX6EAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAMpJREFUeNpi/P//P8NIBoyjATAaAKMBMBoAA2Y5IyNJ6mnh1qESACpAfGekBkAZEB8D4iMjMQAKgfgqEO8aiVkgC4gfA/HmkVgGJAHxJyBeMxILwWgovXQk1gJBQCwMxLNHYjXoC8SKQDxpJLYD3IBYG4j7R2JDyAaKOwaiJcg0SJrk/0Z6X2BEZwHkQlAWiKeN5M7QiK4GRxtCaE3hD0C8biSPB4zoztBod3h0QAQVyAPxw5EcAMOzDBgMYDQARgNgNABGdgAABBgAASu3w1KbogcAAAAASUVORK5CYII=) no-repeat;
    background-position: 0% 50%;
    background-size: 32px 16px;
    padding-left: 13px !important;
}
.waSlideMenu-back a {
    color: #aaa;
}

JavaScript

$('#slidemenu1').waSlideMenu({
    autoHeightMenu: true,
    //backOnTop: true,
    scrollToTopSpeed: 200,
    slideSpeed: 500,
    backLinkContent: 'Back please',
    onLatestClick: function(){
        alert('Last node ' + $(this).text() + ' selected')
    }
});