From 11f4c4ce27c5b4d072909fcce2a88626abd79fe1 Mon Sep 17 00:00:00 2001 From: Guille Paz Date: Mon, 2 Mar 2015 22:50:04 -0300 Subject: [PATCH] Update readme documentation. --- README.md | 158 +++++++++++++++++++++++++++++++++++++++--------------- 1 file changed, 114 insertions(+), 44 deletions(-) diff --git a/README.md b/README.md index 1e0fa24..4bbebef 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,21 @@ -# slideout [![Build Status](https://secure.travis-ci.org/Mango/slideout.png)](http://travis-ci.org/Mango/slideout) [![devDependency Status](https://david-dm.org/Mango/slideout/dev-status.png)](https://david-dm.org/Mango/slideout#info=devDependencies) +# Slideout.js [![Build Status](https://secure.travis-ci.org/Mango/slideout.png)](http://travis-ci.org/Mango/slideout) [![devDependency Status](https://david-dm.org/Mango/slideout/dev-status.png)](https://david-dm.org/Mango/slideout#info=devDependencies) > A touch slideout navigation menu for your mobile web apps. +## Features + +- Dependecy-free (Zepto/jQuery). +- Simple markup. +- Native scrolling. +- Easy customization. +- CSS transforms & transitions. +- Just 4 Kb! + ## Demo [Check out the demo](https://mango.github.io/slideout/) to see it in action (on your mobile or emulate touches on your browser). -Slideout.js demo +Slideout.js demo ## Installation @@ -18,42 +27,25 @@ ## Usage -### HTML -```html - - - - - - - - - - - Slideout Demo - - +Implementing Slideout.js into your project is easy. - - -
-
- -

Panel

-
-
+1. First of all, you'll need to create your markup. You should have a menu (`#menu`) and a main content (`#panel`) into your body. - - - +```html + + +
+
+

Panel

+
+
``` -### CSS -You should add the following CSS in your application. +2. Add the Slideout.js styles (index.css) in your web application. ```css html, @@ -76,9 +68,8 @@ body { } .slideout-panel { - position: relative; + position:relative; z-index: 1; - transform: translate3d(0, 0, 0); } .slideout-open, @@ -91,14 +82,93 @@ body { } ``` -### JavaScript -```js -var slideout = new Slideout({ - 'panel': document.getElementById('main'), - 'menu': document.getElementById('menu'), - 'padding': 256, - 'tolerance': 70 -}); +3. Then you just include Slideout.js and create a new instace with some options: + +```html + + +``` + +#### Full example + +```html + + + + + Slideout Demo + + + + + + + + + + + +
+
+ +

Panel

+
+
+ + + + + + ``` ## API