├── .gitignore
├── README.md
├── bower.json
├── js
    └── jPushMenu.js
├── css
    ├── jPushMenu.css
    └── demo.css
└── index.html


/.gitignore:
--------------------------------------------------------------------------------
1 | bower_components
2 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # jPushMenu
 2 | 
 3 | A jQuery version of Slide and Push Menus
 4 | 
 5 | Demo http://takien.github.io/jPushMenu/
 6 | 
 7 | 
 8 | # Development
 9 | 
10 | Install [Bower](http://bower.io) on your local machine first, then run:
11 | 
12 | ```sh
13 | bower install
14 | ```
15 | 
16 | This will install jQuery on `bower_components` directory on your local machine.
17 | Copy/paste jQuery file into js directory
18 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "jPushMenu",
 3 |   "description": "A jQuery version of Slide and Push Menus.",
 4 |   "version": "1.1.1",
 5 |   "keywords": [
 6 |     "js",
 7 |     "css",
 8 |     "menu",
 9 |     "jQuery",
10 |     "sliding menus",
11 |     "pushing menus",
12 |     "navigation",
13 |     "responsive",
14 |     "mobile menu"
15 |   ],
16 |   "homepage": "http://takien.github.io/jPushMenu/",
17 |   "main": [
18 |     "css/jPushMenu.css",
19 |     "js/jPushMenu.js"
20 |   ],
21 |   "ignore": [
22 |     "/.*",
23 |     "/css/demo.css",
24 |     "/index.html"
25 |   ],
26 |   "dependencies": {
27 |     "jQuery": "~1.9.1"
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/js/jPushMenu.js:
--------------------------------------------------------------------------------
 1 | /*!
 2 |  * jPushMenu.js
 3 |  * 1.1.1
 4 |  * @author: takien
 5 |  * http://takien.com
 6 |  * Original version (pure JS) is created by Mary Lou http://tympanus.net/
 7 |  */
 8 | 
 9 | (function($) {
10 |     $.fn.jPushMenu = function(customOptions) {
11 |         var o = $.extend({}, $.fn.jPushMenu.defaultOptions, customOptions);
12 | 
13 |         $('body').addClass(o.pushBodyClass);
14 | 
15 |         // Add class to toggler
16 |         $(this).addClass('jPushMenuBtn');
17 | 
18 |         $(this).click(function(e) {
19 |             e.stopPropagation();
20 | 
21 |             var target     = '',
22 |             push_direction = '';
23 | 
24 |             // Determine menu and push direction
25 |             if ($(this).is('.' + o.showLeftClass)) {
26 |                 target         = '.cbp-spmenu-left';
27 |                 push_direction = 'toright';
28 |             }
29 |             else if ($(this).is('.' + o.showRightClass)) {
30 |                 target         = '.cbp-spmenu-right';
31 |                 push_direction = 'toleft';
32 |             }
33 |             else if ($(this).is('.' + o.showTopClass)) {
34 |                 target = '.cbp-spmenu-top';
35 |             }
36 |             else if ($(this).is('.' + o.showBottomClass)) {
37 |                 target = '.cbp-spmenu-bottom';
38 |             }
39 | 
40 |             if (target == '') {
41 |                 return;
42 |             }
43 | 
44 |             $(this).toggleClass(o.activeClass);
45 |             $(target).toggleClass(o.menuOpenClass);
46 | 
47 |             if ($(this).is('.' + o.pushBodyClass) && push_direction != '') {
48 |                 $('body').toggleClass(o.pushBodyClass + '-' + push_direction);
49 |             }
50 | 
51 |             // Disable all other buttons
52 |             $('.jPushMenuBtn').not($(this)).toggleClass('disabled');
53 | 
54 |             return;
55 |         });
56 | 
57 |         var jPushMenu = {
58 |             close: function (o) {
59 |                 $('.jPushMenuBtn,body,.cbp-spmenu')
60 |                     .removeClass('disabled ' + o.activeClass + ' ' + o.menuOpenClass + ' ' + o.pushBodyClass + '-toleft ' + o.pushBodyClass + '-toright');
61 |             }
62 |         }
63 | 
64 |         // Close menu on clicking outside menu
65 |         if (o.closeOnClickOutside) {
66 |              $(document).click(function() {
67 |                 jPushMenu.close(o);
68 |              });
69 |          }
70 | 
71 |         // Close menu on clicking menu link
72 |         if (o.closeOnClickLink) {
73 |             $('.cbp-spmenu a').on('click',function() {
74 |                 jPushMenu.close(o);
75 |             });
76 |         }
77 |     };
78 | 
79 |    /*
80 |     * In case you want to customize class name,
81 |     * do not directly edit here, use function parameter when call jPushMenu.
82 |     */
83 |     $.fn.jPushMenu.defaultOptions = {
84 |         pushBodyClass      : 'push-body',
85 |         showLeftClass      : 'menu-left',
86 |         showRightClass     : 'menu-right',
87 |         showTopClass       : 'menu-top',
88 |         showBottomClass    : 'menu-bottom',
89 |         activeClass        : 'menu-active',
90 |         menuOpenClass      : 'menu-open',
91 |         closeOnClickOutside: true,
92 |         closeOnClickLink   : true
93 |     };
94 | })(jQuery);
95 | 


--------------------------------------------------------------------------------
/css/jPushMenu.css:
--------------------------------------------------------------------------------
  1 | /* General styles for all menus */
  2 | .cbp-spmenu {
  3 |     background: #47a3da;
  4 |     position: fixed;
  5 | }
  6 | 
  7 | .cbp-spmenu h3 {
  8 |     color: #afdefa;
  9 |     font-size: 1.9em;
 10 |     padding: 20px;
 11 |     margin: 0;
 12 |     font-weight: 300;
 13 |     background: #0d77b6;
 14 | }
 15 | 
 16 | .cbp-spmenu a {
 17 |     display: block;
 18 |     color: #fff;
 19 |     font-size: 1.1em;
 20 |     font-weight: 300;
 21 | }
 22 | 
 23 | .cbp-spmenu a:hover {
 24 |     background: #258ecd;
 25 | }
 26 | 
 27 | .cbp-spmenu a:active {
 28 |     background: #afdefa;
 29 |     color: #47a3da;
 30 | }
 31 | 
 32 | /* Orientation-dependent styles for the content of the menu */
 33 | .cbp-spmenu-vertical {
 34 |     width: 240px;
 35 |     height: 100%;
 36 |     top: 0;
 37 |     z-index: 1000;
 38 |     overflow-y: scroll;
 39 | }
 40 | 
 41 | .cbp-spmenu-vertical a {
 42 |     border-bottom: 1px solid #258ecd;
 43 |     padding: 1em;
 44 | }
 45 | 
 46 | .cbp-spmenu-horizontal {
 47 |     width: 100%;
 48 |     height: 150px;
 49 |     left: 0;
 50 |     z-index: 1000;
 51 |     overflow: hidden;
 52 | }
 53 | 
 54 | .cbp-spmenu-horizontal h3 {
 55 |     height: 100%;
 56 |     width: 20%;
 57 |     float: left;
 58 | }
 59 | 
 60 | .cbp-spmenu-horizontal a {
 61 |     float: left;
 62 |     width: 20%;
 63 |     padding: 0.8em;
 64 |     border-left: 1px solid #258ecd;
 65 | }
 66 | 
 67 | /* Vertical menu that slides from the left or right */
 68 | .cbp-spmenu-left {
 69 |     left: -240px;
 70 | }
 71 | 
 72 | .cbp-spmenu-right {
 73 |     right: -240px;
 74 | }
 75 | 
 76 | .cbp-spmenu-left.menu-open {
 77 |     left: 0px;
 78 | }
 79 | 
 80 | .cbp-spmenu-right.menu-open {
 81 |     right: 0px;
 82 | }
 83 | 
 84 | /* Horizontal menu that slides from the top or bottom */
 85 | 
 86 | .cbp-spmenu-top {
 87 |     top: -150px;
 88 | }
 89 | 
 90 | .cbp-spmenu-bottom {
 91 |     bottom: -150px;
 92 | }
 93 | 
 94 | .cbp-spmenu-top.menu-open {
 95 |     top: 0px;
 96 | }
 97 | 
 98 | .cbp-spmenu-bottom.menu-open {
 99 |     bottom: 0px;
100 | }
101 | 
102 | /* Push classes applied to the body */
103 | .push-body {
104 |     overflow-x: hidden;
105 |     position: relative;
106 |     left: 0;
107 | }
108 | 
109 | .push-body-toright {
110 |     left: 240px;
111 | }
112 | 
113 | .push-body-toleft {
114 |     left: -240px;
115 | }
116 | 
117 | /* Transitions */
118 | .cbp-spmenu,
119 | .push-body {
120 |     -webkit-transition: all 0.3s ease;
121 |        -moz-transition: all 0.3s ease;
122 |             transition: all 0.3s ease;
123 | }
124 | 
125 | /* Example media queries */
126 | @media screen and (max-width: 55.1875em) {
127 |     .cbp-spmenu-horizontal {
128 |         font-size: 75%;
129 |         height: 110px;
130 |     }
131 | 
132 |     .cbp-spmenu-top {
133 |         top: -110px;
134 |     }
135 | 
136 |     .cbp-spmenu-bottom {
137 |         bottom: -110px;
138 |     }
139 | }
140 | 
141 | @media screen and (max-height: 26.375em) {
142 |     .cbp-spmenu-vertical {
143 |         font-size: 90%;
144 |         width: 190px;
145 |     }
146 | 
147 |     .cbp-spmenu-left,
148 |     .push-body-toleft {
149 |         left: -190px;
150 |     }
151 | 
152 |     .cbp-spmenu-right {
153 |         right: -190px;
154 |     }
155 | 
156 |     .push-body-toright {
157 |         left: 190px;
158 |     }
159 | }
160 | 


--------------------------------------------------------------------------------
/css/demo.css:
--------------------------------------------------------------------------------
  1 | /* General Demo Style
  2 |  * Most likely you don't have to include this css too.
  3 |  */
  4 | 
  5 | body, html { font-size: 100%; 	padding: 0; margin: 0;}
  6 | 
  7 | /* Reset */
  8 | *,
  9 | *:after,
 10 | *:before {
 11 | 	-webkit-box-sizing: border-box;
 12 | 	-moz-box-sizing: border-box;
 13 | 	box-sizing: border-box;
 14 | }
 15 | 
 16 | /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
 17 | .clearfix:before,
 18 | .clearfix:after {
 19 | 	content: " ";
 20 | 	display: table;
 21 | }
 22 | 
 23 | .clearfix:after {
 24 | 	clear: both;
 25 | }
 26 | 
 27 | body {
 28 |     font-family: Calibri, Arial, sans-serif;
 29 |     color: #666;
 30 | 
 31 | }
 32 | 
 33 | a {
 34 | 	color: #868686;
 35 | 	text-decoration: none;
 36 | }
 37 | 
 38 | a:hover {
 39 | 	color: #000;
 40 | }
 41 | 
 42 | .main,
 43 | .container > header ,
 44 | .container > footer {
 45 | 	width: 90%;
 46 | 	max-width: 69em;
 47 | 	margin: 0 auto;
 48 | 	padding: 0 1.875em 3.125em 1.875em;
 49 | }
 50 | 
 51 | .container > header {
 52 | 	padding: 2.875em 1.875em 1.875em;
 53 | }
 54 | 
 55 | .container > header h1 {
 56 | 	font-size: 2.125em;
 57 | 	line-height: 1.3;
 58 | 	margin: 0;
 59 | 	font-weight: 400;
 60 | }
 61 | 
 62 | .container > header span {
 63 | 	display: block;
 64 | 	font-weight: 700;
 65 | 	text-transform: uppercase;
 66 | 	letter-spacing: 0.5em;
 67 | 	padding: 0 0 0.6em 0.1em;
 68 | }
 69 | 
 70 | .container > header nav {
 71 | 	float: right;
 72 | }
 73 | 
 74 | .container > header nav a {
 75 | 	display: block;
 76 | 	float: left;
 77 | 	position: relative;
 78 | 	width: 2.5em;
 79 | 	height: 2.5em;
 80 | 	background: #fff;
 81 | 	border-radius: 50%;
 82 | 	color: transparent;
 83 | 	margin: 0 0.1em;
 84 | 	border: 4px solid #47a3da;
 85 | 	text-indent: -8000px;
 86 | }
 87 | 
 88 | .container > header nav a:after {
 89 | 	content: attr(data-info);
 90 | 	color: #47a3da;
 91 | 	position: absolute;
 92 | 	width: 600%;
 93 | 	top: 120%;
 94 | 	text-align: right;
 95 | 	right: 0;
 96 | 	opacity: 0;
 97 | 	pointer-events: none;
 98 | }
 99 | 
100 | .container > header nav a:hover:after {
101 | 	opacity: 1;
102 | }
103 | 
104 | .container > header nav a:hover {
105 | 	background: #47a3da;
106 | }
107 | 
108 | .main > section {
109 | }
110 | 
111 | .main > section h2 {
112 | 	font-weight: 300;
113 | 	color: #47a3da;
114 | }
115 | 
116 | .main > section button {
117 | 	border: none;
118 | 	background: #47a3da;
119 | 	color: #fff;
120 | 	padding: 1.5em;
121 | 	cursor: pointer;
122 | 	margin: 10px 0;
123 | 	font-size: 0.8em;
124 | }
125 | 
126 | .main > section button:hover {
127 | 	background: #258ecd;
128 | }
129 | 
130 | .main > section button.active {
131 | 	background: #0d77b6;
132 | }
133 | 
134 | .main > section button.disabled {
135 | 	background: #aaa;
136 | 	pointer-events: none;
137 | }
138 | 
139 | .container > header nav a:hover:before {
140 | 	color: #fff;
141 | }
142 | 
143 | textarea.code {
144 | 	width:100%;
145 | 	min-height:150px
146 | }
147 | footer {
148 | 	text-align:center
149 | }
150 | 
151 | .quick-links {
152 |   min-height: 30px;
153 |   margin: 30px 0 0 0;
154 |   padding: 5px 20px;
155 |   list-style: none;
156 |   text-align: center;
157 |   overflow: hidden;
158 | }
159 | .quick-links:first-child {
160 |   min-height: 0;
161 | }
162 | .quick-links li {
163 |   display: inline;
164 |   margin: 0 8px;
165 |   color: #999;
166 | }
167 | .quick-links .github-btn,
168 | .quick-links .tweet-btn,
169 | .quick-links .follow-btn,
170 | .quick-links .gplus-btn,
171 | .quick-links .fb-btn {
172 |   position: relative;
173 |   top: 5px;
174 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 	<head>
  4 | 		<meta charset="UTF-8" />
  5 | 		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6 | 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 | 		<title>jPushMenu, jQuery version of Slide and Push Menus</title>
  8 | 		<meta name="description" content="jPushMenu, Slide and Push Menus" />
  9 | 		<meta name="keywords" content="sliding menu, pushing menu, navigation, responsive, menu, css, jquery, mobile menu" />
 10 | 
 11 | 		<link rel="stylesheet" type="text/css" href="css/demo.css" />
 12 | 
 13 | 		<!--load jPushMenu.css, required-->
 14 | 		<link rel="stylesheet" type="text/css" href="css/jPushMenu.css" />
 15 | 	</head>
 16 | 	<body>
 17 | 		<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left">
 18 | 			<h3>Menu</h3>
 19 | 			<a href="#">Celery seakale</a>
 20 | 			<a href="#">Dulse daikon</a>
 21 | 			<a href="#">Zucchini garlic</a>
 22 | 			<a href="#">Catsear azuki bean</a>
 23 | 			<a href="#">Dandelion bunya</a>
 24 | 			<a href="#">Rutabaga</a>
 25 | 		</nav>
 26 | 		<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right">
 27 | 			<h3>Menu</h3>
 28 | 			<a href="#">Celery seakale</a>
 29 | 			<a href="#">Dulse daikon</a>
 30 | 			<a href="#">Zucchini garlic</a>
 31 | 			<a href="#">Catsear azuki bean</a>
 32 | 			<a href="#">Dandelion bunya</a>
 33 | 			<a href="#">Rutabaga</a>
 34 | 		</nav>
 35 | 		<nav class="cbp-spmenu cbp-spmenu-horizontal cbp-spmenu-top">
 36 | 			<h3>Menu</h3>
 37 | 			<a href="#">Celery seakale</a>
 38 | 			<a href="#">Dulse daikon</a>
 39 | 			<a href="#">Zucchini garlic</a>
 40 | 			<a href="#">Catsear azuki bean</a>
 41 | 			<a href="#">Dandelion bunya</a>
 42 | 			<a href="#">Rutabaga</a>
 43 | 			<a href="#">Celery seakale</a>
 44 | 			<a href="#">Dulse daikon</a>
 45 | 			<a href="#">Zucchini garlic</a>
 46 | 			<a href="#">Catsear azuki bean</a>
 47 | 			<a href="#">Dandelion bunya</a>
 48 | 			<a href="#">Rutabaga</a>
 49 | 		</nav>
 50 | 		<nav class="cbp-spmenu cbp-spmenu-horizontal cbp-spmenu-bottom">
 51 | 			<h3>Menu</h3>
 52 | 			<a href="#">Celery seakale</a>
 53 | 			<a href="#">Dulse daikon</a>
 54 | 			<a href="#">Zucchini garlic</a>
 55 | 			<a href="#">Catsear azuki bean</a>
 56 | 			<a href="#">Dandelion bunya</a>
 57 | 			<a href="#">Rutabaga</a>
 58 | 			<a href="#">Celery seakale</a>
 59 | 			<a href="#">Dulse daikon</a>
 60 | 			<a href="#">Zucchini garlic</a>
 61 | 			<a href="#">Catsear azuki bean</a>
 62 | 			<a href="#">Dandelion bunya</a>
 63 | 			<a href="#">Rutabaga</a>
 64 | 		</nav>
 65 | 		<div class="container">
 66 | 			<header class="clearfix">
 67 | 				<h1>jPushMenu</h1>
 68 | 
 69 | 				<p>A jQuery version of <strong>Slide and Push Menus</strong> by <a target="_blank" href="http://tympanus.net/codrops/?p=14725">Mary Lou</a></p>
 70 | 
 71 | 				 <ul class="quick-links">
 72 | 		<li class="fb-btn">
 73 | 		<fb:like layout="button_count" send="false" href="http://takien.github.io/jPushMenu/"></fb:like>
 74 | 		</li>
 75 | 		  <li class="follow-btn">
 76 | 			<a href="https://twitter.com/cektkp" class="twitter-follow-button" data-link-color="#0069D6" data-show-count="true">Follow @cektkp</a>
 77 | 		  </li>
 78 | 		  <li class="tweet-btn">
 79 | 			<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://takien.github.io/jPushMenu/" data-count="horizontal" data-via="cektkp" data-related="cektkp:Creator of jPushMenu.js">Tweet</a>
 80 | 		  </li>
 81 | 		  <li class="gplus-btn">
 82 | 			<g:plusone url="http://takien.github.io/jPushMenu/" size="medium"></g:plusone>
 83 | 		   </li>
 84 | 		</ul><!--quick-links-->
 85 | 
 86 | 			</header>
 87 | 			<div class="main">
 88 | 				<section>
 89 | 					<h2>jPushMenu Demo</h2>
 90 | 					<p>Click button to show/hide menu</p>
 91 | 
 92 | 					<button class="toggle-menu menu-left">Toggle Left Menu</button>
 93 | 					<button class="toggle-menu menu-left push-body">Toggle Left Menu Push</button>
 94 | 
 95 | 					<button class="toggle-menu menu-right">Toggle Right Menu</button>
 96 | 					<button class="toggle-menu menu-right push-body">Toggle Right Menu Push</button>
 97 | 
 98 | 					<button class="toggle-menu menu-top">Toggle Top Menu</button>
 99 | 					<button class="toggle-menu menu-bottom">Toggle Bottom Menu</button>
100 | 
101 | 				<h2>Changelog</h2>
102 | 				<ul>
103 | 				<li>1.1.1 : Add <code>return false;</code> on button/link.</li>
104 | 				<li>1.1 : Add <code>closeOnClickOutside</code> parameter.</li>
105 | 				<li>1.0 : Initial release</li>
106 | 				</ul>
107 | 					<h2>How to use?</h2>
108 | <h3>Include required style</h3>
109 | <textarea class="code">
110 | <link rel="stylesheet" type="text/css" href="css/jPushMenu.css" />
111 | </textarea>
112 | <h3>Include required script</h3>
113 | <textarea class="code"><!--load jQuery, required-->
114 | <script src="bower_components/jQuery/jquery.min.js"></script>
115 | <!--load jPushMenu, required-->
116 | <script src="js/jPushMenu.js"></script>
117 | 
118 | <!--call jPushMenu, required-->
119 | <script>
120 | jQuery(document).ready(function($) {
121 | 	$('.toggle-menu').jPushMenu();
122 | });
123 | </script>
124 | 
125 | </textarea>
126 | <h3>Make button or link</h3>
127 | <p>The class names are self explained.</p>
128 | <textarea class="code">
129 | <button class="toggle-menu menu-left">Toggle Left Menu</button>
130 | <button class="toggle-menu menu-left push-body">Toggle Left Menu Push</button>
131 | 
132 | <button class="toggle-menu menu-right">Toggle Right Menu</button>
133 | <button class="toggle-menu menu-right push-body">Toggle Right Menu Push</button>
134 | 
135 | <button class="toggle-menu menu-top">Toggle Top Menu</button>
136 | <button class="toggle-menu menu-bottom">Toggle Bottom Menu</button>
137 | </textarea>
138 | 
139 | <h3>Make menu element</h3>
140 | 
141 | <textarea class="code">
142 | <!-- Left menu element-->
143 | <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left">
144 | 	<h3>Menu</h3>
145 | 	<a href="#">Celery seakale</a>
146 | 	<a href="#">Dulse daikon</a>
147 | 	<a href="#">Zucchini garlic</a>
148 | 	<a href="#">Catsear azuki bean</a>
149 | 	<a href="#">Dandelion bunya</a>
150 | 	<a href="#">Rutabaga</a>
151 | </nav>
152 | <!-- Right menu element-->
153 | <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right">
154 | 	<h3>Menu</h3>
155 | 	<a href="#">Celery seakale</a>
156 | 	<a href="#">Dulse daikon</a>
157 | 	<a href="#">Zucchini garlic</a>
158 | 	<a href="#">Catsear azuki bean</a>
159 | 	<a href="#">Dandelion bunya</a>
160 | 	<a href="#">Rutabaga</a>
161 | </nav>
162 | <!-- Top menu element-->
163 | <nav class="cbp-spmenu cbp-spmenu-horizontal cbp-spmenu-top">
164 | 	<h3>Menu</h3>
165 | 	<a href="#">Celery seakale</a>
166 | 	<a href="#">Dulse daikon</a>
167 | 	<a href="#">Zucchini garlic</a>
168 | 	<a href="#">Catsear azuki bean</a>
169 | 	<a href="#">Dandelion bunya</a>
170 | 	<a href="#">Rutabaga</a>
171 | 	<a href="#">Celery seakale</a>
172 | 	<a href="#">Dulse daikon</a>
173 | 	<a href="#">Zucchini garlic</a>
174 | 	<a href="#">Catsear azuki bean</a>
175 | 	<a href="#">Dandelion bunya</a>
176 | 	<a href="#">Rutabaga</a>
177 | </nav>
178 | <!-- Bottom menu element-->
179 | <nav class="cbp-spmenu cbp-spmenu-horizontal cbp-spmenu-bottom">
180 | 	<h3>Menu</h3>
181 | 	<a href="#">Celery seakale</a>
182 | 	<a href="#">Dulse daikon</a>
183 | 	<a href="#">Zucchini garlic</a>
184 | 	<a href="#">Catsear azuki bean</a>
185 | 	<a href="#">Dandelion bunya</a>
186 | 	<a href="#">Rutabaga</a>
187 | 	<a href="#">Celery seakale</a>
188 | 	<a href="#">Dulse daikon</a>
189 | 	<a href="#">Zucchini garlic</a>
190 | 	<a href="#">Catsear azuki bean</a>
191 | 	<a href="#">Dandelion bunya</a>
192 | 	<a href="#">Rutabaga</a>
193 | </nav>
194 | 
195 | </textarea>
196 | 				</section>
197 | 
198 | 			</div>
199 | 
200 | 
201 | 			<footer>
202 | 			&copy; 2013 -  <a target="_blank" href="http://takien.com">takien.com</a>
203 | 			</footer>
204 | 		</div>
205 | 
206 | 		<a target="_blank" href="https://github.com/takien/jPushMenu"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
207 | 
208 | 		<!--load jQuery, required-->
209 | 		<script src="js/jquery-1.9.1.min.js"></script>
210 | 		<!--load jPushMenu, required-->
211 | 		<script src="js/jPushMenu.js"></script>
212 | 
213 | 		<!--call jPushMenu, required-->
214 | 		<script>
215 | 		jQuery(document).ready(function($) {
216 | 			$('.toggle-menu').jPushMenu();
217 | 		});
218 | 		</script>
219 | 
220 | 		<!--for docs purpose only :p-->
221 | <div id="fb-root"></div>
222 | <script>(function(d, s, id) {
223 |   var js, fjs = d.getElementsByTagName(s)[0];
224 |   if (d.getElementById(id)) return;
225 |   js = d.createElement(s); js.id = id;
226 |   js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=394280927787";
227 |   fjs.parentNode.insertBefore(js, fjs);
228 | }(document, 'script', 'facebook-jssdk'));</script>
229 | <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
230 | <!-- Place this render call where appropriate -->
231 | <script type="text/javascript">
232 |   (function() {
233 |     var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
234 |     po.src = 'https://apis.google.com/js/plusone.js';
235 |     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
236 |   })();
237 | </script>
238 | 	</body>
239 | </html>
240 | 


--------------------------------------------------------------------------------