What's the best way to develop a web-based sideswipe menu?

Question

I previously asked about developing an iOS based side-swipe menu. Now that sideswipe menus have become a standard user interface component, they are beginning to transfer over to the mobile web. Medium is one of the first I've seen to successfully pull of this type of menu on the mobile web (pictured below). My question is: what is the most effective way of implementing something like this on the web?

enter image description here

Not sure why people would vote to close without commenting on whether this is a duplicate? — Nick ONeill, Feb 22 '13 at 17:28
I think the downvotes are because you posed an open ended "...most effective..." question which invites debate — Robot Woods, Feb 22 '13 at 17:30
I've always been a fan of mouseover effects for PC browsers, maybe some javascript which replaces these mouseover effects with swipe effects for mobile browsers. — Joey, Feb 22 '13 at 17:30
I went to their site and can't see it anymore. Did they change their menu? Otherwise you could just inspect their html/css and possibly js if it's not compiled to see how it's done. — Robin, Feb 22 '13 at 17:37
Is your question "How did they do it?", or "How can I code this?" or "What should be in the UI?" — KatieK, Feb 22 '13 at 18:26
@KatieK How can I code it ... hence why it's being tagged with CSS & Javascript — Nick ONeill, Feb 22 '13 at 19:59
My personal favourite is: http://mmenu.frebsite.nl/examples/responsive/index.html. Trus me it's amazing! — Robert Johnstone, Mar 21 '14 at 16:59

score 6 · Accepted Answer · answered Feb 22 '13 at 17:53

6

I hate to be that person to just drop a link but there's a very good write up about this very topic here: http://coding.smashingmagazine.com/2013/01/15/off-canvas-navigation-for-responsive-website/

It covers a web based menu with animation and it covers best practices for animating the menu smoothly. The article is pretty detailed making it difficult to summarize its content. Hopefully it will help.

answered Feb 22 '13 at 17:53

hradac

2,431
1
19
21

This is the best one I've seen so far ... thanks! – Nick ONeill Feb 22 '13 at 18:02
@NickONeill Thanks, this was one of the best articles I found on the topic and covers the issues specific to mobile development. – hradac Feb 24 '13 at 19:52

score 1 · Answer 2 · answered Feb 22 '13 at 17:51

1

If you aren't against jQuery Mobile, this can be very simple:

http://view.jquerymobile.com/1.3.0/docs/examples/panels/panel-swipe-open.php

answered Feb 22 '13 at 17:51

danielrsmith

4,050
3
26
32

score 0 · Answer 3 · answered Feb 22 '13 at 17:46

Here is how I would approach it (of course this is just an example of the animation, I've left out everything else):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body, html {margin:0;padding:0;}
#iphone {width:320px; height:480px; overflow:hidden; border:solid black thin; display:block;}
#menu {position:fixed; top:1;left:-250px; width:250px; height:480px; display:block; background-color:#868686;}
#content {position:absolute; width:320px; background-color:#cccccc; display:block;}
</style>
</head>

<body>
<div id="iphone">
<div id="menu">I am a menu <button onclick="hideMenu();">close</button></div>
<div id="content">I am the site content, click this <button onclick="showMenu();">menu</button></div>
</div>
</body>
<script>
var m=document.getElementById('menu');
var c=document.getElementById('content');
function showMenu(){
    if(m.offsetLeft<0){
        m.style.left=(m.offsetLeft+10)+'px';
        c.style.left=(c.offsetLeft+10)+'px';
        setTimeout(showMenu,16)
    }

}
function hideMenu(){
    if(m.offsetLeft>-250){
        m.style.left=(m.offsetLeft-10)+'px';
        c.style.left=(c.offsetLeft-10)+'px';
        setTimeout(hideMenu,16)
    }

}
</script>
</html>

One downside of this approach is the use of absolute positioning. Is it possible to shift an element's position without it being fixed or absolute? — Nick ONeill, Feb 22 '13 at 17:53

What's the best way to develop a web-based sideswipe menu?

3 Answers3