Bootstrap 3 Slide in Menu Navbar on Mobile

Question

I am building a browser-based mobile app and I ve decided to use Bootstrap 3 as the css framework for the design  Bootstrap 3 comes with a great  responsive  feature in the navigation bar where it collapses automatically if it detects a specific  break point  regarding the resolution of the browser  It works in a lot of situations   But have you noticed lately how a lot of browser-based mobile apps have the primary navigation hidden out of the left of the screen  and when the toggle icon is pressed  toggled  in the top-right corner  the primary navigation slides out to the right about 2 3 of the way into the screen  This is an increasingly popular solution for navigating through browser-based apps on mobile devices and I think in theory it should be pretty easy to modify bootstrap css js to accommodate this version of the navigation collapse feature   How can these feature be implemented  It seems like it shouldn t take too much modification  I d really like to hear your thoughts solutions on this matter  Also  I think it would be a great long-term solution for Bootstrap to implement as a built-in feature   Unfortunately I have not made any attempts to create this feature because while I am familiar with these technologies  I am predominantly a PHP MySQL developer and I believe a feature as useful as this should be built by experts with insight that I don t have as a front-end developer

User · Answer

Without Plugin  we can do this  bootstrap multi-level responsive menu for mobile phone with slide toggle for mobile    x000D   x000D      data-toggle  slide-collapse     on  click   function     x000D     navMenuCont       this  data  target     x000D     navMenuCont animate   x000D       width    toggle  x000D       350   x000D        menu-overlay   fadeIn 500   x000D      x000D   x000D      menu-overlay   click function event    x000D        navbar-toggle   trigger  click    x000D        menu-overlay   fadeOut 500   x000D      x000D   x000D     if    window  width    gt   767    x000D            ul nav li dropdown   hover function     x000D               this  find   gt  dropdown-menu   stop true  true  delay 200  fadeIn 500   x000D            function     x000D               this  find   gt  dropdown-menu   stop true  true  delay 200  fadeOut 500   x000D             x000D   x000D            ul nav li dropdown-submenu   hover function     x000D               this  find   gt  dropdown-menu   stop true  true  delay 200  fadeIn 500   x000D            function     x000D               this  find   gt  dropdown-menu   stop true  true  delay 200  fadeOut 500   x000D             x000D   x000D   x000D            ul dropdown-menu  data-toggle dropdown    on  click   function event    x000D             event preventDefault    x000D             event stopPropagation    x000D               this  parent   siblings   removeClass  open    x000D               this  parent   toggleClass  open    x000D                b   this  toggleClass  caret caret-up    x000D             x000D       x000D   x000D       window  resize function     x000D         if    this  width    gt   767    x000D                ul nav li dropdown   hover function     x000D                   this  find   gt  dropdown-menu   stop true  true  delay 200  fadeIn 500   x000D                function     x000D                   this  find   gt  dropdown-menu   stop true  true  delay 200  fadeOut 500   x000D                 x000D           x000D         x000D   x000D  var windowWidth     window  width    x000D  if  windowWidth  gt  767    x000D          ul dropdown-menu  data-toggle dropdown    on  click   function event    x000D           event preventDefault    x000D           event stopPropagation    x000D             this  parent   siblings   removeClass  open    x000D             this  parent   toggleClass  open    x000D              b   this  toggleClass  caret caret-up    x000D           x000D   x000D       ul nav li dropdown   hover function     x000D        this  find   gt  dropdown-menu   stop true  true  delay 200  fadeIn 500   x000D       function     x000D        this  find   gt  dropdown-menu   stop true  true  delay 200  fadeOut 500   x000D        x000D   x000D       ul nav li dropdown-submenu   hover function     x000D        this  find   gt  dropdown-menu   stop true  true  delay 200  fadeIn 500   x000D       function     x000D        this  find   gt  dropdown-menu   stop true  true  delay 200  fadeOut 500   x000D        x000D   x000D   x000D       ul dropdown-menu  data-toggle dropdown    on  click   function event    x000D      event preventDefault    x000D      event stopPropagation    x000D        this  parent   siblings   removeClass  open    x000D        this  parent   toggleClass  open    x000D            b   this  toggleClass  caret caret-up    x000D        x000D    x000D  if  windowWidth  lt  767    x000D       ul dropdown-menu  data-toggle dropdown    on  click   function event    x000D      event preventDefault    x000D      event stopPropagation    x000D        this  parent   siblings   removeClass  open    x000D        this  parent   toggleClass  open    x000D            b   this  toggleClass  caret caret-up    x000D        x000D    x000D   x000D         dropdown a   append  Some text    x000D   media only screen and  max-width  767px    x000D     slide-navbar-collapse   x000D      position  fixed  x000D      top  0  x000D      left  15px  x000D      z-index  999999  x000D      width  280px  x000D      height  100   x000D      background-color   f9f9f9  x000D      overflow  auto  x000D      bottom  0  x000D      max-height  inherit  x000D      x000D     menu-overlay   x000D      display  none  x000D      background-color   000  x000D      bottom  0  x000D      left  0  x000D      opacity  0 5  x000D      filter  alpha opacity 50   x000D         IE7  amp  8    x000D      position  fixed  x000D      right  0  x000D      top  0  x000D      z-index  49  x000D      x000D     navbar-fixed-top   x000D      position  initial  important  x000D      x000D     navbar-nav  open  dropdown-menu   x000D      background-color   ffffff  x000D      x000D    ul nav navbar-nav li   x000D      border-bottom  1px solid  eee  x000D      x000D     navbar-nav  open  dropdown-menu  dropdown-header  x000D     navbar-nav  open  dropdown-menu gt li gt a   x000D      padding  10px 20px 10px 15px  x000D      x000D    x000D   x000D   dropdown-submenu   x000D    position  relative  x000D    x000D   x000D   dropdown-submenu  dropdown-menu   x000D    top  0  x000D    left  100   x000D    margin-top  -1px  x000D    x000D   x000D  li dropdown a   x000D    display  block  x000D    position  relative  x000D    x000D   x000D  li dropdown gt a before   x000D    content    f107   x000D    font-family  FontAwesome  x000D    position  absolute  x000D    right  6px  x000D    top  5px  x000D    font-size  15px  x000D    x000D   x000D  li dropdown-submenu gt a before   x000D    content    f107   x000D    font-family  FontAwesome  x000D    position  absolute  x000D    right  6px  x000D    top  10px  x000D    font-size  15px  x000D    x000D   x000D  ul dropdown-menu li   x000D    border-bottom  1px solid  eee  x000D    x000D   x000D   dropdown-menu   x000D    padding  0px  x000D    margin  0px  x000D    border  none  important  x000D    x000D   x000D  li dropdown open   x000D    border-bottom  0px  important  x000D    x000D   x000D  li dropdown-submenu open   x000D    border-bottom  0px  important  x000D    x000D   x000D  li dropdown-submenu gt a   x000D    font-weight  bold  important  x000D    x000D   x000D  li dropdown gt a   x000D    font-weight  bold  important  x000D    x000D   x000D   navbar-default  navbar-nav gt li gt a   x000D    font-weight  bold  important  x000D    padding  10px 20px 10px 15px  x000D    x000D   x000D  li dropdown gt a before   x000D    content    f107   x000D    font-family  FontAwesome  x000D    position  absolute  x000D    right  6px  x000D    top  9px  x000D    font-size  15px  x000D    x000D   x000D   media  min-width  767px    x000D    li dropdown-submenu gt a   x000D      padding  10px 20px 10px 15px  x000D      x000D    li dropdown gt a before   x000D      content    f107   x000D      font-family  FontAwesome  x000D      position  absolute  x000D      right  3px  x000D      top  12px  x000D      font-size  15px  x000D      x000D    x000D   lt  DOCTYPE html gt  x000D   lt html lang  en  gt  x000D   x000D     lt head gt  x000D       lt title gt Bootstrap Example lt  title gt  x000D       lt meta charset  utf-8  gt  x000D       lt meta name  viewport  content  width device-width  initial-scale 1  gt  x000D       lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  gt  x000D       lt script src  https   ajax googleapis com ajax libs jquery 3 2 1 jquery min js  gt  lt  script gt  x000D       lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 7 js bootstrap min js  gt  lt  script gt  x000D       lt link rel  stylesheet  href  https   cdnjs cloudflare com ajax libs font-awesome 4 7 0 css font-awesome min css  gt  x000D   x000D     lt  head gt  x000D   x000D     lt body gt  x000D       lt nav class  navbar navbar-default navbar-fixed-top  gt  x000D         lt div class  container-fluid  gt  x000D           lt  -- Brand and toggle get grouped for better mobile display -- gt  x000D           lt div class  navbar-header  gt  x000D             lt button type  button  class  navbar-toggle collapsed  data-toggle  slide-collapse  data-target   slide-navbar-collapse  aria-expanded  false  gt  x000D                       lt span class  sr-only  gt Toggle navigation lt  span gt  x000D                       lt span class  icon-bar  gt  lt  span gt  x000D                       lt span class  icon-bar  gt  lt  span gt  x000D                       lt span class  icon-bar  gt  lt  span gt  x000D                   lt  button gt  x000D             lt a class  navbar-brand  href     gt Brand lt  a gt  x000D           lt  div gt  x000D           lt  -- Collect the nav links  forms  and other content for toggling -- gt  x000D           lt div class  collapse navbar-collapse  id  slide-navbar-collapse  gt  x000D             lt ul class  nav navbar-nav  gt  x000D               lt li gt  lt a href     gt Link  lt span class  sr-only  gt  current  lt  span gt  lt  a gt  lt  li gt  x000D               lt li gt  lt a href     gt Link lt  a gt  lt  li gt  x000D               lt li class  dropdown  gt  x000D                 lt a href     class  dropdown-toggle  data-toggle  dropdown  role  button  aria-haspopup  true  aria-expanded  false  gt Dropdown lt  span gt  lt  a gt  x000D                 lt ul class  dropdown-menu  gt  x000D                   lt li gt  lt a href     gt Action lt  a gt  lt  li gt  x000D                   lt li gt  lt a href     gt Another action lt  a gt  lt  li gt  x000D                   lt li gt  lt a href     gt Something else here lt  a gt  lt  li gt  x000D                   lt li gt  lt a href     gt Separated link lt  a gt  lt  li gt  x000D                   lt li gt  lt a href     gt One more separated link lt  a gt  lt  li gt  x000D                   lt li class  dropdown-submenu  gt  x000D                     lt a href     data-toggle  dropdown  gt SubMenu 1 lt  span gt  lt  a gt  x000D                     lt ul class  dropdown-menu  gt  x000D                       lt li gt  lt a href     gt 3rd level dropdown lt  a gt  lt  li gt  x000D                       lt li gt  lt a href     gt 3rd level dropdown lt  a gt  lt  li gt  x000D                       lt li gt  lt a href     gt 3rd level dropdown lt  a gt  lt  li gt  x000D                       lt li gt  lt a href     gt 3rd level dropdown lt  a gt  lt  li gt  x000D                       lt li gt  lt a href     gt 3rd level dropdown lt  a gt  lt  li gt  x000D                       lt li class  dropdown-submenu  gt  x000D                         lt a href     data-toggle  dropdown  gt SubMenu 2 lt  span gt  lt  a gt  x000D                         lt ul class  dropdown-menu  gt  x000D                           lt li gt  lt a href     gt 3rd level dropdown lt  a gt  lt  li gt  x000D                           lt li gt  lt a href     gt 3rd level dropdown lt  a gt  lt  li gt  x000D                           lt li gt  lt a href     gt 3rd level dropdown lt  a gt  lt  li gt  x000D                           lt li gt  lt a href     gt 3rd level dropdown lt  a gt  lt  li gt  x000D                           lt li gt  lt a href     gt 3rd level dropdown lt  a gt  lt  li gt  x000D                         lt  ul gt  x000D                       lt  li gt  x000D                     lt  ul gt  x000D                   lt  li gt  x000D                 lt  ul gt  x000D               lt  li gt  x000D               lt li gt  lt a href     gt Link lt  a gt  lt  li gt  x000D             lt  ul gt  x000D             lt ul class  nav navbar-nav navbar-right  gt  x000D               lt li gt  lt a href     gt Link lt  a gt  lt  li gt  x000D               lt li class  dropdown  gt  x000D                 lt a href     class  dropdown-toggle  data-toggle  dropdown  role  button  aria-haspopup  true  aria-expanded  false  gt Dropdown lt  span gt  lt  a gt  x000D                 lt ul class  dropdown-menu  gt  x000D                   lt li gt  lt a href     gt Action lt  a gt  lt  li gt  x000D                   lt li gt  lt a href     gt Another action lt  a gt  lt  li gt  x000D                   lt li gt  lt a href     gt Something else here lt  a gt  lt  li gt  x000D                   lt li gt  lt a href     gt Separated link lt  a gt  lt  li gt  x000D                 lt  ul gt  x000D               lt  li gt  x000D             lt  ul gt  x000D           lt  div gt  x000D           lt  --   navbar-collapse -- gt  x000D         lt  div gt  x000D         lt  --   container-fluid -- gt  x000D       lt  nav gt  x000D       lt div class  menu-overlay  gt  lt  div gt  x000D       lt div class  col-md-12  gt  x000D         lt h1 gt Resize the window to see the result lt  h1 gt  x000D         lt p gt  x000D          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 x000D          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 x000D          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  x000D          condimentum condimentum neque  In maximus suscipit eros ut eleifend  Donec venenatis mauris nulla  ac bibendum metus bibendum vel  x000D         lt  p gt  x000D         lt p gt  x000D          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 x000D          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 x000D          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  x000D          condimentum condimentum neque  In maximus suscipit eros ut eleifend  Donec venenatis mauris nulla  ac bibendum metus bibendum vel  x000D         lt  p gt  x000D         lt p gt  x000D          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 x000D          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 x000D          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  x000D          condimentum condimentum neque  In maximus suscipit eros ut eleifend  Donec venenatis mauris nulla  ac bibendum metus bibendum vel  x000D         lt  p gt  x000D         lt p gt  x000D          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 x000D          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 x000D          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  x000D          condimentum condimentum neque  In maximus suscipit eros ut eleifend  Donec venenatis mauris nulla  ac bibendum metus bibendum vel  x000D         lt  p gt  x000D         lt p gt  x000D          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 x000D          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 x000D          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  x000D          condimentum condimentum neque  In maximus suscipit eros ut eleifend  Donec venenatis mauris nulla  ac bibendum metus bibendum vel  x000D         lt  p gt  x000D       lt  div gt  x000D   x000D     lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D    Reference JS fiddle

User · Answer

This was for my own project and I m sharing it here too  DEMO  http   jsbin com OjOTIGaP 1 edit This one had trouble after 3 2  so the one below may work better for you  https   jsbin com seqola 2 edit --- BETTER VERSION  slightly  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  gt   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   lt div class  quot navbar navbar-inverse navbar-fixed-top quot  role  quot navigation quot  id  quot slide-nav quot  gt     lt div class  quot container quot  gt      lt div class  quot navbar-header quot  gt       lt a class  quot navbar-toggle quot  gt          lt span class  quot sr-only quot  gt Toggle navigation lt  span gt         lt span class  quot icon-bar quot  gt  lt  span gt         lt span class  quot icon-bar quot  gt  lt  span gt         lt span class  quot icon-bar quot  gt  lt  span gt        lt  a gt       lt a class  quot navbar-brand quot  href  quot   quot  gt Project name lt  a gt      lt  div gt      lt div id  quot slidemenu quot  gt                   lt form class  quot navbar-form navbar-right quot  role  quot form quot  gt               lt div class  quot form-group quot  gt                 lt input type  quot search quot  placeholder  quot search quot  class  quot form-control quot  gt               lt  div gt               lt button type  quot submit quot  class  quot btn btn-primary quot  gt Search lt  button gt             lt  form gt             lt ul class  quot nav navbar-nav quot  gt        lt li class  quot active quot  gt  lt a href  quot   quot  gt Home lt  a gt  lt  li gt        lt li gt  lt a href  quot  about quot  gt About lt  a gt  lt  li gt        lt li gt  lt a href  quot  contact quot  gt Contact lt  a gt  lt  li gt        lt li class  quot dropdown quot  gt   lt a href  quot   quot  class  quot dropdown-toggle quot  data-toggle  quot dropdown quot  gt Dropdown  lt b class  quot caret quot  gt  lt  b gt  lt  a gt         lt ul class  quot dropdown-menu quot  gt          lt li gt  lt a href  quot   quot  gt Action lt  a gt  lt  li gt          lt li gt  lt a href  quot   quot  gt Another action lt  a gt  lt  li gt          lt li gt  lt a href  quot   quot  gt Something else here lt  a gt  lt  li gt          lt li class  quot divider quot  gt  lt  li gt          lt li class  quot dropdown-header quot  gt Nav header lt  li gt          lt li gt  lt a href  quot   quot  gt Separated link lt  a gt  lt  li gt          lt li gt  lt a href  quot   quot  gt One more separated link lt  a gt  lt  li gt          lt li gt  lt a href  quot   quot  gt Action lt  a gt  lt  li gt          lt li gt  lt a href  quot   quot  gt Another action lt  a gt  lt  li gt          lt li gt  lt a href  quot   quot  gt Something else here lt  a gt  lt  li gt          lt li class  quot divider quot  gt  lt  li gt          lt li class  quot dropdown-header quot  gt Nav header lt  li gt          lt li gt  lt a href  quot   quot  gt Separated link lt  a gt  lt  li gt          lt li gt  lt a href  quot   quot  gt One more separated link lt  a gt  lt  li gt          lt li gt  lt a href  quot   quot  gt Action lt  a gt  lt  li gt          lt li gt  lt a href  quot   quot  gt Another action lt  a gt  lt  li gt          lt li gt  lt a href  quot   quot  gt Something else here lt  a gt  lt  li gt          lt li class  quot divider quot  gt  lt  li gt          lt li class  quot dropdown-header quot  gt Nav header lt  li gt          lt li gt  lt a href  quot   quot  gt Separated link test long title goes here lt  a gt  lt  li gt          lt li gt  lt a href  quot   quot  gt One more separated link lt  a gt  lt  li gt         lt  ul gt        lt  li gt       lt  ul gt                 lt  div gt     lt  div gt    lt  div gt   jQuery   document  ready function              stick in the fixed 100  height behind the navbar but don t wrap it         slide-nav navbar  container   append     lt div id  quot navbar-height-col quot  gt  lt  div gt              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             quot  slide-nav quot   on  quot click quot   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  quot resize quot   function               if    window  width    gt  767  amp  amp      navbar-toggle   is   hidden                    selected  removeClass  slide-active

User · Answer

Bootstrap 4  Create a responsive navbar sidebar  quot drawer quot  in Bootstrap 4  Bootstrap horizontal menu collapse to sidemenu  Bootstrap 3  I think what you re looking for is generally known as an  off-canvas  layout  Here is the standard off-canvas example from the official Bootstrap docs  http   getbootstrap com examples offcanvas   The  official  example uses a right-side sidebar the toggle off and on separately from the top navbar menu  I also found these off-canvas variations that slide in from the left and may be closer to what you re looking for    http   www bootstrapzero com bootstrap-template off-canvas-sidebar http   www bootstrapzero com bootstrap-template facebook

[css] Bootstrap 3 Slide in Menu / Navbar on Mobile

Examples related to css

Examples related to twitter-bootstrap

Examples related to mobile

Examples related to twitter-bootstrap-3