Bootstrap 3 สไลด์ในเมนู / Navbar บนมือถือ [ปิด]

119

ปิด. คำถามนี้ต้องการรายละเอียดการแก้จุดบกพร่อง ขณะนี้ยังไม่ยอมรับคำตอบ

ต้องการปรับปรุงคำถามนี้หรือไม่ อัปเดตคำถามเพื่อให้เป็นหัวข้อสำหรับ Stack Overflow

ปิดให้บริการเมื่อปีที่แล้ว

ฉันกำลังสร้างแอพมือถือที่ใช้เบราว์เซอร์และฉันตัดสินใจใช้ Bootstrap 3 เป็นเฟรมเวิร์ก css สำหรับการออกแบบ Bootstrap 3 มาพร้อมกับคุณสมบัติ "ตอบสนอง" ที่ยอดเยี่ยมในแถบนำทางซึ่งจะยุบลงโดยอัตโนมัติหากตรวจพบ "จุดพัก" ที่เฉพาะเจาะจงเกี่ยวกับความละเอียดของเบราว์เซอร์ ใช้งานได้ในหลายสถานการณ์

แต่คุณสังเกตเห็นไหมว่าแอปบนอุปกรณ์เคลื่อนที่ที่ใช้เบราว์เซอร์จำนวนมากมีการนำทางหลักซ่อนอยู่ทางด้านซ้ายของหน้าจอและเมื่อกดไอคอนสลับ (สลับ) ที่มุมบนขวาการนำทางหลักจะเลื่อนออกไปที่ ทางขวาประมาณ 2/3 ของทางเข้าสู่หน้าจอ? นี่เป็นโซลูชันที่ได้รับความนิยมมากขึ้นสำหรับการนำทางผ่านแอพที่ใช้เบราว์เซอร์บนอุปกรณ์มือถือและฉันคิดว่าในทางทฤษฎีแล้วมันควรจะค่อนข้างง่ายในการปรับเปลี่ยน bootstrap css / js เพื่อรองรับคุณสมบัติการยุบการนำทางเวอร์ชันนี้

คุณสมบัติเหล่านี้สามารถใช้งานได้อย่างไร? ดูเหมือนว่าไม่ควรดัดแปลงมากเกินไป ฉันอยากได้ยินความคิด / แนวทางแก้ไขของคุณในเรื่องนี้ นอกจากนี้ฉันคิดว่ามันจะเป็นวิธีแก้ปัญหาระยะยาวที่ยอดเยี่ยมสำหรับ Bootstrap ที่จะใช้เป็นคุณสมบัติในตัว

น่าเสียดายที่ฉันไม่ได้พยายามสร้างฟีเจอร์นี้เพราะในขณะที่ฉันคุ้นเคยกับเทคโนโลยีเหล่านี้ แต่ฉันส่วนใหญ่เป็นนักพัฒนา PHP / MySQL และฉันเชื่อว่าคุณสมบัติที่มีประโยชน์เท่าที่ควรจะสร้างโดยผู้เชี่ยวชาญที่มีข้อมูลเชิงลึกที่ฉันไม่มี ในฐานะผู้พัฒนาส่วนหน้า

— Armin
แหล่งที่มา

โปรดรวมมาร์กอัป CSS / HTML ปัจจุบันของคุณ นอกจากนี้ "คำถามที่ขอรหัสต้องแสดงให้เห็นถึงความเข้าใจเพียงเล็กน้อยเกี่ยวกับปัญหาที่กำลังแก้ไขรวมถึงวิธีแก้ปัญหาที่พยายามทำไมจึงไม่ได้ผลและผลลัพธ์ที่คาดหวัง"

— Dryden Long

ฉันเพิ่งทำสิ่งนี้เมื่อไม่นานมานี้มีหลายสิ่งที่เกี่ยวข้องโดยเฉพาะอย่างยิ่งหากการนำทางได้รับการแก้ไขจะต้องยกเลิกการแก้ไขเมื่อเลื่อนเข้ามามิฉะนั้นคุณจะไม่สามารถเข้าถึงเมนูที่ยาวขึ้นได้ ฉันใช้ Boostrap ตลอดเวลา แต่ไม่ใช่เมนูของพวกเขาคุณสามารถเพิ่มสไลด์ในเมนูด้วยตัวคุณเองและแก้ไขได้เช่นกัน jsbin.com/eHAfIhI/1/ แก้ไข

— Christina

เมื่อคุณดู CSS คุณจะสังเกตเห็นว่าความกว้างขั้นต่ำเริ่มต้นที่ Bootstrap เริ่มต้นซึ่งเป็น 768px โปรดสังเกตว่ามีการปรับเปลี่ยนแบบฟอร์มที่ความกว้างสูงสุดเนื่องจากจะดูผิดเพี้ยน มีการใช้เปอร์เซ็นต์บวกเนื่องจากอุปกรณ์ที่เล็กที่สุดคือ 240px

— Christina

มี Bootstrap fork ยอดนิยม - Jasny Bootstrap ส้อมมีการใช้งานนอกผ้าใบหลายแบบ (สไลด์เข้าผลักดันเปิดเผย): jasny.github.io/bootstrap/javascript/#offcanvas

— PetroCliff

เป็นรูปแบบ UI ที่เรียกว่า Drawer material.io/guidelines/patterns/navigation-drawer.html

— Bruno Peres

คำตอบ:

138

นี่เป็นโครงการของฉันเองและฉันกำลังแบ่งปันที่นี่ด้วย

สาธิต: http://jsbin.com/OjOTIGaP/1/edit

ปัญหานี้มีปัญหาหลังจาก 3.2 ดังนั้นปัญหาด้านล่างอาจทำงานได้ดีกว่าสำหรับคุณ:

https://jsbin.com/seqola/2/edit --- BETTER VERSION เล็กน้อย

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


    });

});

— คริสตินา
แหล่งที่มา

วิธีใดที่จะทำให้สิ่งนี้ตอบสนองเพื่อให้บนเดสก์ท็อปแถบนำทางจะแสดงภายใต้กราฟิกสแปลช แต่ในอุปกรณ์เคลื่อนที่แถบนำทางจะมีลักษณะเป็นแถบด้านข้างนี้หรือไม่?

— kenyee

ใช่. คุณจะออกแบบภายในความกว้างขั้นต่ำ

— Christina

นั่นเป็นโครงการของฉันเองและฉันกำลังแบ่งปันวิธีนี้ การสนับสนุนความช่วยเหลือเพิ่มเติม ฯลฯ ขึ้นอยู่กับแต่ละคน

— Christina

Cab ขอบคุณมากนี่เป็นการมีส่วนร่วมที่เหลือเชื่อจริงๆ !! ตั้งแต่นั้นมาฉันได้ทำการวิจัยเพิ่มเติมและพบว่าฟีเจอร์ต่างๆในเฟรมเวิร์ก Sencha นั้นใกล้เคียงกว่ามาก (แต่ก็ยังไม่สมบูรณ์แบบ) กับคุณสมบัติที่ฉันคิดไว้ โดยเฉพาะอย่างยิ่งแอป facebook บน Android sencha เรียกภาพเคลื่อนไหวว่า "เปิดเผย" / "ปก" ฉันสังเกตเห็นความแตกต่างสองสามประการระหว่างตัวอย่างเวอร์ชันปัจจุบันของคุณกับภาพเคลื่อนไหวในกรอบงาน sencha (หรือแอป facebook) โดยเฉพาะอย่างยิ่งเมนูด้านซ้ายเมื่อเปิดอยู่และเนื้อหาหลักทางด้านขวาจะเลื่อนพร้อมกัน (1)

— Armin

มันใช้งานได้อย่างสวยงามขอบคุณ! ฉันรวม css และ js เป็นไฟล์แยกต่างหากในรหัสของฉันและเรียกสิ่งนี้ผ่าน requirejs ฉันต้องทำการแก้ไขเพียงเล็กน้อยกับมาร์กอัปการนำทาง bootstrap ที่มีอยู่ของฉัน คุณได้ทำงานที่ซับซ้อนมากและน่าประทับใจ คุณควรทำให้พร้อมใช้งานเป็นปลั๊กอิน bootstrap คุณเปิดการจัดหาสิ่งนี้หรือไม่ Github?

— Manuel Hernandez

Bootstrap 4

สร้าง "ลิ้นชัก" แถบด้านข้าง navbar ที่ตอบสนองใน Bootstrap 4 หรือไม่
Bootstrap เมนูแนวนอนจะยุบไปที่ sidemenu

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

— ซิม
แหล่งที่มา

ตัวอย่างนอกแคนวาสนี้ก็ยอดเยี่ยมเช่นกัน! นี่เป็นสิ่งที่ใกล้เคียงกับสิ่งที่ฉันกำลังมองหามากขึ้น แต่มีสองประเด็นที่ฉันได้แสดงความคิดเห็นต่อโพสต์ของ Cab ยังคงแพร่หลายอยู่ เมนูด้านข้างและพื้นที่เนื้อหาหลักไม่เลื่อนอย่างอิสระ นอกจากนี้ยังเป็นสไลด์ซ้าย / ขวามากกว่าภาพเคลื่อนไหวปก / เปิดเผย แจ้งให้เราทราบสิ่งที่คุณคิด! :) ขอบคุณอีกครั้งสำหรับการมีส่วนร่วมของคุณ Skelly! กระทู้นี้มีข้อมูลเชิงลึกและเป็นประโยชน์อย่างเหลือเชื่อ!

— Armin

แก้ไข: ตอนนี้ฉันเพิ่งเห็นเวอร์ชัน Facebook ที่คุณโพสต์แล้วเลื่อนออกจากพื้นที่เนื้อหาหลัก! นอกจากนี้ฉันสงสัยว่าค่าเริ่มต้นจะมองไม่เห็นทั้งหมดหรือไม่โดยไม่คำนึงถึงความละเอียดของเบราว์เซอร์ปัจจุบันและให้สลับโดยไอคอนที่อยู่ด้านบนขวาของตัวอย่างนี้ และปุ่มสลับนั้นย้ายไปทางซ้ายบนหรือไม่? เป็นไปได้หรือไม่ นั่นจะเป็นสิ่งที่ฉันต้องการเพื่อก้าวต่อไปกับโครงการนี้ ปัญหาเดียวที่ฉันพบคือแถบเลื่อนแนวนอนจะปรากฏขึ้นเมื่อคุณสลับเมนู ต้องมีวิธีป้องกันเช่นกัน

— Armin

ดีใจที่สิ่งเหล่านี้ช่วย ฉันแน่ใจว่าเป็นไปได้ที่จะบรรลุสิ่งที่คุณต้องการ แต่จะต้องปรับแต่งบ้าง ผมขอแนะนำให้เล่นกับ Bootply ( bootply.com/96266 ) คุณควรจะปรับเบรกพอยต์สำหรับแถบด้านข้างได้โดยการปรับแบบสอบถามสื่อ@media screen and (max-width: 768px) {.. ใน CSS

— Zim

หากไม่มี Plugin เราสามารถทำได้ bootstrap เมนูตอบสนองหลายระดับสำหรับโทรศัพท์มือถือพร้อมสไลด์สลับสำหรับมือถือ:

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

ขยายข้อมูลโค้ด

อ้างอิง JS fiddle

— Syam S.
แหล่งที่มา