1

I have used the offcanvas push menu on my website. I want the menu to be opened on certain pages of my site on page load, but the toggle still wok for the viewer to close it / open again if they wish.

How would i set the menu to be open only on certain pages? (pages which all use the same template so I can add custom js to this template only).

I have been looking at the methods and venets in the documentation,but can't work out how to do what i need.

I have tried the 'show' method in just the page template I want the menu to load open on:

<script>
  $(function () { $('.navmenu').offcanvas('show'); });
</script>

it works by loading page with the menu open; but laid OVER the 'canvas' (body) - rather than pushing the body off canvas as it does usually. Other than adding this extra jquery to my page i have used the same code as in Jasny's example.

See the fiddle

Many thanks!

Arnold Daniels
  • 16,516
  • 4
  • 53
  • 82
user3423602
  • 31
  • 4
  • What did you try? Could you show your actual code that manage this part? – Jonatan Cloutier Oct 03 '14 at 12:47
  • Since i first wrote - I have tried the 'show' method in just the page template I want the menu to load open on: - it works by loading page with the menu open; but laid OVER the 'canvas' (body) - rather than pushing the body off canvas as it does usually. Other than adding this extra jquery to my page i have used the same code as in Jasny's example: http://jasny.github.io/bootstrap/examples/navmenu-push/ Any help massively appreciated thanks! – user3423602 Oct 03 '14 at 13:37
  • I'm going to do a JS fiddle shortly.... – user3423602 Oct 03 '14 at 13:50
  • You might get more answer when this is done as we are pretty much in the dark now – Jonatan Cloutier Oct 04 '14 at 00:42
  • Sorry for the delay - here is the js fiddle http://jsfiddle.net/lucyryder/s3r4pnjh/13/ - it is part of Bootstrap Jasny extension so had to include all Bootstrap styles and js. - at the bottom of the js panel this is what shows the menu open on page load: $(function(){ $('.navmenu').offcanvas('show'); }); - with this 'show' method the menu sits OVER the rest of the page, whereas without it the menu PUSHES the rest of the page 'off canvas' - which is how I want it - pushing the page off screen; not sitting over it. – user3423602 Oct 06 '14 at 14:06
  • For future reference, you should use "External Resources" on jsfiddle to load external CSS and JS (eg from [cdnjs](https://cdnjs.com/)), instead of in-lining all CSS and JS. – Arnold Daniels Oct 09 '14 at 11:47
  • Thansk for this will do next time – user3423602 Oct 13 '14 at 09:16

1 Answers1

1

The data-* attributes of the button are only used when clicking the button. This is kind of a misdesign of the off canvas plugin.

In this case you shouldn't use the data attributes at all, initialize it in JavaScript instead.

<script>
  $(function () {
    $('.navmenu').offcanvas({
      toggle: "offcanvas",
      target: ".navmenu",
      canvas: "body"
    }).offcanvas('show');
  });
</script>
Arnold Daniels
  • 16,516
  • 4
  • 53
  • 82
  • Hi - this works great in opening the menu on page load, but then if i close, it, i can't open it again? - is there a way we can have it so it can be re-opened again? – user3423602 Oct 13 '14 at 10:01