Toggle menu from right instead of left

Question

I have a menu that can toggle from the left, but I need to be able to toggle from the right. Not sure if this can be triggered from jQuery, or can be done in CSS. It also scrolls horizontally in the toggled navigation, when it should only scroll vertically.

<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
    <ul class="sidebar-nav">
        <li class="sidebar-brand"> <a href="#">
                    Entertainment
                </a>

        </li>
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <div class="thumbnail">
                        <div class="caption">
                             info
                    </div>
                </div>
            </div>
        </div>
</div>
<div id="page-content-wrapper">
    <div class="container-fluid">
        <nav class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="">
                    <ul class="nav navbar-nav navbar-left">
                        <li>
                            <img src="logo.png" height="50">
                        </li>
                    </ul>
                </div>
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="" height="30"></a>

                        </li>
                    </ul>
                </div>
            </div>
        </nav> <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a>

    </div>
</div>
<!-- /#page-content-wrapper -->

JSFIDDLE

Answer 1

USE THIS FOR RIGHT TO LEFT SLIDING :

DOWNLOAD SOURCE FILES : WATCH VIDEO AND DOWNLOAD FILES IN DESCRIPTION

HTML:

<div class="nav ">
       <ul>
        <li><a href="#">HOME</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">SERVICES</a></li>
        <li><a href="#">CONTACT</a></li>
       </ul>
   </div>

CSS:

.nav{
    position: fixed;
    right:0;
    top: 70px;
    width: 250px;
    height: calc(100vh - 70px);
    background-color: #333;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;

}
.nav-view{
    transform: translateX(0);
}

JS:

 $(document).ready(function(){
  $('a#click-a').click(function(){
    $('.nav').toggleClass('nav-view');
  });
});

Answer 2

Pretty simple really, you just have to move all your CSS rules that create the space for the sidebar on the left to the right. That's all really.

I added this to your sidebar-wrapper also overflow-x: hidden; to stop a horizontal scrollbar from showing when the menu is triggered.

$("#menu-toggle").click(function (e) {
    e.preventDefault();
    $("#wrapper").toggleClass("toggled");
});

#menu-toggle {
    float: right;
}
#wrapper {
    padding-right: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
#wrapper.toggled {
    padding-right: 250px;
}
#sidebar-wrapper {
    z-index: 1000;
    position: fixed;
    right: 250px;
    width: 0;
    height: 100%;
    margin-right: -250px;
    overflow-x: hidden;
    background: #000;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
    width: 250px;
}
#page-content-wrapper {
    width: 100%;
    position: absolute;
    padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
    position: absolute;
    margin-left: -250px;
}
/* Sidebar Styles */
 .sidebar-nav {
    position: absolute;
    top: 0;
    width: 250px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.sidebar-nav li {
    text-indent: 20px;
    line-height: 40px;
    padding-right: 17%;
}
.sidebar-nav li a {
    display: block;
    text-decoration: none;
    color: #999999;
}
.sidebar-nav li a:hover {
    text-decoration: none;
    color: #fff;
    background: rgba(255, 255, 255, 0.2);
}
.sidebar-nav li a:active, .sidebar-nav li a:focus {
    text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
    height: 65px;
    font-size: 18px;
    line-height: 60px;
}
.sidebar-nav > .sidebar-brand a {
    color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
    color: #fff;
    background: none;
}
@media(min-width:768px) {
    #wrapper {
        padding-right: 250px;
    }
    #wrapper.toggled {
        padding-right: 0;
    }
    #sidebar-wrapper {
        width: 250px;
    }
    #wrapper.toggled #sidebar-wrapper {
        width: 0;
    }
    #page-content-wrapper {
        padding: 20px;
        position: relative;
    }
    #wrapper.toggled #page-content-wrapper {
        position: relative;
        margin-left: 0;
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div id="wrapper">
    <!-- Sidebar -->
    <div id="sidebar-wrapper">
        <ul class="sidebar-nav">
            <li class="sidebar-brand"><a href="#">Entertainment</a>

            </li>
    </div>
    <div id="page-content-wrapper">
        <div class="container-fluid">
            <nav class="navbar navbar-default" role="navigation">
                <div class="container-fluid">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="">
                        <ul class="nav navbar-nav navbar-left">
                            <li>
                                <img src="http://placehold.it/50x50" alt="">
                            </li>
                        </ul>
                    </div>
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav navbar-right"></ul>
                    </div>
                </div>
            </nav> <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a>

        </div>
    </div>
    <!-- /#page-content-wrapper -->
</div>