Bootstrap 3 Deslice en Menú / Navbar en el móvil

Estoy construyendo una aplicación móvil basada en navegador y he decidido usar Bootstrap 3 como el marco de trabajo css para el diseño. Bootstrap 3 viene con una gran característica de “respuesta” en la barra de navegación donde se colapsa automáticamente si detecta un “punto de ruptura” específico con respecto a la resolución del navegador. Funciona en muchas situaciones.

Pero, ¿se ha dado cuenta últimamente de que muchas aplicaciones móviles basadas en navegador tienen la navegación principal oculta en la parte izquierda de la pantalla, y cuando se presiona el ícono de alternar (alternar) en la esquina superior derecha, la navegación principal se desliza hacia afuera? el derecho unos 2/3 del camino en la pantalla? Esta es una solución cada vez más popular para navegar a través de aplicaciones basadas en navegador en dispositivos móviles y creo que en teoría debería ser bastante fácil modificar bootstrap css / js para acomodar esta versión de la función de colapso de navegación.

¿Cómo se puede implementar esta característica? Parece que no debería tomar demasiadas modificaciones. Realmente me gustaría escuchar tus pensamientos / soluciones sobre este tema. Además, creo que sería una gran solución a largo plazo para Bootstrap para implementar como una característica incorporada.

Lamentablemente, no he intentado crear esta característica porque, aunque estoy familiarizado con estas tecnologías, soy predominantemente un desarrollador de PHP / MySQL y creo que una característica tan útil como esta debería ser construida por expertos con una visión que no tengo como un desarrollador front-end.

Hay una popular bifurcación de Bootstrap: Jasny Bootstrap. La horquilla tiene varias implementaciones fuera de la caja (deslizar, empujar, revelar): http://jasny.github.io/bootstrap/javascript/#offcanvas

Esto fue para mi propio proyecto y lo estoy compartiendo aquí también.

DEMO: http://jsbin.com/OjOTIGaP/1/edit

Este tuvo problemas después de 3.2, por lo que el siguiente puede funcionar mejor para usted:

https://jsbin.com/seqola/2/edit — MEJOR VERSIÓN, ligeramente


CSS

/* adjust body when menu is open */ body.slide-active { overflow-x: hidden } /*first child of #page-content so it doesn't shift around*/ .no-margin-top { margin-top: 0px!important } /*wrap the entire page content but not nav inside this div if not a fixed top, don't add any top padding */ #page-content { position: relative; padding-top: 70px; left: 0; } #page-content.slide-active { padding-top: 0 } /* put toggle bars on the left :: not using button */ #slide-nav .navbar-toggle { cursor: pointer; position: relative; line-height: 0; float: left; margin: 0; width: 30px; height: 40px; padding: 10px 0 0 0; border: 0; background: transparent; } /* icon bar prettyup - optional */ #slide-nav .navbar-toggle > .icon-bar { width: 100%; display: block; height: 3px; margin: 5px 0 0 0; } #slide-nav .navbar-toggle.slide-active .icon-bar { background: orange } .navbar-header { position: relative } /* un fix the navbar when active so that all the menu items are accessible */ .navbar.navbar-fixed-top.slide-active { position: relative } /* screw writing importants and shit, just stick it in max width since these classes are not shared between sizes */ @media (max-width:767px) { #slide-nav .container { margin: 0; padding: 0!important; } #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%; width: 80%; 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 } /* this is behind the navigation but the navigation is not inside it so that the navigation is accessible and scrolls*/ #slide-nav #navbar-height-col { position: fixed; top: 0; height: 100%; width: 80%; left: -80%; background: #eee; } #slide-nav.navbar-inverse #navbar-height-col { 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 } } 

HTML

   

jQuery

 $(document).ready(function () { //stick in the fixed 100% height behind the navbar but don't wrap it $('#slide-nav.navbar .container').append($('')); // Enter your ids or classes var toggler = '.navbar-toggle'; var pagewrapper = '#page-content'; var navigationwrapper = '.navbar-header'; var menuwidth = '100%'; // the menu inside the slide menu itself var slidewidth = '80%'; var menuneg = '-100%'; var slideneg = '-80%'; $("#slide-nav").on("click", toggler, function (e) { var selected = $(this).hasClass('slide-active'); $('#slidemenu').stop().animate({ left: selected ? menuneg : '0px' }); $('#navbar-height-col').stop().animate({ left: selected ? slideneg : '0px' }); $(pagewrapper).stop().animate({ left: selected ? '0px' : slidewidth }); $(navigationwrapper).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'); } }); }); 

Bootstrap 4

¿Cree un “cajón” receptivo en la barra lateral de navegación en Bootstrap 4?

Bootstrap 3

Creo que lo que estás buscando se conoce generalmente como un diseño “fuera de la lona”. Aquí está el ejemplo estándar fuera de la lona de los documentos oficiales de Bootstrap: http://getbootstrap.com/examples/offcanvas/

El ejemplo “oficial” utiliza una barra lateral del lado derecho para alternar entre activar y desactivar por separado desde el menú de la barra de navegación superior. También encontré estas variaciones fuera del canvas que se deslizan desde la izquierda y pueden estar más cerca de lo que estás buscando.

http://www.bootstrapzero.com/bootstrap-template/off-canvas-sidebar http://www.bootstrapzero.com/bootstrap-template/facebook

podemos crear un menú fuera de la lona usando el plugin sidr. Lo he implementado en uno de mis proyectos que ha sido diseñado con bootstrap.

He seguido el enlace a continuación … parece fácil de implementar. 🙂

Cree un menú receptivo similar al móvil de Facebook con Bootstrap usando el plugin Sidr

Comenzamos a usar slideout.js. No está directamente usando Bootstrap, ya que es Dependency-free. Pero puedes combinarlo con bootstrap y, por ejemplo, mostrar el botón deslizable solo cuando el sitio web se muestra en un dispositivo móvil.

Puedes encontrarlo aquí o aquí .

También puede interesarle este complemento de jQuery y el marco CSS: https://myflashlabs.github.io/24component-bars/

Le ayuda a crear una navegación totalmente interactiva fuera de la lona, ​​y muchos otros tipos de menú que son adecuados para diferentes tipos de proyectos.

¡No necesita codificarlo usted mismo desde el principio cuando ya existe una solución!

Sin complemento, podemos hacer esto

Consulte el menú de respuesta de varios niveles de arranque de LINK para teléfonos móviles con la barra deslizante para dispositivos móviles

 $('[data-toggle="slide-collapse"]').on('click', function() { $navMenuCont = $($(this).data('target')); $navMenuCont.animate({ 'width': 'toggle' }, 350); $(".menu-overlay").fadeIn(500); }); $(".menu-overlay").click(function(event) { $(".navbar-toggle").trigger("click"); $(".menu-overlay").fadeOut(500); }); // if ($(window).width() >= 767) { // $('ul.nav li.dropdown').hover(function() { // $(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeIn(500); // }, function() { // $(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeOut(500); // }); // $('ul.nav li.dropdown-submenu').hover(function() { // $(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeIn(500); // }, function() { // $(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeOut(500); // }); // $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) { // event.preventDefault(); // event.stopPropagation(); // $(this).parent().siblings().removeClass('open'); // $(this).parent().toggleClass('open'); // $('b', this).toggleClass("caret caret-up"); // }); // } // $(window).resize(function() { // if( $(this).width() >= 767) { // $('ul.nav li.dropdown').hover(function() { // $(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeIn(500); // }, function() { // $(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeOut(500); // }); // } // }); var windowWidth = $(window).width(); if (windowWidth > 767) { // $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) { // event.preventDefault(); // event.stopPropagation(); // $(this).parent().siblings().removeClass('open'); // $(this).parent().toggleClass('open'); // $('b', this).toggleClass("caret caret-up"); // }); $('ul.nav li.dropdown').hover(function() { $(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeIn(500); }, function() { $(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeOut(500); }); $('ul.nav li.dropdown-submenu').hover(function() { $(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeIn(500); }, function() { $(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeOut(500); }); $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) { event.preventDefault(); event.stopPropagation(); $(this).parent().siblings().removeClass('open'); $(this).parent().toggleClass('open'); // $('b', this).toggleClass("caret caret-up"); }); } if (windowWidth < 767) { $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) { event.preventDefault(); event.stopPropagation(); $(this).parent().siblings().removeClass('open'); $(this).parent().toggleClass('open'); // $('b', this).toggleClass("caret caret-up"); }); } // $('.dropdown a').append('Some text'); 
 @media only screen and (max-width: 767px) { #slide-navbar-collapse { position: fixed; top: 0; left: 15px; z-index: 999999; width: 280px; height: 100%; background-color: #f9f9f9; overflow: auto; bottom: 0; max-height: inherit; } .menu-overlay { display: none; background-color: #000; bottom: 0; left: 0; opacity: 0.5; filter: alpha(opacity=50); /* IE7 & 8 */ position: fixed; right: 0; top: 0; z-index: 49; } .navbar-fixed-top { position: initial !important; } .navbar-nav .open .dropdown-menu { background-color: #ffffff; } ul.nav.navbar-nav li { border-bottom: 1px solid #eee; } .navbar-nav .open .dropdown-menu .dropdown-header, .navbar-nav .open .dropdown-menu>li>a { padding: 10px 20px 10px 15px; } } .dropdown-submenu { position: relative; } .dropdown-submenu .dropdown-menu { top: 0; left: 100%; margin-top: -1px; } li.dropdown a { display: block; position: relative; } li.dropdown>a:before { content: "\f107"; font-family: FontAwesome; position: absolute; right: 6px; top: 5px; font-size: 15px; } li.dropdown-submenu>a:before { content: "\f107"; font-family: FontAwesome; position: absolute; right: 6px; top: 10px; font-size: 15px; } ul.dropdown-menu li { border-bottom: 1px solid #eee; } .dropdown-menu { padding: 0px; margin: 0px; border: none !important; } li.dropdown.open { border-bottom: 0px !important; } li.dropdown-submenu.open { border-bottom: 0px !important; } li.dropdown-submenu>a { font-weight: bold !important; } li.dropdown>a { font-weight: bold !important; } .navbar-default .navbar-nav>li>a { font-weight: bold !important; padding: 10px 20px 10px 15px; } li.dropdown>a:before { content: "\f107"; font-family: FontAwesome; position: absolute; right: 6px; top: 9px; font-size: 15px; } @media (min-width: 767px) { li.dropdown-submenu>a { padding: 10px 20px 10px 15px; } li.dropdown>a:before { content: "\f107"; font-family: FontAwesome; position: absolute; right: 3px; top: 12px; font-size: 15px; } } 
 < !DOCTYPE html>   Bootstrap Example           

Resize the window to see the result

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non bibendum sem, et sodales massa. Proin quis velit vel nisl imperdiet rhoncus vitae id tortor. Praesent blandit tellus in enim sollicitudin rutrum. Integer ullamcorper, augue ut tristique ultrices, augue magna placerat ex, ac varius mauris ante sed dui. Fusce ullamcorper vulputate magna, a malesuada nunc pellentesque sit amet. Donec posuere placerat erat, sed ornare enim aliquam vitae. Nullam pellentesque auctor augue, vel commodo dolor porta ac. Sed libero eros, fringilla ac lorem in, blandit scelerisque lorem. Suspendisse iaculis justo velit, sit amet fringilla velit ornare a. Sed consectetur quam eget ipsum luctus bibendum. Ut nisi lectus, viverra vitae ipsum sit amet, condimentum condimentum neque. In maximus suscipit eros ut eleifend. Donec venenatis mauris nulla, ac bibendum metus bibendum vel.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non bibendum sem, et sodales massa. Proin quis velit vel nisl imperdiet rhoncus vitae id tortor. Praesent blandit tellus in enim sollicitudin rutrum. Integer ullamcorper, augue ut tristique ultrices, augue magna placerat ex, ac varius mauris ante sed dui. Fusce ullamcorper vulputate magna, a malesuada nunc pellentesque sit amet. Donec posuere placerat erat, sed ornare enim aliquam vitae. Nullam pellentesque auctor augue, vel commodo dolor porta ac. Sed libero eros, fringilla ac lorem in, blandit scelerisque lorem. Suspendisse iaculis justo velit, sit amet fringilla velit ornare a. Sed consectetur quam eget ipsum luctus bibendum. Ut nisi lectus, viverra vitae ipsum sit amet, condimentum condimentum neque. In maximus suscipit eros ut eleifend. Donec venenatis mauris nulla, ac bibendum metus bibendum vel.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non bibendum sem, et sodales massa. Proin quis velit vel nisl imperdiet rhoncus vitae id tortor. Praesent blandit tellus in enim sollicitudin rutrum. Integer ullamcorper, augue ut tristique ultrices, augue magna placerat ex, ac varius mauris ante sed dui. Fusce ullamcorper vulputate magna, a malesuada nunc pellentesque sit amet. Donec posuere placerat erat, sed ornare enim aliquam vitae. Nullam pellentesque auctor augue, vel commodo dolor porta ac. Sed libero eros, fringilla ac lorem in, blandit scelerisque lorem. Suspendisse iaculis justo velit, sit amet fringilla velit ornare a. Sed consectetur quam eget ipsum luctus bibendum. Ut nisi lectus, viverra vitae ipsum sit amet, condimentum condimentum neque. In maximus suscipit eros ut eleifend. Donec venenatis mauris nulla, ac bibendum metus bibendum vel.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non bibendum sem, et sodales massa. Proin quis velit vel nisl imperdiet rhoncus vitae id tortor. Praesent blandit tellus in enim sollicitudin rutrum. Integer ullamcorper, augue ut tristique ultrices, augue magna placerat ex, ac varius mauris ante sed dui. Fusce ullamcorper vulputate magna, a malesuada nunc pellentesque sit amet. Donec posuere placerat erat, sed ornare enim aliquam vitae. Nullam pellentesque auctor augue, vel commodo dolor porta ac. Sed libero eros, fringilla ac lorem in, blandit scelerisque lorem. Suspendisse iaculis justo velit, sit amet fringilla velit ornare a. Sed consectetur quam eget ipsum luctus bibendum. Ut nisi lectus, viverra vitae ipsum sit amet, condimentum condimentum neque. In maximus suscipit eros ut eleifend. Donec venenatis mauris nulla, ac bibendum metus bibendum vel.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non bibendum sem, et sodales massa. Proin quis velit vel nisl imperdiet rhoncus vitae id tortor. Praesent blandit tellus in enim sollicitudin rutrum. Integer ullamcorper, augue ut tristique ultrices, augue magna placerat ex, ac varius mauris ante sed dui. Fusce ullamcorper vulputate magna, a malesuada nunc pellentesque sit amet. Donec posuere placerat erat, sed ornare enim aliquam vitae. Nullam pellentesque auctor augue, vel commodo dolor porta ac. Sed libero eros, fringilla ac lorem in, blandit scelerisque lorem. Suspendisse iaculis justo velit, sit amet fringilla velit ornare a. Sed consectetur quam eget ipsum luctus bibendum. Ut nisi lectus, viverra vitae ipsum sit amet, condimentum condimentum neque. In maximus suscipit eros ut eleifend. Donec venenatis mauris nulla, ac bibendum metus bibendum vel.