Bootstrap 3在Mobile上的菜单/导航栏中滑动-Java 学习之路

120

我正在构建一个基于浏览器的移动应用程序，我决定使用Bootstrap 3作为设计的css框架 . Bootstrap 3在导航栏中提供了一个很棒的“响应”功能，如果它检测到有关浏览器分辨率的特定“断点”，它会自动折叠 . 它适用于很多情况 .

但是你最近注意到很多基于浏览器的移动应用程序如何将主导航隐藏在屏幕左侧，并且当在右上角按下（切换）切换图标时，主导航滑出到右边大约2/3的方式进入屏幕？这是一种越来越流行的解决方案，用于在移动设备上浏览基于浏览器的应用程序，我认为理论上应该很容易修改bootstrap css / js以适应此版本的导航折叠功能 .

如何实现这些功能？似乎不应该采取太多修改 . 我真的很想听听你对此事的想法/解决方案 . 此外，我认为Bootstrap作为内置功能实现是一个很好的长期解决方案 .

不幸的是，我没有尝试创建这个功能，因为虽然我熟悉这些技术，但我主要是一个PHP / MySQL开发人员，我相信一个有用的功能应该是由我没有的洞察力的专家构建的作为前端开发人员 .

7 回答

136

有一个流行的Bootstrap叉 - Jasny Bootstrap . fork具有开箱即用的各种非画布实现（滑入，推送，显示）：http://jasny.github.io/bootstrap/javascript/#offcanvas

回复于 2024-04-29T17:59:24+08:00

这是我自己的项目，我也在这里分享 .

演示：http：//jsbin.com/OjOTIGaP/1/edit

这个在3.2之后有问题，所以下面的那个可能对你更好：

https://jsbin.com/seqola/2/edit ---稍微改善版本

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

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="slide-nav">
  <div class="container">
   <div class="navbar-header">
    <a class="navbar-toggle"> 
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
     </a>
    <a class="navbar-brand" href="#">Project name</a>
   </div>
   <div id="slidemenu">

          <form class="navbar-form navbar-right" role="form">
            <div class="form-group">
              <input type="search" placeholder="search" class="form-control">
            </div>
            <button type="submit" class="btn btn-primary">Search</button>
          </form>

    <ul class="nav navbar-nav">
     <li class="active"><a href="#">Home</a></li>
     <li><a href="#about">About</a></li>
     <li><a href="#contact">Contact</a></li>
     <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
      <ul class="dropdown-menu">
       <li><a href="#">Action</a></li>
       <li><a href="#">Another action</a></li>
       <li><a href="#">Something else here</a></li>
       <li class="divider"></li>
       <li class="dropdown-header">Nav header</li>
       <li><a href="#">Separated link</a></li>
       <li><a href="#">One more separated link</a></li>
       <li><a href="#">Action</a></li>
       <li><a href="#">Another action</a></li>
       <li><a href="#">Something else here</a></li>
       <li class="divider"></li>
       <li class="dropdown-header">Nav header</li>
       <li><a href="#">Separated link</a></li>
       <li><a href="#">One more separated link</a></li>
       <li><a href="#">Action</a></li>
       <li><a href="#">Another action</a></li>
       <li><a href="#">Something else here</a></li>
       <li class="divider"></li>
       <li class="dropdown-header">Nav header</li>
       <li><a href="#">Separated link test long title goes here</a></li>
       <li><a href="#">One more separated link</a></li>
      </ul>
     </li>
    </ul>

   </div>
  </div>
 </div>

jQuery

$(document).ready(function () {


    //stick in the fixed 100% height behind the navbar but don't wrap it
    $('#slide-nav.navbar .container').append($('<div id="navbar-height-col"></div>'));

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


    });

});

回复于 2024-04-29T17:59:24+08:00

49

Bootstrap 4

Create a responsive navbar sidebar "drawer" in Bootstrap 4?

Bootstrap 3

我认为你所寻找的通常被称为"off-canvas"布局 . 以下是官方Bootstrap文档中的标准画布示例：http://getbootstrap.com/examples/offcanvas/

“官方”示例使用右侧边栏与顶部导航栏菜单分别关闭和打开 . 我还发现这些从左侧滑入的画布外变化可能更接近您正在寻找的东西 .

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

回复于 2024-04-29T17:59:24+08:00
67

我们可以使用sidr插件从左或右创建一个非画布菜单 . 我已经在我的一个设计有引导程序的项目中实现了它 .

我已经按照下面的链接...似乎很容易实现 . :-)

Create a responsive menu similar to facebook mobile with Bootstrap using Sidr plugin

回复于 2024-04-29T17:59:24+08:00
0

我们开始使用slideout.js它不是直接使用Bootstrap，因为它是无依赖性的 . 但您可以将其与引导程序结合使用，例如仅在网站显示在移动设备上时显示滑出按钮 .

你可以找到here或here .

回复于 2024-04-29T17:59:24+08:00
8

您可能也对此jQuery插件和CSS框架感兴趣：https://myflashlabs.github.io/24component-bars/

它可以帮助您创建完全响应的画布外导航，以及许多适用于不同类型项目的其他菜单类型 .

当那里已经有解决方案时，您不需要从头开始编写所有代码！

回复于 2024-04-29T17:59:24+08:00
0

没有插件，我们可以做到这一点

见链接bootstrap multi-level responsive menu for mobile phone with slide toggle for mobile
[$('[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
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>

<html lang="en">

<head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

<body> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid">  <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="slide-collapse" data-target="#slide-navbar-collapse" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div>  <div class="collapse navbar-collapse" id="slide-navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="#">Link <span class="sr-only">(current)</span></a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> <li class="dropdown-submenu"> <a href="#" data-toggle="dropdown">SubMenu 1</span></a> <ul class="dropdown-menu"> <li><a href="#">3rd level dropdown</a></li> <li><a href="#">3rd level dropdown</a></li> <li><a href="#">3rd level dropdown</a></li> <li><a href="#">3rd level dropdown</a></li> <li><a href="#">3rd level dropdown</a></li> <li class="dropdown-submenu"> <a href="#" data-toggle="dropdown">SubMenu 2</span></a> <ul class="dropdown-menu"> <li><a href="#">3rd level dropdown</a></li> <li><a href="#">3rd level dropdown</a></li> <li><a href="#">3rd level dropdown</a></li> <li><a href="#">3rd level dropdown</a></li> <li><a href="#">3rd level dropdown</a></li> </ul> </li> </ul> </li> </ul> </li> <li><a href="#">Link</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div>  </div>  </nav> <div class="menu-overlay"></div> <div class="col-md-12"> <h1>Resize the window to see the result</h1> <p> 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. </p> <p> 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. </p> <p> 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. </p> <p> 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. </p> <p> 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. </p> </div>

</body>

</html>](https://jsfiddle.net/syamacl45/x507ndp3/)

回复于 2024-04-29T17:59:24+08:00

Bootstrap 3在Mobile上的菜单/导航栏中滑动

7 回答

演示：http：//jsbin.com/OjOTIGaP/1/edit

https://jsbin.com/seqola/2/edit ---稍微改善版本

相关问题