Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
GRAY GHOST

Draggable Off Canvas Menu

Recommended Posts

Please Help Guide on this issue. Thanks in advance to those that pitch in :)

 

Here's an example demo (still private) I'm creating to show how Draggable can be used to create an off canvas menu. 

 

A couple issues I'm running into:

 

1. The red bg is to show the target region. I want the menu to allow drag actions to open the menu when a user's finger drags over the top of the document (not just a small portion of a region). The menu also hides completely when it's closed. The previous example linked in my demo from Carl's original pen had the menu showing 15 pixels when closed. Need some guidance on how to improve the current demo I'm building.

 

2. Links in the main document body are not clickable and I think I'm missing the explanation in the docs. Maybe some direction how to make these elements clickable so the menu swipe region does not negate those clickable items.

See the Pen 569ffceac4b0c1b3958ade9bd189ad94 by grayghostvisuals (@grayghostvisuals) on CodePen

Link to comment
Share on other sites

Hi grayghostvisuals  :)

 

pls fix to this : 

closedPosition = nav.offsetWidth - 15; //make sure there are 15 pixels showing

and data-clickable="true" works if that element be a child of draggable not under the draggable .

  • Like 1
Link to comment
Share on other sites

Fixed this by using body as the target and some CSS trickery. Demo has been updated.

Link to comment
Share on other sites

Demo has been updated, but finding some new problems. This is the demo that will appear in Tuts+ when it has been fully tested.

 

Menu won't show when activated in IE10. In Safari the height is completely full for the menu only when the browser is resized. Again this demo has to be the way I've made it without showing 15 pixels of the menu. 

 

I also added a hash anchor just to see what happens when a user clicks on a link that leads to another section in the same doc. So far the results are not that great. Hopefully a fix to this?

 

Demo: 

See the Pen 569ffceac4b0c1b3958ade9bd189ad94 by grayghostvisuals (@grayghostvisuals) on CodePen

Link to comment
Share on other sites

Don't use the body for the Draggable becase it doesn't have a parent element. You should see an error in the console about this. 

 

I think most of your issues are CSS related, especially the fixed element. I built an off canvas menu years ago, and I remember I couldn't use translate on a fixed element because of IE. I had to use left and margin-left instead. 

 

What problems do have with the hash anchors? You might have problems in IE because CodePen is running in a frame. If you don't want the menu to close when you click on one, just add this to your onClick callback.

if (event.target.hash) return;
  • Like 2
Link to comment
Share on other sites

Thanks for the tips. The demo no longer has the body element in use due to the error you described.

 

BTW the hash trick worked like a charm and changing position to absolute fixed my IE issue on the menu not appearing. Still seeing issues in Safari with menu's height.

Link to comment
Share on other sites

With IE, a fixed element is literally fixed. It won't move if you move it's container. You could move both of them at the same time, or you could position it absolutely.

 

I just moved them at the same time. I also moved the nav outside the container so the links would stay fixed. Is that what you were trying to do with the fixed element?

 

What other IE problems did you have?

 

See the Pen 3c27a53500254a7c39729b62a0021460 by osublake (@osublake) on CodePen

  • Like 2
Link to comment
Share on other sites

Ok so everything is going well so far with the exception of some adjustments I made. I dislike that the menu opens when anchors are clicked. To solve that see the changes I made in the JS. 

See the Pen 569ffceac4b0c1b3958ade9bd189ad94 by grayghostvisuals (@grayghostvisuals) on CodePen

 

The only thing left with that pen I just linked is the fact that I lost the menu button to activate the menu. Everything else is working like a charm.

Link to comment
Share on other sites

Fixed \m/

<a href="#menu" class="menu-toggle" onclick="event.preventDefault()" data-clickable="false">Menu</a>
if (event.target.hash && event.target.hash !== '#menu') {
  return;
} else {
  aria('aria-hidden');
  clickit.call(this);
}
  • Like 2
Link to comment
Share on other sites

Nice!

 

There's also a clickableTest function where you can test if the element should be clickable, and then return true or false. But what you did is probably the best way since there are so many different types of elements on your page.

  • Like 1
Link to comment
Share on other sites

One more bit I think can tie this up nicely. I'll also make sure to give a shout out for those that lend a hand here to a resolution.

 

The number one problem still is the fact that text is not selectable making it a huge issue for me. I've tried clickableTest, but not

sure thats really the best way to go here.

 

I'd like to show people with this demo that…

 

1. Content can be pushed by the menu in a performant way.

2. It can still be accessible.

3. You can swipe over the draggable region and still interact with the document like a normal website (select text, copy and paste, interact with form inputs etc.)

 

Out of that list #3 with text selection remains. Squarespace would be one example I could point to that does this.

 

Demo link updated: 

See the Pen 569ffceac4b0c1b3958ade9bd189ad94 by grayghostvisuals (@grayghostvisuals) on CodePen

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×