最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

programmeradmin3浏览0评论

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

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

Share Improve this question asked Jul 13, 2015 at 21:23 MattMatt 1,2575 gold badges26 silver badges54 bronze badges 1
  • 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

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');
  });
});
发布评论

评论列表(0)

  1. 暂无评论