如何从左侧而不是从顶部滑动导航栏？

Posted 2023-03-05

【中文标题】如何从左侧而不是从顶部滑动导航栏？

【英文标题】：How to slide nav bar from left instead from top?

【发布时间】：2015-10-16 22:41:43

【问题描述】：

Bootstrap 支持从顶部切换导航栏。屏幕小怎么能从左边滑？

例如：

在上面提供的屏幕截图中，当屏幕调整大小时，导航栏会切换并从顶部向下滑动。我宁愿希望导航栏从左侧滑动。如何在 Bootstrap 中实现这个功能？

目前，根据代码，导航栏从顶部滑动。这是我的代码：

<nav class="navbar navbar-site navbar-default" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle" type="button"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
            <a href="% url 'index' % " class="navbar-brand logo logo-title">
            <span class="logo-icon"><i class="icon icon-search-1 ln-shadow-logo shape-0"></i> </span> <span>Companyname </span> </a> 
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                % if user.is_authenticated %
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <span>user.first_name</span> <i class="icon-user fa"></i> <i class=" icon-down-open-big fa"></i></a>
                        <ul class="dropdown-menu user-menu">
                            <li class="active"><a href="account-home.html"><i class="icon-home"></i> Personal Home </a></li>
                            <li><a href="statements.html"><i class=" icon-money "></i> Payment history </a></li>
                            <li><a href="% url 'logout' %"> <i class="glyphicon glyphicon-off"></i> Signout </a></li>
                        </ul>
                    </li>
                % else %
                    <li><a href="% url 'login' %">Login</a></li>
                    <li><a href="% url 'signup' %">Signup</a></li>
                % endif %
                <li class="postadd"><a class="btn btn-block btn-border btn-post btn-danger" href="% url 'post_ad' %">Post Free Add</a></li>
            </ul>
        </div>
    </div>
</nav>

【参考方案1】：

简单。从

更改默认行为

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

slide-collapse 我们现在要实现的功能

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

菜单包含在 ID 为 my-navbar-collapse 的 div 中。请注意，使用 id 而不是类选择器将提高可访问性，因为引导程序会将 ARIA 状态（展开/折叠）附加到菜单 自动。

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

引导程序中的 .collapse 类确保菜单最初是隐藏的。

---

代码：

然后在页脚某处粘贴以下 javascript：

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

以及以下 CSS 属性：

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

一些提示：

最好的办法是进行响应式查询，其中智能手机的菜单宽度为 100%，而不是始终为 280 像素。它就像一个魅力。 如果您有桌面的水平菜单，而滑块只适用于较小的设备，您可以轻松利用 @grid-float-breakpoint and @grid-float-breakpoint-max Bootstrap LESS 变量

【讨论】：

这看起来很简单，但是，我无法让它工作并且控制台中没有错误，所以我不知道它有什么问题。您有可以发布链接的示例吗？谢谢！

我在这里实现了这个karriere.milchundzucker.de。检查一下，也许您会发现您的代码有什么问题。故障排除还可以查看您的 Javascript 是否正常工作。确保将您的 Javascript 代码放在页面的最底部或确保在文档就绪事件中运行它

谢谢你的例子，Hrvoje。我一定会检查的。当我无法让您的解决方案发挥作用时，我尝试了几个小时使用 css3 转换和定位来做不同的事情，即：设置左边距等（width:300px, left:-300px, transform: translateX(300px) or left: 0;, transform: translateX(0) -- 不是按这个顺序，而是不同的值这些属性），但我仍然没有让 div 从左侧滑入。是的，我的 javascript 在页面底部，我也嵌入了一些，所以也在检查那个顺序。

很好的答案。除了在打开菜单时为宽度设置动画之外，我还需要做一些额外的事情，所以我选择了$navMenuCont.toggleClass('open')，这样我就可以通过定位.open 类来处理css 中的所有内容。您也可以在打开菜单时在 CSS 中进行转换。

【参考方案2】：

这是完整的例子

$(document).ready(function() 
  $('#slide-nav.navbar-inverse').after($('<div class="inverse" id="navbar-height-col"></div>'));
  $('#slide-nav.navbar-default').after($('<div id="navbar-height-col"></div>'));

  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
  

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Menu</a>
        </li>
        <li><a href="#">Menu</a>
        </li>
        <li><a href="#">Menu</a>
        </li>

      </ul>

    </div>
  </div>
</div>
<div id="page-content">
  <div class="container">
    <h1 class="no-margin-top">Left Sidebar menu</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid sunt minus libero quas soluta blanditiis voluptatibus, eveniet sint tempora! Maxime!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad laudantium deleniti ratione ea voluptas, dolore expedita nisi? Veniam, doloremque, reiciendis.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis nam esse molestiae voluptatem maiores fugiat nulla commodi magni impedit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora ducimus iure ipsa ea officia aliquid quibusdam nostrum obcaecati itaque temporibus!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid sunt minus libero quas soluta blanditiis voluptatibus, eveniet sint tempora! Maxime!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad laudantium deleniti ratione ea voluptas, dolore expedita nisi? Veniam, doloremque, reiciendis.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis nam esse molestiae voluptatem maiores fugiat nulla commodi magni impedit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora ducimus iure ipsa ea officia aliquid quibusdam nostrum obcaecati itaque temporibus!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid sunt minus libero quas soluta blanditiis voluptatibus, eveniet sint tempora! Maxime!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad laudantium deleniti ratione ea voluptas, dolore expedita nisi? Veniam, doloremque, reiciendis.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis nam esse molestiae voluptatem maiores fugiat nulla commodi magni impedit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora ducimus iure ipsa ea officia aliquid quibusdam nostrum obcaecati itaque temporibus!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid sunt minus libero quas soluta blanditiis voluptatibus, eveniet sint tempora! Maxime!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad laudantium deleniti ratione ea voluptas, dolore expedita nisi? Veniam, doloremque, reiciendis.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis nam esse molestiae voluptatem maiores fugiat nulla commodi magni impedit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora ducimus iure ipsa ea officia aliquid quibusdam nostrum obcaecati itaque temporibus!</p>
  </div>
</div>

【参考方案3】：

尝试以下内容并查看以下链接以获取更多说明-

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

看看下面的 Github 链接来修复导航栏的左侧或右侧

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

另一个有用的链接 - Nav Sidebar With Toggle Button

【参考方案4】：

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

查看链接

Bootstrap multi-level responsive menu with left side slide toggle for mobile devices

$('[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>
<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">
        <!-- Brand and toggle get grouped for better mobile display -->
        <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>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <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>
        <!-- /.navbar-collapse -->
      </div>
      <!-- /.container-fluid -->
    </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>

【参考方案5】：

引导程序 4（2020 年更新）

IMO 最简单的方法是覆盖 Bootstrap 折叠动画，使其从左向右过渡（宽度而不是高度）。当使用.collapse.show 时，导航栏始终为display:block，而不是切换display:block，这使您可以根据需要定位并使用两个折叠方向的过渡...

打开菜单：.collapse - .collapsing - .collapse.show 关闭菜单：.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（全宽）https://codeply.com/p/BvPCPA1wgZ（全高）

【参考方案6】：

用于从右向左滑动：

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

下载源文件：http://www.themeswild.com/read/slide-navigation-left-to-right

【讨论】：

您的答案必须全部大写吗？

:) ，嘿，它只是为了突出显示目的。

【参考方案7】：

这里有一个类似的问题：Bootstrap 3 Slide in Menu / Navbar on Mobile 接受的答案是使用 jasny bootstrap。如果 Jasny 不是你的那杯茶，那还有其他答案。

【参考方案8】：

请参考CODEPEN。需要注意以下几点：

Animate.css 需要库。特别是 slideInLeft 和 slideOutLeft 动画。

使用 dropdown 而不是 Bootstrap 的 collapse 组件。

通过在其上应用position-static 类来设置dropdown-menu 元素static。

利用在显示dropdown-menu 时应用于dropdown 元素的show 类。

利用left CSS 属性来执行转换。基本上，我们将在.dropdown.show .dropdown-menu 上设置left:-100%，在.dropdown .dropdown-menu 上设置left:0px

截图：

注意：您可以从 animate.css 试用 dropdown-menu 的其他动画。

祝你好运……