21 |
22 |

23 | Built by Harvest 24 |

25 |
26 | 27 |
28 |
29 |
30 |

This is Sidetap

31 |

Sidetap is a simple framework that allows you to quickly build platform-independent mobile web interfaces.

32 | 33 |
34 | Sidetap was not optimized for your browser: 35 | Though Sidetap works on many devices and browsers, it delivers the best experience to iOS5+, Chrome & Safari. Check them out to get the true Sidetap experience.™ 36 |
37 |
38 | 39 | 42 | 43 |

Ugh, another mobile framework?

44 | 45 |

We built Sidetap to be an easy-to-use implementation of the side navigation pattern popularized by apps like Sparrow and Facebook. It solves many common mobile development problems right out of the box. Here are some of the specific things we like about it:

46 | 47 |
48 |
Lightweight
49 |
Sidetap only weighs 2k when minifyied and gzipped!
50 | 51 |
Device Support
52 |
Sidetap aims to always deliver the best possible experience for all devices by starting with a basic experience and progressively enhancing it for more capable devices.
53 | 54 |
Less Decisions to Make
55 |
By embracing convention over configuration, Sidetap lets you start building your mobile interfaces right away.
56 | 57 |
Simple
58 |
Sidetap provides a flexible foundation for navigating between content panels on mobile devices using an easy-to-use syntax.
59 |
60 |
61 | 62 |

How to Use Sidetap

63 | 64 |
    65 |
  1. 66 |

    Build the HTML Structure

    67 |

    Sidetap uses a very specific HTML structure which can be found in the skeleton.html file

    68 |
  2. 69 | 70 |
  3. 71 |

    Instantiate Sidetap

    72 |

    Create a reference to Sidetap from within your app.

    73 | 74 | var my_sidetap = new sidetap(); 75 |
  4. 76 | 77 |
  5. 78 |

    Call Animations

    79 |

    Any time you want to show a new section, you just tell Sidetap which content element to animate. Sidetap will take care of clearing the stage using whatever animation is appropriate for the situation.

    80 | 81 | my_sidetap.show_section(element, options); 82 | 83 |

    show_section options:

    84 |
      85 |
    • callback: a function to fire when the switch is complete
    • 86 |
    • animation: an animation style to use (iOS 5+ only). Current animations are upfrombottom, downfromtop, infromright, infromleft
    • 87 |
    88 |
  6. 89 |
90 | 91 |

Dependency

92 | 93 |

Requires jQuery (only tested with 1.7.2) or Zepto.js.

94 | 95 |

Development Roadmap

96 | 97 |

As with any software project, there’s always room for improvement. These are some of the things we’d like to get added to Sidetap in the future.

98 | 99 |
    100 |
  • More iOS-like header animations
  • 101 |
  • Better touch support
  • 102 |
  • Leaving side navigation open on larger screen devices (hello, iPad)
  • 103 |
  • Bringing polished version to more devices.
  • 104 |
105 | 106 | 107 |

Where can I get it

108 | 109 |

On Github, of course.

110 | 111 |

Credits

112 | 113 | 120 | 121 |
122 |