Matt Matt - 4 months ago 38
CSS Question

Toggle menu from right instead of left

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

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>