javascript - 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

<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

Share Improve this question asked Jul 13, 2015 at 21:23 Matt 1,2575 gold badges26 silver badges54 bronze badges

1 A quick google search got me to this jsfiddle/hcmLw/2/light – believe me Commented Jul 13, 2015 at 21:27

Add a ment |

2 Answers 2

Sorted by: Reset to default 3

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn./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>

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');
  });
});

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Toggle menu from right instead of left - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)