<link rel="stylesheet" href="https://forumstatic.ru/files/0014/4d/32/18194.css">

    <style type="text/css">
        a.basic {
            color: #333333;
            text-decoration: none;
            background-position: 0 -15px;
            -webkit-transition: background-position 0.1s linear;
            -moz-transition: background-position 0.1s linear;
            -o-transition: background-position 0.1s linear;
            transition: background-position 0.1s linear;
            background-color: #e6e6e6;
            display: inline-block;
            padding: 4px 12px;
            margin-bottom: 0;
            font-size: 14px;
            line-height: 20px;
            color: #333333;
            text-align: center;
            text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
            vertical-align: middle;
            cursor: pointer;
            background-color: #f5f5f5;
            background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
            background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
            background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
            background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
            background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
            background-repeat: repeat-x;
            border: 1px solid #cccccc;
            border-color: #e6e6e6 #e6e6e6 #bfbfbf;
            border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
            border-bottom-color: #b3b3b3;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
            filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
            -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
            -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
        }
    </style>

<div style="width:600px; margin: 0px auto">
    <p><a class="basic" id="simple-menu" href="#sidr">Открыть меню</a></p>

    <div id="sidr">
        <!-- Your content -->
        <ul>
            <li><a href="#">List 1</a></li>
            <li class="active"><a href="#">List 2</a></li>
            <li><a href="#">List 3</a></li>
        </ul>
    </div>

    

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="https://forumstatic.ru/files/0014/4d/32/16573.js"></script>
    <script>
        $(document).ready(function() {
            $('#simple-menu').sidr();
        });
    </script>

    <script>
        $(document).ready(function() {
            $('#left-menu').sidr({
                name: 'sidr-left',
                side: 'left' // по умолчанию
            });
            $('#right-menu').sidr({
                name: 'sidr-right',
                side: 'right'
            });
        });
    </script>

    <script>
    $(document).ready(function() {
        $('#existing-content-menu').sidr({
            name: 'sidr-existing-content',
            source: '#demoheader, #demo-content'
        });
        $('#remote-content-menu').sidr({
            name: 'sidr-remote-content',
            source: 'content.html'
        });
        $('#callback-menu').sidr({
            name: 'sidr-callback',
            source: function(name) {
                return '<h1>Меню ' + name + '</h1><p>Да! И так тоже работает ;)</p>';
            }
        });
    });
</script>