Edit in JSFiddle

<d-side-pane id="sp" class="blue">
    <header class="black">Menu</header>
    <nav>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
    </nav>
    <i>Swipe to the left to close the SidePane</i>
</d-side-pane>
<div id="page">
    <button onclick="sp.show()">Show</button>
    <button onclick="sp.hide()">Hide</button>
</div>

.blue { background-color: #4882CA;}
.black { background-color: #000000;}
header {
    background-color: black;
    text-align: center;
    color: #FFFFFF;
}
nav {
    padding-left: 0.5em;
    font-weight: bold;
}

require.config({
    baseUrl: "http://ibm-js.github.io/libraries/master",     
});
require(["deliteful-build/layer"], function () {
    require([
        "deliteful/SidePane"
    ], function (){
        document.body.style.display = "";
    });
});