Off canvas menu

Legacy Dynamo
1

Hi guys,

I got some trouble in basic understandings of the off-canvas menu concept.

Now basically I think the current hamburger-menu is pretty fine, but if a project becomes a bit more complex, the “cover the screen concept” might be sometimes a little bit strange to navigate.

For this reason, I started to think about the off canvas concept as being much better to keep all this stuff together.

And there we are:

Desktop:

a regular top-navigation

iDevices

the off-canvas one as in the example given.

I assume, that I have to deal with two navigations, each hidden if not required? Furthermore a button href-ed to the off-canvas container and some java-script toggle behind?

Or am I entirely off the canvas :slight_smile: and what could be a good start in this? Did you ever tried it? Do you think it’s to do in our WYSIWYG world?

Thanks in advance.

Cheers

Thomas

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

I think that regardless how you accomplish this, you should only have one set of navigation items in the page. Just change how they display at the different breakpoints. Multiple links to the same thing in the same page (without one of them being set to rel=“nofollow”) is a guaranteed downer for Google.

You can have an anchor link to the navigation, and when you at whichever breakpoint you are off-screening your menu, make that anchor visible (hamburger, double-chevron or whatever it may look like). Then you would toggle a class on the menu element, which would give you the desired animation effect to bring in your menu.

$('your_button').observe('click', function(){
  $('menu').toggleClassName('visible');
});

#menu {
  transition: left 0.4s;
}

@media [your break point]{
  #menu {
    left: -100%;
  }
  #menu.visible {
    left: 0;
  }
}

Something like that, although probably different, this is not tested!

Walter

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options