How to slide nav bar from left instead from top?

Question

Bootstrap supports toggling a navbar from the top. How can I slide it from the left when the screen-size is small?

For example:

In the screenshot pr

Answer 1

Bootstrap 4 (update 2020)

IMO the simplest way is to override the Bootstrap collapse animation so that it transitions from left to right (width instead of height). Instead of toggling display:block when .collapse.show is used, the Navbar is always display:block which enables you to position as needed and use transitions from both collapsing directions...

Open menu: .collapse - .collapsing - .collapse.show
Close menu: .collapse.show - .collapsing.show - .collapse

    .navbar-collapse {
        position: absolute;
        top: 54px;
        left: -100%;
        width: 100%;
        transition: all 0.4s ease;
        display: block;
        opacity: 0.8;
    }
    .navbar-collapse.collapsing {
        height: auto !important;
        left: -100%;
        margin-left: 1px;
        transition: all 0.2s ease;
        opacity: 0.9;
    }
    .navbar-collapse.show {
        margin-left: 100%;
        transition: all 0.2s ease;
        opacity: 1;
    }

https://codeply.com/go/KSS4pjqtJy (full width)
https://codeply.com/p/BvPCPA1wgZ (full height)

Answer 2

Use this for right-to-left sliding:

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

Download source files: http://www.themeswild.com/read/slide-navigation-left-to-right

Answer 3

There is a similar question here: Bootstrap 3 Slide in Menu / Navbar on Mobile where the accepted answer is to use jasny bootstrap. There are other answers there though if Jasny wasn't your cup of tea.

Answer 4

Easy. Change the default behavior from

<button ... data-toggle="collapse" data-target="#my-navbar-collapse">

to slide-collapse functionality which we are going to implement now

<button ... data-toggle="slide-collapse" data-target="#my-navbar-collapse">

Where the menu is contained within div that has the id my-navbar-collapse. Note that using id instead of class selector will improve the accessibility because bootstrap will append ARIA states (expanded/collapsed) to the menu automatically.

<div id="my-navbar-collapse" class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
        ...
    </ul>
</div>

Class .collapse in bootstrap ensures the menu to be initially hidden.

---

The code:

And then paste the following Javascript somewhere in the footer:

// mobile menu slide from the left
$('[data-toggle="slide-collapse"]').on('click', function() {
    $navMenuCont = $($(this).data('target'));
    $navMenuCont.animate({'width':'toggle'}, 350);
});

And the following CSS properties:

#my-navbar-collapse {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 280px; /*example + never use min-width with this solution */
    height: 100%;
}

Some hints:

• Good idea is also to make responsive query where menu width would be 100% for smartphones instead of always 280px. It works like a charm.
• If you have horizontal menu for desktops, and slider only for smaller devices, you can easily take advantage of @grid-float-breakpoint and @grid-float-breakpoint-max Bootstrap LESS variables

Answer 5

Please refer this CODEPEN. The following important points to note:

• Animate.css library required. Specifically the slideInLeft and the slideOutLeft animations.

• Work with dropdown instead of the collapse component of Bootstrap.

• Set the dropdown-menu element static by applying the class position-static on it.

• Leverage the show class that is applied on the dropdown element when the dropdown-menu is shown.

• Leverage left CSS property to carry out the transition. Basically, we'll set left:-100% on .dropdown.show .dropdown-menu and we'll set left:0px on .dropdown .dropdown-menu

Screenshot:

NOTE : You can tryout other animations for the dropdown-menu from animate.css.

Good Luck...

Answer 6

Try the following and take a look at the following link for more explanation-

<div class="navbar navbar-default navbar-fixed-side navbar-fixed-side-left" role="navigation">

Take a look at the following Github link to fix the navbar left or right

Feature: navbar-fixed-side left or right #13919

Another helpful link - Nav Sidebar With Toggle Button