Version 3

- Fixes #4,  #15, and #16
- NPM and Bower added

Author: alizahid

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+bower_components

README.md

@@ -2,26 +2,73 @@
 
 jQuery sliding menu
 
-A light-weight, responsive, mobile-like menu plugin
+A light-weight, responsive, mobile-like navigation menu plugin
 
 ### [Demo](http://alizahid.github.io/slinky)
 
-### Installation
+## Installation
 
 Download the [latest version](https://github.com/alizahid/slinky/archive/gh-pages.zip). The files you need are;
 
-- assets/js/jquery.slinky.js
-- assets/css/jquery.slinky.css
+- [dist/jquery.slinky.js](dist/jquery.slinky.js)
+- [dist/jquery.slinky.css](dist/jquery.slinky.css)
 
-### Usage
+### Bower
 
-    $('.menu').slinky(options);
+	bower install slinky
 
-### Options
+Include these files;
+
+	<script src="bower_components/slinky/dist/jquery.slinky.js"></script>
+
+	<link rel="stylesheet" src="bower_components/slinky/dist/jquery.slinky.css">
+
+### NPM
+
+	npm install slinky
+
+Include these files;
+
+	<script src="node_modules/slinky/dist/jquery.slinky.js"></script>
+
+	<link rel="stylesheet" src="node_modules/slinky/dist/jquery.slinky.css">
+
+## Usage
+
+    var slinky = $('.menu').slinky(options);
+
+## Options
 
 Option | Default value | Description
 ------ | ------------- | -----------
-`label` | 'Back' | Label for the back button. Set to `true` to use the link's own label
-`title` | `false` | Set to `true` to show title of current menu level
+`label` | 'Back' | Label for the back button. Pass `true` to use the link's own label
+`title` | `false` | Pass `true` to show title of current menu level
 `speed` | `300` | Animation speed in milliseconds
-`resize` | `true` | Resize menu height to match content
+`resize` | `true` | Resize menu height to match content on navigation
+
+## API
+
+### .home()
+
+Navigate back to the main menu
+
+Option | Default value | Description
+------ | ------------- | -----------
+`animate` | `true` | Pass false to skip animation
+
+### .jump()
+
+Navigate to a sub menu
+
+Option | Default value | Description
+------ | ------------- | -----------
+`to` |  | Pass a selector for the ul element to jump to
+`animate` | `true` | Pass false to skip animation
+
+### .destroy()
+
+Remove slinky
+
+## Tips
+
+- Set `.active` on a `ul` element to jump there on init

assets/css/jquery.slinky.css

@@ -4,17 +4,13 @@
 	overflow: hidden;
 	transform: translateZ(0);
 	transition: all 300ms ease;
-	-webkit-transform: translateZ(0);
-	-webkit-transition: all 300ms ease;
 }
 
 .slinky-menu > ul {
 	left: 0;
 	position: relative;
 	transform: translateZ(0);
 	transition: all 300ms ease;
-	-webkit-transform: translateZ(0);
-	-webkit-transition: all 300ms ease;
 }
 
 .slinky-menu ul,
@@ -56,7 +52,7 @@
 
 /* Default theme */
 
-.slinky-menu .header {
+.slinky-menu {
 	background: #AAA;
 }
 
@@ -65,8 +61,11 @@
 	padding: 1em;
 }
 
+.slinky-menu li {
+	line-height: 1;
+}
+
 .slinky-menu a {
-	background: #AAA;
 	border: none;
 	color: #FFF;
 	padding: 1em;

assets/css/master.css

@@ -1,4 +1,4 @@
-/* Style */
+/* Styles */
 
 *,
 *:before,
@@ -10,39 +10,68 @@
 	outline: none;
 	padding: 0;
 }
+
 body {
 	background: #000;
 	color: #000;
 	cursor: default;
 	font: normal 0.75em/1 'Atlas Typewriter', 'Consolas', monospace;
 }
+
 a {
 	color: #AAA;
 	border-bottom: 1px solid #AAA;
 	padding-bottom: 2px;
 	text-decoration: none;
 	transition: all 300ms ease;
 }
+
 a:hover {
 	border-bottom-color: #000;
 	color: #000;
 }
+
 h1 {
-	margin: 0;
+	font-size: 3em;
 }
+
 h2,
 h3 {
 	margin: 1em 0;
 }
+
+h2 {
+	font-size: 2em;
+}
+
+h3 {
+	font-size: 1.5em;
+}
+
+h4 {
+	background: #000;
+	color: #FFF;
+	display: inline-block;
+	font-size: 1em;
+	margin-top: 2em;
+	padding: 1em;
+}
+
+h4:first-of-type {
+	margin-top: 0;
+}
+
 img {
 	border: none;
 	max-width: 100%;
 	vertical-align: top;
 }
+
 p {
 	line-height: 1.6;
 	margin: 2em 0;
 }
+
 pre {
 	background: #000;
 	color: #FFF;
@@ -51,29 +80,40 @@ pre {
 	padding: 2em;
 	tab-size: 4;
 }
+
 table {
 	font: inherit;
 	border-collapse: collapse;
 	border-spacing: 0;
 	width: 100%;
 }
+
 tbody tr:nth-child(2n+1) {
 	background: #EEE;
 }
+
 th,
 td {
 	line-height: 1.6;
 	padding: 1em;
 	text-align: left;
 	vertical-align: middle;
 }
+
+ul li {
+	line-height: 1.6;
+	list-style: square;
+	margin: 1em 0 1em 2em;
+}
+
 header,
 section,
 footer {
 	margin: 5em auto;
 	max-width: 90%;
 	width: 40em;
 }
+
 footer {
 	color: #FFF;
 	margin: 0;
@@ -82,21 +122,26 @@ footer {
 	text-align: center;
 	width: 100%;
 }
+
 footer img {
 	height: 1em;
 }
+
 footer a:hover {
 	border-bottom-color: #FFF;
 	color: #FFF;
 }
+
 .wrapper {
 	background: #FFF;
 	overflow: hidden;
 }
+
 .social {
 	margin: 2em auto;
 	overflow: hidden;
 }
+
 .github,
 .tweet {
 	float: left;
@@ -108,9 +153,11 @@ footer a:hover {
 	h3 {
 		margin-top: 1em;
 	}
+
 	footer {
 		line-height: 2;
 	}
+
 	footer img {
 		margin: 0.5em 0;
 	}