Bootstrap - How to slide nav bar from left instead from top
Author: Eris Risyana |
6:13 AM |
No comments |
Bootstrap - How to slide nav bar from left instead from top
In my knowledge, currently bootstrap supports toggle navbar from the top. How can I slide it from the left when the screen-size is small?
For eg:- See the screenshots
In the screenshot provided above, when the screen is re-sized, the navbar is toggled and slides down from the top. I rather want that the navba should slide from the left. how can I achieve this function in Bootstrap.
Currently, as per code, the navbar slides from the top. Here is my code.
Answer by Mark Walker for Bootstrap - How to slide nav bar from left instead from top
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 by Altius for Bootstrap - How to slide nav bar from left instead from top
Try the following and take a look at the following link for more explanation-
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
Answer by Paras Dahal for Bootstrap - How to slide nav bar from left instead from top
There is a good post that tries to imitate the left side toggle like in Facebook app using jQuery and Bootstrap. Check it out:
Answer by lgabster for Bootstrap - How to slide nav bar from left instead from top
Here is the full example
$(document).ready(function() { $('#slide-nav.navbar-inverse').after($('')); $('#slide-nav.navbar-default').after($('')); var slidewidth = '20%'; var navbarneg = '-' + slidewidth; if ($(window).width() < 767) { $('#navbar-height-col').css("width", slidewidth); $('#navbar-height-col').css("left", navbarneg); $('#slide-nav #slidemenu').css("width", slidewidth); $('#slide-nav #slidemenu').css("left", navbarneg); } $("#slide-nav").on("click", '.navbar-toggle', function(e) { // slider is active var selected = $(this).hasClass('slide-active'); // set slidemenu width $('#slidemenu').stop().animate({ left: selected ? navbarneg : '0px' }); // set navbar width $('#navbar-height-col').stop().animate({ left: selected ? navbarneg : '0px' }); // set content let $('#page-content').stop().animate({ left: selected ? '0px' : slidewidth }); // set navbar left $('.navbar-header').stop().animate({ left: selected ? '0px' : slidewidth }); $(this).toggleClass('slide-active', !selected); $('#slidemenu').toggleClass('slide-active'); $('#page-content, .navbar, body, .navbar-header').toggleClass('slide-active'); }); var selected = '#slidemenu, #page-content, body, .navbar, .navbar-header'; $(window).on("resize", function() { if ($(window).width() > 767 && $('.navbar-toggle').is(':hidden')) { $(selected).removeClass('slide-active'); } }); });
body.slide-active { overflow-x: hidden } #page-content { position: relative; padding-top: 70px; left: 0; } #page-content.slide-active { padding-top: 0 } #slide-nav .navbar-toggle { cursor: pointer; position: relative; line-height: 0; float: left; margin: 0; width: 30px; height: 40px; padding: 17px 0 0 0; border: 0; background: transparent; } #slide-nav .navbar-toggle.slide-active .icon-bar { background: #CC0F0F; color: #CC0F0F; } .navbar-header { position: relative } .navbar.navbar-fixed-top.slide-active { position: relative } @media (max-width: 767px) { #slide-nav .container { margin: 0!important; padding: 0!important; height: 100%; } #slide-nav .navbar-header { margin: 0 auto; padding: 0 15px; } #slide-nav .navbar.slide-active { position: absolute; width: 80%; top: -1px; z-index: 1000; } #slide-nav #slidemenu { background: #f7f7f7; left: -100%; min-width: 0; position: absolute; padding-left: 0; z-index: 2; top: -8px; margin: 0; } #slide-nav #slidemenu .navbar-nav { min-width: 0; width: 100%; margin: 0; } #slide-nav #slidemenu .navbar-nav .dropdown-menu li a { min-width: 0; width: 80%; white-space: normal; } #slide-nav { border-top: 0 } #slide-nav.navbar-inverse #slidemenu { background: #333 } #navbar-height-col { position: fixed; top: 0; height: 100%; bottom: 0; background: #f7f7f7; } #navbar-height-col.inverse { background: #333; z-index: 1; border: 0; } #slide-nav .navbar-form { width: 100%; margin: 8px 0; text-align: center; overflow: hidden; /*fast clearfixer*/ } #slide-nav .navbar-form .form-control { text-align: center } #slide-nav .navbar-form .btn { width: 100% } } @media (min-width: 768px) { #page-content { left: 0!important } .navbar.navbar-fixed-top.slide-active { position: fixed } .navbar-header { left: 0!important } }
Left Sidebar menu
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid sunt minus libero quas soluta blanditiis voluptatibus, eveniet sint tempora! Maxime!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad laudantium deleniti ratione ea voluptas, dolore expedita nisi? Veniam, doloremque, reiciendis.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis nam esse molestiae voluptatem maiores fugiat nulla commodi magni impedit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora ducimus iure ipsa ea officia aliquid quibusdam nostrum obcaecati itaque temporibus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid sunt minus libero quas soluta blanditiis voluptatibus, eveniet sint tempora! Maxime!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad laudantium deleniti ratione ea voluptas, dolore expedita nisi? Veniam, doloremque, reiciendis.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis nam esse molestiae voluptatem maiores fugiat nulla commodi magni impedit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora ducimus iure ipsa ea officia aliquid quibusdam nostrum obcaecati itaque temporibus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid sunt minus libero quas soluta blanditiis voluptatibus, eveniet sint tempora! Maxime!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad laudantium deleniti ratione ea voluptas, dolore expedita nisi? Veniam, doloremque, reiciendis.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis nam esse molestiae voluptatem maiores fugiat nulla commodi magni impedit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora ducimus iure ipsa ea officia aliquid quibusdam nostrum obcaecati itaque temporibus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid sunt minus libero quas soluta blanditiis voluptatibus, eveniet sint tempora! Maxime!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad laudantium deleniti ratione ea voluptas, dolore expedita nisi? Veniam, doloremque, reiciendis.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis nam esse molestiae voluptatem maiores fugiat nulla commodi magni impedit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora ducimus iure ipsa ea officia aliquid quibusdam nostrum obcaecati itaque temporibus!
Answer by Hrvoje Golcic for Bootstrap - How to slide nav bar from left instead from top
Easy. Change the default behavior from
to slide-collapse functionality which we are going to implement now
Where the menu is contained within div that has class .navbar-collapse
...
Class .collapse in bootstrap ensures the menu to be initially hidden.
The code:
And then past this 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); });
Make sure that your navbar conatiner has specified CSS (.navbar-collapse):
.navbar-collapse { position: fixed; top: 0; left: 0; z-index: 10000; 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 by Sharavnan Kv for Bootstrap - How to slide nav bar from left instead from top
Use this for right-to-left sliding:
HTML :
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: Watch video and download files in description
Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72
0 comments:
Post a Comment