iamphill / bootstrap-offcanvas Goto Github PK

Looks like this doesn't work with prototype.js , All jquery library functions I am using are working except for this one, I am trying to use this with magento shop.

I've just used this project in my bootstrap 4 project.

I had to do the following to make it work.

for the icon bar:

v4 doesn't use span class="icon-bar" anymore for it's hamburger menu. instead it uses ☰
There is no more styling done for the icon-bar class. I just copied over the styles from v3 and changed navbar-toggle to navbar-toggler.

    .navbar-toggler .icon-bar {
      background-color: #888;
    }
    .navbar-toggler .icon-bar {
      display: block;
      width: 22px;
      height: 2px;
      border-radius: 1px;
    }
    .navbar-toggler .icon-bar + .icon-bar {
      margin-top: 4px;
    }

icon-bar animation.

I had to move the sr-only Toggle navigation line to the bottom

    span class="icon-bar"
    span class="icon-bar"
    span class="icon-bar"
    span class="sr-only" Toggle navigation

as otherwise the the sr-only line was the 1st child etc.

.offcanvas-toggle.is-open .icon-bar:nth-child(1) {
  transform: rotate(45deg) translate(5px, 4px);
}
.offcanvas-toggle.is-open .icon-bar:nth-child(2) {
  opacity: 0;
}
.offcanvas-toggle.is-open .icon-bar:nth-child(3) {
  transform: rotate(-45deg) translate(4px, -4px);
}

css hierarchy different in v4

The offcanvas css assumes a structure like in v3. However v4 has quite a different navbar example.
if it could reduce the tight coupling to the one or the other would be good. Having examples for both v3 and v4 as well.

From http://v4-alpha.getbootstrap.com/components/navbar/

<nav class="navbar navbar-light bg-faded">
  <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">
    &#9776;
  </button>
  <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
    <a class="navbar-brand" href="#">Responsive navbar</a>
    <ul class="nav navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
    </ul>
  </div>
</nav>

compare to the old v3 example https://getbootstrap.com/components/#navbar

<nav class="navbar navbar-default">
  <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="collapse" data-target="#bs-example-navbar-collapse-1" 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="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><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 class="caret"></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 role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <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 class="caret"></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 role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

I implemented your plugin on two sites and noticed that on iPhone / iPad only the menu opens from left top to right bottom on toggle in stead of from left to right.

Hi, I am trying to convert my working index.html , bootstrap and offcanvas css and js. It is working fine on html but when I convert into the header.php on Wordpress using wp_bootstrap_navwalker.php. The offcanvas slides but does not show when collapes but does before collapsing though. I do not have a demo site at the moment but before are the files. Thanks in advance for the time:)

Below are the codes I've used.

Index.html

Toggle navigation

• Call us now
• Book an appointment
• Careers

• Home
• About
  • Test
  • Test
  • Test
  • Test
• Services
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
• Services
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
• Test
• Test

Header.php

    <header>                
         <nav class="navbar navbar-default" role="navigation">
            <div class="container">          
                <div class="navbar-header">
                    <a class="navbar-brand wow fadeInLeft" href="<?php echo home_url(); ?>">
                        <img src="<?php bloginfo('stylesheet_directory'); ?>/img/logo.png" width="269" height="94" class="img-responsive">
                    </a>
                     <button type="button" class="navbar-toggle offcanvas-toggle pull-right" data-toggle="offcanvas" data-target="#js-bootstrap-offcanvas">
                        <span class="sr-only">Toggle navigation</span>
                            <span>
                              <span class="icon-bar"></span>
                              <span class="icon-bar"></span>
                              <span class="icon-bar"></span>
                            </span>
                     </button>
                     <a class="phone-no" href="#">6280 5666 (24/7)</a>
                </div>

                <div class="navbar-offcanvas navbar-offcanvas-right" id="js-bootstrap-offcanvas">
                    <ul class="social-share">
                        <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                        <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                        <li><a href="#" id="careers"><i>Careers</i></a></li>
                        <a href="#" id="book">Book appt</a>
                    </ul>
                    <?php
                        wp_nav_menu( array(
                            'menu'              => 'primary',
                            'theme_location'    => 'primary',
                            'depth'             => 2,
                            'container'         => 'div',
                            'container_class'   => 'collapse navbar-collapse navbar-toggle offcanvas-toggle',
                            'container_id'      => 'js-bootstrap-offcanvas',
                            'menu_class'        => 'nav navbar-nav navbar-right navbar-offcanvas navbar-offcanvas-right',
                            'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                            'walker'            => new wp_bootstrap_navwalker())
                        );
                    ?>                      
                </div>
            </div> <!-- end .container -->
        </nav> <!-- end .navbar -->     
    </header> <!-- end header -->

** After adding the menu dynamically in WP, it shows for desktop site.

In Android default browser, menu not work.

The problem is that the menu is totally hidden on iPad. The space is still used and causes whitespace on the page.

It seems to be caused by the media-query where max-width: 768px.
The grid-break for bootstrap is at min-width: 768px for tablets (sm-device). If I set the media-query to max-width: 767px (as it is in bootstrap for xs-devices) it works as expected.

I think the max-width should be used in general, not the next higher min-width.

I'm getting the following error when loading my page with bootstrap.offcanvas.js installed:

Uncaught TypeError: undefined is not a functionbootstrap.offcanvas.js?ver=4.0:229 (anonymous function)bootstrap.offcanvas.js?ver=4.0:253 (anonymous function)

Loading bootstrap.offcanvas.min.js produces the same result.

In current configuration, is it possible to make the off canvas menu push the content to right instead of floating over it? Similar to http://www.jasny.net/bootstrap/examples/navmenu-push/.

Hi, Thanks a bunch for this very useful script!

I have had the following issue:
When one taps on a page that is not in offcanvas mode, it resizes the navbar to height of the window.
This can be reproduced in the example page provided with Bootstrap-Offcanvas. I have tested it using Chrome DevTools' Device Mode (devices: Nexus 10 or Nexus 7 in landscape mode or any other larger device).
I have added a check which seems to have fixed it:

OffcanvasTouch.prototype._touchStart = function(e) {
   this.startX = e.originalEvent.touches[0].pageX;
   if (this.element.is('.in')) {
          return this.element.height($(window).outerHeight());
   }
};

Not sure if this could have an impact on other functionality, will report it if I do come across any side effects.

Hey.

I'm glad I found this addon. Seems like it's gonna make my life easier :).

Is the v2 branch stable enough for usage? If not, is there an estimation when it will be released? Also, will it present BC breaking changes?

Hi!
First of all, thanks for an amazing offcanvas menu. Works brilliantly!
So.. not an issue really. Rather a question.
I would like the offcanvas menu to work on an iPad/tablet. I tried to change the media query but didn´t get it to work. Is there anything else I can try?
Thanks in advance and once again, awesome work!

Drop jQuery as a dependency. Shouldn't be too difficult.

Hi Phill, cool plugin!

bug found, downloaded github version:

1. in collapsed mobile mode (less that 768px). click menu button,
2. side navigation shows
3. expand screen to fullscreen again by dragging browser
4. collapse to mobile view again by dragging browser
5. you will still see the close icon (but now the offcanvas menu is hidden).
   if you click the X button the menu shows (ie. rolls are reversed for what the button is showing)

In the coffee script, there is 3 occurences of offcavas (lines 172 and 179)

Is that an error or is it normal ?

Hi,

I have Bootstrap 3.3.6 with bootstrap css + js loaded. After this your offcanvas js is loaded. But when I open at offcanvas the submenu and I click into empty space on offcanvas, the submenu is not closed and there are some other style problems.

Can you fix this that your offcanvas version work with submenus?

To replicate this issue, have at least two dropdowns in a navbar-nav, one after the other. It also happens if a non-dropdown item is after a dropdown.

CoffeeScript is old news. Should be re-written in ES6.

Hi,

I downloaded the source files and ran the example/index.html locally and it did not load the menu at all when pressing the toggle button. Same thing happened when I tried the test/index.html example. The only example that actually works is the following hosted example: http://iamphill.github.io/Bootstrap-Offcanvas/example.html. Is there anything special happening with the hosted example?

Thank you very much for your help!

The offcanvas menu automatically closes when the input is clicked in mobile.when I click in input(in mobile),it trigger window resize and it close the menu .can you add option in tag (like data-recalc='true') and closing menu in resize when option recalc is true or false. thank you

You moved the toggle-button outside the nav.navbar. Is it posible to keep the nav.navbar with brand and move only the div#bs-navbar-offcanvas? See the bootstrap docs for Navbar with toggle-Button http://getbootstrap.com/components/#navbar

Is it possible to have two offcanvas menus? I have no problem adding one offcanvas menu but when I try to add a second it wont work.

button data-toggle="offcanvas" data-target=".js-offcanvas-menu"
button data-toggle="offcanvas" data-target=".js-offcanvas-cart"

div class="navbar-offcanvas navbar-offcanvas-right navbar-offcanvas-fade js-offcanvas-menu"
div class="navbar-offcanvas navbar-offcanvas-right navbar-offcanvas-fade js-offcanvas-cart"

The offcanvas menu automatically closes when the input is clicked. I tried debugging it however I couldn't understand your js, no comments anywhere.

When the navbar button first comes up with navbar-inverse it is not inversed color, however after pressing it to expand the menu, it changes to the correct color.

Any ideas how I can get it to display properly on page load?

I have implemented the provided menu but without bower simply copied css and js files and it worked wonderfully but the only issue i have faced using chrome if i open up menu by toggle button after minimizing browser window it works and if i click any where out side and maximize the browser it goes well but,,,,if i open up menu after minimizing chrome browser and click on maximize button without clicking any where on the page my whole page looses its css. Please help.

I have a Nexus 5, the demo page doesn't work, the menu button doesn't toggle the menu consistently, and when the menu finally reveals, any touch of the screen causes the menu to disappear.

Hi!

I noticed a "bug" when using the offcanvas menu on mobile. When scrolled down a bit on a page, just enough to the top toolbar/browser navigation (with the address field etc.) disappears, a big gap appears below the menu area. The gap is pretty much the same height as the browser toolbar. See attached screenshot. Tried both on Android (Samsung Galaxy S7 Edge) and iPhone (6) and both has the same issue.

Is this a known problem? If so, is there a workaround for it? Tried to search but came up with nothing.

Why other element inside navbar-brand don't trigger ?

Look my code:

<div class="navbar-header">
                        <button type="button" class="navbar-toggle inicial offcanvas-toggle pull-right" data-toggle="offcanvas" data-target="#js-bootstrap-offcanvas-1" style="float:left;">
                        <span class="sr-only">Toggle navegação</span>
                      <span class="icon-bar left"></span>
                      <span class="icon-bar center"></span>
                      <span class="icon-bar right"></span>
                          </button>
                          <a  class="navbar-brand visible-xs offcanvas-toggle"  data-toggle="offcanvas" data-target="#js-bootstrap-offcanvas-1" href="#">menu</a>
</div>

Hey, great script! I really like how it looks but I have a few issues with it.

I have altered the SASS variable to make menu appear in ipad portrait mode.

$screen-xs-max:                   991px !default;

I have also increased the @grid-float-breakpoint collapse breakpoint in main bootstrap SASS.

It works but there are some issues.

When trying to drag the menu from the left it is tricky to find the right part of the screen to swipe. There is a small gutter to the very left of the screen where the swipe is not recognised (I am guessing the standard bootstrap container margin), then there is a thin strip where if I swipe right it will pull the menu out and then the rest of the screen will not recognise the swipe gesture to pull out the menu.

I guess it is meant to be a thin bar that the finger can slide over but it doesn't work like this. If the swipe is not initiated directly on the right place then the menu doesn't slide in.

This is somewhat noticeable on the small mobile screen but it extremely noticeable on ipad in portrait.

When I emulate the swipe in chrome dev tools the menu comes in at full height but on my actual ipad 2 then the menu comes in at 50% height.

When using the toggle button it will come in at 50% height and then quickly resize to 100%..

When using a swipe gesture it comes in at 50% height and stays that height. If I tap the top half of the screen it will resize to 100%. If I tap the bottom half of screen the menu dissapears.

I tried using your example in case I did something wrong but I got the same result.

I am not very good at javasript so not really sure how to go about debugging this.

Any ideas?

In my app I load the navbar dynamically depending on the user that is logged in, using the angularjs directive ngView, however if I tried to use this plugin it just doesn't trigger the off canvas menu

Thanks for the awesome plugin!

An icon state when I resized a window is not right.

Now it works correctly with this JavaScript code.

$(window).on('resize', function() {
  return $('.navbar-offcanvas.in').each(function() {
    $(this).parent().find('.offcanvas-toggle').removeClass('is-open');
    return $(this).height('').removeClass('in');
  });
});

Thanks!

Thank you for great plugin.
I saw the issue in following steps.

1. open offcanvas menu
2. window resize. In Android, swipe up menu then header bar is hidden and "resize" event occur.
3. automatically menu closed
4. can't scroll contents

so I inserted a code in "transitionend" event.

this.target.on('transitionend', (function(_this) {
  return function() {
    if (_this.target.is(':not(.in)')) {
      _this.bodyOverflow(); // Insert this line
      return _this.target.height('');
    }
  };
})(this));

It works so far.
Is this good solution?

I am using this with v4 alpha, works perfectly. Would be good to update the examples etc. Thanks for this lib, really nice.

Dropdown menu's don't open when you click on them in desktop view.
In mobile view it works perfectly.

HI,
i have add your code in my site but when i check this on mobile the canvas menu is auto hiding when click on search or menu anywhere in canvas menu.. can you please help me with that .. i am not coder and i don't now jquery etc.
my website is: http://goo.gl/3bB8dA
check on mobile.. i have test it with android device mate 7

thanks

i'm reposting the issue that @cbieser raised, because i have the same issue.

you closed this issue, but it wasn't resolved... This would be great otherwise, but as is the logo (brand) gets stuck in the off-canvas sidebar and isn't visible when the navbar is hidden.

When you have the menu opened and resize the browser, it should remove the class "offcanvas-stop-scrolling" from the BODY tag. By not removing, you are not able to scroll the page anymore when the menu slides away.

Thanks for the awesome plugin!

I'd like to add a close button to provide a visual cue that allows for closing the sidebar.

I've looked at two approaches for this:

• add a second button to toggle the sidebar off, only visible when the sidebar is out
• change the text and icon of the existing button via JS, when the sidebar is out

Either way, although the classes imply the button is a "toggle" - I can click once on the button to open the sidebar, but when I click the button again, the sidebar does not close. The only UI way to close the sidebar appears to be clicking or tapping on some white space outside the sidebar.

It looks like I'll use the second approach above, and remove the "offcanvas-toggle" class when the sidebar is out, so when the user taps the button, it's the equivalent of tapping outside the sidebar.

How would you suggest implementing a close button using this plugin? Is there a way in the current version? Can we change the button into a true toggle in future versions, to make this easier?

Thanks! David

I have an AngularJs application in which the header part is defined in a separate file thus it is loaded into the HTML by an AJAX call. This case the navbar toggle button does not work. It won't open the offcanvas menu.
However if I re-run the entire bootstrap-offcanvas javascript code in F12 console the navbar toggle works.
So this means this component does not support navbar-s that are loaded by AJAX.
Please add support for it!

Open off canvas menu scrolls content to the top.

This happens, because the body gets position fixed with initial top value.

When i visit the example or try to integrate this in to my site, there is huge issues, it will create a huge container, so the content is pushed further down the page, and the "gray" menu color dominates the page.

Besides that i would wish an inline example, where you just change the button in normal Navbar, to open the Offcanvas, so you can keep the bar in the top with your logo in it....

As per in the manual there is a offcanvas.toggle trigger I can fire which opens/closes the navbar, eg.:

$("#js-bootstrap-offcanvas").trigger("offcanvas.toggle");

I'd like to have a similar trigger which not triggers but closes the navbar if it was open, something like:

$("#js-bootstrap-offcanvas").trigger("offcanvas.close");

This is also required for my Angular (ajax) application which uses HTML5 Push States to navigate between different pages. When a new state (or page) is loaded the opened offcanvas navbar remains opened. I need it to be closed this case.

Move internal features into plugins. Touch support might not be needed by everyone so that could be moved out of the core.

When clicking the x on the menu it does not slide back? I have a mutli level menu in this drawer how can this issue be resolved? Currently the only way the user can close this menu is if they touch an area outside of the drawer.

Here is a fiddle to illustrate http://jsfiddle.net/gward90/b25jgyox/2/

Your help is most appreciated.

window.on resize disables toggle button and scrolls to top on iOS devices 9.0.2 with Safari.
Then when you reached top the toggle button works again.

Removing
$(window).on 'resize', ->
$('body').css
overflow: ''
position: ''
$('.navbar-offcanvas.in').each ->
$(@).height('').removeClass 'in'
and replacing this with a enquire media query resolved this issue for me.

Solution?

"main": [
"dist/css/bootstrap.offcanvas.min.css",
"dist/js/bootstrap.offcanvas.js"
],

Not sure If I'm missing something but the index.html file in the example folder of the .zip doesn't work in v2.1.1. The menu icon doesn't trigger the off canvas menu. Is anyone else having this issue?

Hi,
could you make this repository usable by Composer / Packagist.
See: http://blog.jgrossi.com/2013/creating-your-first-composer-packagist-package/
Thanks in advance
Falko

ping @iamphill

What is the best approach to only allow one menu to be opened, e.g. showing its children?

For instance:

Assuming my page tree looked like this:

Page A
|_ Child
|_ Child
Page B
|_ Child
|_ Child

When the user visits my site on a mobile device:

Page A
Page B

When the user opens Page A

Page A
|_ Child
|_ Child
Page B

Now I want the following behaviour when the user opens Page B while Page A is showing its children:

Page A
Page B
|_ Child
|_ Child

Any hints? :) Thanks!