Untitled

<!doctype html>
<html lang="en">
<head>

    <script src="https://rawgit.com/andreasring/slideout/development/dist/slideout.js"></script>
    <link rel="stylesheet" type="text/css" href="https://rawgit.com/andreasring/slideout/development/index.css">

    <style>

        .slideout-slide-menu {
            left: -256px;
            display: block;
            z-index: 10;
            will-change: transform;
        }

        #menu {
            background-color: #909090;
            height: 100%;
        }

        #panel {
            height: 100%;
            width: 100%;
            background-color: #ddd;
            overflow: hidden;
        }

        html, body {
            margin: 0;
            height: 100%;
            width: 100%;
        }

    </style>
</head>
<body>

    <nav id="menu" class="menu slideout-slide-menu">
        <p>My menu</p>
    </nav>

    <div id="panel">
        <p>My panel</p>
    </div>

    <script>

        // Setup the slideout menu
        var slideout = new Slideout({
            'panel':     document.getElementById('panel'),
            'menu':      document.getElementById('menu'),
            'mode':      'slide' // <---- New option (slide|push)
        });

    </script>

</body>
</html>