Bootstrap 3 Slide in Menu / Navbar on Mobile [关闭]

Posted 2023-03-06

【中文标题】Bootstrap 3 Slide in Menu / Navbar on Mobile [关闭]

【英文标题】：Bootstrap 3 Slide in Menu / Navbar on Mobile [closed]

【发布时间】：2014-01-18 17:46:17

【问题描述】：

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

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

如何实现这些功能？似乎不需要过多的修改。我真的很想听听您对此事的想法/解决方案。另外，我认为将 Bootstrap 实现为内置功能将是一个很好的长期解决方案。

很遗憾，我没有尝试创建此功能，因为虽然我熟悉这些技术，但我主要是 php/mysql 开发人员，我相信像这样有用的功能应该由我不具备洞察力的专家构建'没有作为前端开发人员。

【问题讨论】：

请包含您当前的 CSS/html 标记。此外，“要求代码的问题必须表明对正在解决的问题有最低限度的了解。包括尝试的解决方案为什么它们不起作用，以及预期的结果。”

我最近做了这个，有很多事情要做，特别是如果导航是固定的，当它滑入时它必须取消修复，否则你将无法到达更长的菜单。我一直使用 Boostrap 但不使用他们的菜单，您可以自己在菜单中添加幻灯片并修改它们。 jsbin.com/eHAfIhI/1/edit

当您查看 CSS 时，您会注意到最小宽度在默认 Bootstrap 768 像素处开始生效。请注意，在 max-width 处对表单进行了调整，否则它看起来很糟糕。加上百分比被用作最小的设备是 240 像素。

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

是一个叫做Draw​​er的UI模式material.io/guidelines/patterns/navigation-drawer.html

【参考方案1】：

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

演示：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');
        


    );

);

【讨论】：

有什么方法可以让它响应，以便在桌面上，导航栏显示在启动图形下，但在移动设备上，导航栏看起来像这个边栏？

是的。你会在最小宽度内设计

那是我自己的项目，我以这种方式分享它。任何支持、进一步的帮助等都取决于每个人。

Cab，非常感谢您，这真是一个了不起的贡献！从那以后，我做了一些更多的研究，发现 sencha 框架中的功能更接近（但仍然不是很完美）我想到的功能。特别是 android 上的 facebook 应用程序，sencha 将动画称为“显示”/“封面”。我注意到您的示例的当前版本与 sencha 框架（或 facebook 应用程序）中的动画之间存在一些差异。特别是左侧菜单打开时和右侧的主要内容一起滚动。 (1)

这很好用，谢谢！我将 css 和 js 作为单独的文件包含在我的代码中，甚至通过 requirejs 调用它。我只需要对现有的引导导航标记进行最少的修改。您使一项极其复杂的任务变得微不足道，这令人印象深刻。您应该将其作为引导插件提供。你是开源的吗？ Github？

【参考方案2】：

Bootstrap 5 Beta 3（2021 年更新）

介绍新的Bootstrap 5 Offcanvas Component

引导程序 4

Create a responsive navbar sidebar "drawer" in Bootstrap 4?Bootstrap horizontal menu collapse to sidemenu

引导程序 3

我认为您正在寻找的内容通常被称为“画布外”布局。这是官方 Bootstrap 文档中的标准画布外示例：http://getbootstrap.com/examples/offcanvas/

“官方”示例使用右侧边栏开关，与顶部导航栏菜单分开。我还发现了这些从左侧滑入的画布外变体，可能更接近您要查找的内容..

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

【讨论】：

这个非画布示例也非常棒！这更接近我所寻找的，但我在我的 cmets 中对 Cab 的职位提出的几点仍然很普遍。侧面菜单和主要内容区域不会独立滚动。此外，它更像是向左/向右滑动而不是封面/显示动画。让我知道你的想法！ :) 再次感谢您对 Skelly 的贡献！这个帖子非常有洞察力和帮助！

编辑：我刚刚看到你发布的 facebook 版本确实独立于主要内容区域滚动！另外，我想知道它是否可以在默认情况下完全不可见，无论当前的浏览器分辨率如何，并通过本示例右上角的那个图标来切换它。那个切换按钮移动到左上角？这可能吗？这几乎正​​是我推进这个项目所需要的。我看到的唯一问题是切换菜单时会显示水平滚动条。也必须有办法防止这种情况发生。

很高兴这些帮助。我确信有可能实现你想要的，但这需要一些调整。我建议使用 Bootply (bootply.com/96266)。您应该可以通过调整 CSS 中的媒体查询 @media screen and (max-width: 768px) .. 来调整侧边栏的断点。

【参考方案3】：

没有插件，我们可以做到这一点；用于手机的引导多级响应式菜单，带有用于移动设备的滑动切换：

$('[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>

Reference JS fiddle