├── examples
├── assets
│ ├── images
│ │ ├── cover.png
│ │ ├── cover.psd
│ │ ├── logo.png
│ │ ├── favicon-16x16.png
│ │ ├── favicon-32x32.png
│ │ └── favicon-64x64.png
│ ├── style.min.css
│ └── script.min.js
├── example-json.html
├── example-html-icons.html
└── example-html.html
├── dist
├── css
│ ├── sliding-menu.min.css
│ └── sliding-menu.css
└── js
│ ├── sliding-menu.min.js
│ └── sliding-menu.js
└── README.md
/examples/assets/images/cover.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danielcardoso/sliding-menu/HEAD/examples/assets/images/cover.png
--------------------------------------------------------------------------------
/examples/assets/images/cover.psd:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danielcardoso/sliding-menu/HEAD/examples/assets/images/cover.psd
--------------------------------------------------------------------------------
/examples/assets/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danielcardoso/sliding-menu/HEAD/examples/assets/images/logo.png
--------------------------------------------------------------------------------
/examples/assets/images/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danielcardoso/sliding-menu/HEAD/examples/assets/images/favicon-16x16.png
--------------------------------------------------------------------------------
/examples/assets/images/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danielcardoso/sliding-menu/HEAD/examples/assets/images/favicon-32x32.png
--------------------------------------------------------------------------------
/examples/assets/images/favicon-64x64.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danielcardoso/sliding-menu/HEAD/examples/assets/images/favicon-64x64.png
--------------------------------------------------------------------------------
/dist/css/sliding-menu.min.css:
--------------------------------------------------------------------------------
1 | /*! =========================================================
2 | * Sliding Menu v0.3.0
3 | * http://github.danielcardoso.net/sliding-menu/
4 | * ==========================================================
5 | * Copyright (c) 2014-2019 DanielCardoso.net.
6 | * Licensed under MIT.
7 | * ======================================================== */
8 | .sliding-menu{position:relative;overflow:hidden;background-color:rgba(255,255,255,0.5);text-align:left;font-size:21px}.sliding-menu__panel{position:absolute;top:0;left:100%;width:100%}.sliding-menu li{padding:0;margin:0;list-style:none}.sliding-menu li a,.sliding-menu li .sliding-menu__nav{display:block;padding:.8em 1em;text-align:left;font-size:21px;line-height:1.4em;color:#333;text-decoration:none;border-width:0;width:100%;background-color:transparent;-webkit-transition:color 250ms ease, background-color 250ms ease;-moz-transition:color 250ms ease, background-color 250ms ease;-o-transition:color 250ms ease, background-color 250ms ease;transition:color 250ms ease, background-color 250ms ease}.sliding-menu li a:hover,.sliding-menu li .sliding-menu__nav:hover{color:#fff;background-color:#333}.sliding-menu .active a{color:#fff;background-color:#333}.sliding-menu .sliding-menu__nav:before{float:right;margin-left:1em;content:"\3009"}.sliding-menu .sliding-menu__back{color:#fff;background-color:#555;font-weight:bold}.sliding-menu .sliding-menu__back:before{float:left;margin-right:1em;content:"\3008"}.sliding-menu .sliding-menu__icon{margin-right:.4em}.sliding-menu .sliding-menu__separator{margin:.4em 1em;border-top:2px solid #555}
9 |
--------------------------------------------------------------------------------
/dist/css/sliding-menu.css:
--------------------------------------------------------------------------------
1 | /*! =========================================================
2 | * Sliding Menu v0.3.0
3 | * http://github.danielcardoso.net/sliding-menu/
4 | * ==========================================================
5 | * Copyright (c) 2014-2019 DanielCardoso.net.
6 | * Licensed under MIT.
7 | * ======================================================== */
8 | .sliding-menu {
9 | position: relative;
10 | overflow: hidden;
11 | background-color: rgba(255, 255, 255, 0.5);
12 | text-align: left;
13 | font-size: 21px;
14 | }
15 |
16 | .sliding-menu__panel {
17 | position: absolute;
18 | top: 0;
19 | left: 100%;
20 | width: 100%;
21 | }
22 |
23 | .sliding-menu li {
24 | padding: 0;
25 | margin: 0;
26 | list-style: none;
27 | }
28 |
29 | .sliding-menu li a,
30 | .sliding-menu li .sliding-menu__nav {
31 | display: block;
32 | padding: .8em 1em;
33 | text-align: left;
34 | font-size: 21px;
35 | line-height: 1.4em;
36 | color: #333;
37 | text-decoration: none;
38 | border-width: 0;
39 | width: 100%;
40 | background-color: transparent;
41 | -webkit-transition: color 250ms ease, background-color 250ms ease;
42 | -moz-transition: color 250ms ease, background-color 250ms ease;
43 | -o-transition: color 250ms ease, background-color 250ms ease;
44 | transition: color 250ms ease, background-color 250ms ease;
45 | }
46 |
47 | .sliding-menu li a:hover,
48 | .sliding-menu li .sliding-menu__nav:hover {
49 | color: #fff;
50 | background-color: #333;
51 | }
52 |
53 | .sliding-menu .active a {
54 | color: #fff;
55 | background-color: #333;
56 | }
57 |
58 | .sliding-menu .sliding-menu__nav:before {
59 | float: right;
60 | margin-left: 1em;
61 | content: "\3009";
62 | }
63 |
64 | .sliding-menu .sliding-menu__back {
65 | color: #fff;
66 | background-color: #555;
67 | font-weight: bold;
68 | }
69 |
70 | .sliding-menu .sliding-menu__back:before {
71 | float: left;
72 | margin-right: 1em;
73 | content: "\3008";
74 | }
75 |
76 | .sliding-menu .sliding-menu__icon {
77 | margin-right: .4em;
78 | }
79 |
80 | .sliding-menu .sliding-menu__separator {
81 | margin: .4em 1em;
82 | border-top: 2px solid #555;
83 | }
84 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | Sliding Menu
2 | ============
3 |
4 | ## Description
5 | Sliding Menu Plugin - Mobile app list-style navigation in the browser.
6 | Inspired on jquery-sliding-menu (by Alizahid).
7 |
8 | [Live Preview](http://github.danielcardoso.net/sliding-menu/)
9 |
10 | ```
11 | dist/
12 | ├── css
13 | ├──── sliding-menu.css
14 | ├──── sliding-menu.min.css
15 | ├── js
16 | ├──── sliding-menu.js
17 | ├──── sliding-menu.min.js
18 | ```
19 |
20 |
21 | ## Installation
22 |
23 | ##### Standalone:
24 |
25 | ```html
26 |
27 |
28 | ```
29 |
30 |
31 | ## Usage
32 | ##### JavaScript
33 | ```js
34 | $('#menu').slidingMenu(settings);
35 | ```
36 |
37 |
38 | ##### HTML
39 | ```html
40 |
41 | ```
42 |
43 | ## Settings and Defaults
44 | ```js
45 | defaults = {
46 | className : "",
47 | transitionDuration : 250,
48 | dataJSON : false,
49 | initHref : false,
50 | backLabel: 'Back'
51 | };
52 | ```
53 |
54 | - `className` : Adicional class for menu element. (String)
55 | - `transitionDuration` : Default slide animation speed. (Number)
56 | - `dataJSON` :A JSON object to build the menu from. Check our JSON example. (Boolean)
57 | - `initHref` : The link to the selected panel. Set to false (boolean) to use the root panel. (String)
58 | - `backLabel` : Label for the back button. Set to `true` (boolean) to use the link's own label. (String)
59 |
60 |
61 | ## Contact
62 |
63 | If you like this component, share your appreciation by following me in [Twitter](https://twitter.com/DanielCardoso), [GitHub](https://github.com/DanielCardoso) or [Dribbble](http://dribbble.com/DanielCardoso).
64 |
65 |
66 | ## License
67 |
68 | The MIT License (MIT)
69 |
70 | Copyright (c) 2014-2015 Daniel Cardoso
71 |
72 | Permission is hereby granted, free of charge, to any person obtaining a copy of
73 | this software and associated documentation files (the "Software"), to deal in
74 | the Software without restriction, including without limitation the rights to
75 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
76 | the Software, and to permit persons to whom the Software is furnished to do so,
77 | subject to the following conditions:
78 |
79 | The above copyright notice and this permission notice shall be included in all
80 | copies or substantial portions of the Software.
81 |
82 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
83 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
84 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
85 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
86 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
87 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
88 |
--------------------------------------------------------------------------------
/dist/js/sliding-menu.min.js:
--------------------------------------------------------------------------------
1 | /*! =========================================================
2 | * Sliding Menu v0.3.0
3 | * http://github.danielcardoso.net/sliding-menu/
4 | * ==========================================================
5 | * Copyright (c) 2014-2019 DanielCardoso.net.
6 | * Licensed under MIT.
7 | * ======================================================== */
8 | if("undefined"==typeof jQuery)throw new Error("Sliding Menu requires jQuery");!function(t){"use strict";"function"==typeof define&&define.amd?define(["jquery"],t):t(jQuery)}(function(l){"use strict";var e,h;e=[],(h=function(t,e){this.options=void 0,this.$el=void 0,this.currentPanel=void 0,this.init(t,e)}).NAME="Sliding Menu",h.VERSION="0.3.0",h.PANEL_CLASS=(h.MAIN_CLASS="sliding-menu")+"__panel",h.ICON_CLASS=h.MAIN_CLASS+"__icon",h.NAVIGATION_CLASS=h.MAIN_CLASS+"__nav",h.BACK_CLASS=h.MAIN_CLASS+"__back",h.SEPARATOR_CLASS=h.MAIN_CLASS+"__separator",h.SET_ICON_CLASS="sm-set-icon",h.DEFAULTS={className:"",transitionDuration:250,dataJSON:!1,initHref:!1,backLabel:"Back"},h.prototype.init=function(t,e){this.$el=l(t),this.$el.hasClass(h.MAIN_CLASS)||(this.options=this.getOptions(e),this.events(),this.process())},h.prototype.$=function(t){return this.$el.find(t)},h.prototype.events=function(){this.$el.on("click","a, ."+h.NAVIGATION_CLASS,l.proxy(this._onClickItem,this))},h.prototype._onClickItem=function(t){var e,i,s;void 0!==(e=l(t.currentTarget)).attr("data-id")&&(s=e.hasClass(h.BACK_CLASS),i=this.$("."+h.PANEL_CLASS+'[data-id="'+e.attr("data-id")+'"]'),this.currentPanel.attr("data-id")!==i.attr("data-id")?(this.currentPanel.stop(!0,!0).animate({left:s?"100%":"-100%"},this.options.transitionDuration),i.stop(!0,!0).css("left",s?"-100%":"100%").animate({left:0},this.options.transitionDuration),this.$el.stop(!0,!0).animate({height:i.height()},this.options.transitionDuration)):(i.css({left:0}),this.$el.height(i.height())),this.currentPanel=i),e.hasClass(h.NAVIGATION_CLASS)||(this.$("li.active").removeClass("active"),e.closest("li").addClass("active"))},h.prototype.process=function(){var t;t=!0===this.options.dataJSON?this.processJSON(this.options.dataJSON):this.processHTML(),this.setMenuContent(t)},h.prototype.processJSON=function(t,e,i){var s,n;return s={id:h.PANEL_CLASS+"-"+this.getNewId(),root:!e,children:[]},n=[],e&&s.children.push({panelId:e.id,href:!1,label:!0===this.options.backLabel?i:this.options.backLabel,_styleClass:h.BACK_CLASS+" "+h.NAVIGATION_CLASS}),l(t).each(l.proxy(function(t,e){var i;s.children.push(e),e.children&&(i=this.processJSON(e.children,s,e.label),e.panelId=i[0].id,e._styleClass=h.NAVIGATION_CLASS,n=n.concat(i),delete e.children)},this)),[s].concat(n)},h.prototype.processHTML=function(t,e,i){var r,o;return r={id:h.PANEL_CLASS+"-"+this.getNewId(),root:!t,children:[]},o=[],void 0!==t?r.children.push({panelId:e.id,href:!1,label:!0===this.options.backLabel?i:this.options.backLabel,_styleClass:h.BACK_CLASS+" "+h.NAVIGATION_CLASS}):t=this.$el.children("ul"),t.children("li").each(l.proxy(function(t,e){var i,s,n,a;(e=l(e)).hasClass("separator")?i={separator:!0}:(void 0!==(i={icon:(s=e.children("a")).find("."+h.SET_ICON_CLASS).attr("class")||void 0,href:s.attr("href"),label:this.trimWhiteSpaces(s.text()),classNames:{parent:this.trimWhiteSpaces(e.attr("class")||""),element:this.trimWhiteSpaces(s.attr("class")||"")}}).icon&&(i.icon=i.icon.replace(h.SET_ICON_CLASS,"")),0!==(a=e.children("ul")).length&&(n=this.processHTML(a,r,i.label),i.panelId=n[0].id,i._styleClass=h.NAVIGATION_CLASS,o=o.concat(n))),r.children.push(i)},this)),[r].concat(o)},h.prototype.setMenuContent=function(t){var i;this.$el.empty().addClass(h.MAIN_CLASS+" "+this.options.className),l(t).each(l.proxy(function(t,e){var a;a=l(""),e.root&&(i="."+h.PANEL_CLASS+'[data-id="'+e.id+'"]'),a.attr("data-id",e.id),a.addClass(h.PANEL_CLASS),l(e.children).each(function(t,e){var i,s,n;i=l(" "),!0!==e.separator?(s=e.panelId?l(" "):l(" "),void 0!==e.classNames&&(i.addClass(e.classNames.parent),s.addClass(e.classNames.element)),s.addClass(e._styleClass),e.panelId?s.attr({type:"button","data-id":e.panelId}):s.attr({href:e.href}),s.text(e.label),e.icon&&((n=l(" ")).addClass(h.ICON_CLASS+" "+e.icon),s.prepend(n)),i.append(s)):i.addClass(h.SEPARATOR_CLASS),a.append(i)}),this.$el.append(a)},this)),(i=this.$(i)).addClass(h.PANEL_CLASS+"-root"),this.currentPanel=i,!1!==this.options.initHref?this.changeVisiblePanel():this.currentPanel.css("left",0),this.$el.height(this.currentPanel.height())},h.prototype.changeVisiblePanel=function(){var t,e;0!==(t=this.getHyperlinkByHref(this.options.initHref)).length?(t.closest("li").addClass("active"),e=this.getPanelByHref(this.options.initHref),this.currentPanel=e):console.warn(h.NAME+': the link "'+this.options.initHref+'" does not exists. Please check the '+(!1!==this.options.dataJSON?"JSON object":"HTML structure")+"."),this.options.initHref=!1,this.currentPanel.css("left",0)},h.prototype.trimWhiteSpaces=function(t){return t.trim()},h.prototype.getDefaults=function(){return h.DEFAULTS},h.prototype.getOptions=function(t){return l.extend({},this.getDefaults(),this.$el.data(),t)},h.prototype.getHyperlinkByHref=function(t){return this.$('a[href="'+t+'"]')||void 0},h.prototype.getPanelByHref=function(t){var e=this.getHyperlinkByHref(t);return void 0!==e?e.closest("ul"):void 0},h.prototype.getNewId=function(){for(var t;t=Math.random().toString(36).substring(2,9),0<=e.indexOf(t););return e.push(t),t};var t=l.fn.slidingMenu;l.fn.slidingMenu=function(s){return this.each(function(){var t,e,i;e=(t=l(this)).data("dc.slidingMenu"),i="object"==typeof s&&s,!e&&/destroy|hide/.test(s)||(e||t.data("dc.slidingMenu",e=new h(this,i)),"string"==typeof s&&e[s]())})},l.fn.slidingMenu.Constructor=h,l.fn.slidingMenu.noConflict=function(){return l.fn.slidingMenu=t,this}});
--------------------------------------------------------------------------------
/examples/example-json.html:
--------------------------------------------------------------------------------
1 |
2 |
14 |
15 |
16 |
17 |
18 |
19 | Sliding Menu
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
44 |
66 |
71 |
72 |
73 |
137 |
138 |
--------------------------------------------------------------------------------
/examples/example-html-icons.html:
--------------------------------------------------------------------------------
1 |
2 |
14 |
15 |
16 |
17 |
18 |
19 | Sliding Menu
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
44 |
122 |
127 |
128 |
129 |
138 |
139 |
--------------------------------------------------------------------------------
/dist/js/sliding-menu.js:
--------------------------------------------------------------------------------
1 | /*! =========================================================
2 | * Sliding Menu v0.3.0
3 | * http://github.danielcardoso.net/sliding-menu/
4 | * ==========================================================
5 | * Copyright (c) 2014-2019 DanielCardoso.net.
6 | * Licensed under MIT.
7 | * ======================================================== */
8 | if (typeof jQuery === 'undefined') {
9 | throw new Error('Sliding Menu requires jQuery');
10 | }
11 | (function (factory) {
12 | 'use strict';
13 | if (typeof define === 'function' && define.amd) {
14 | define(['jquery'], factory);
15 | } else {
16 | factory(jQuery);
17 | }
18 | }(function ($) {
19 | 'use strict';
20 | var slidingMenuUsedIds, SlidingMenu;
21 |
22 | slidingMenuUsedIds = [];
23 |
24 | SlidingMenu = function (element, options) {
25 | this.options = undefined;
26 | this.$el = undefined;
27 | this.currentPanel = undefined;
28 |
29 | this.init(element, options);
30 | };
31 |
32 | SlidingMenu.NAME = 'Sliding Menu';
33 |
34 | SlidingMenu.VERSION = '0.3.0';
35 |
36 | SlidingMenu.MAIN_CLASS = 'sliding-menu';
37 |
38 | SlidingMenu.PANEL_CLASS = SlidingMenu.MAIN_CLASS + '__panel';
39 |
40 | SlidingMenu.ICON_CLASS = SlidingMenu.MAIN_CLASS + '__icon';
41 |
42 | SlidingMenu.NAVIGATION_CLASS = SlidingMenu.MAIN_CLASS + '__nav';
43 |
44 | SlidingMenu.BACK_CLASS = SlidingMenu.MAIN_CLASS + '__back';
45 |
46 | SlidingMenu.SEPARATOR_CLASS = SlidingMenu.MAIN_CLASS + '__separator';
47 |
48 | SlidingMenu.SET_ICON_CLASS = 'sm-set-icon';
49 |
50 | SlidingMenu.DEFAULTS = {
51 | // Adicional class for menu element
52 | className: '',
53 | // Default slide animation speed
54 | transitionDuration: 250,
55 | // A JSON object to build the menu from. Check our JSON example.
56 | dataJSON: false,
57 | // The link to the selected panel. Set to false to use the root panel
58 | initHref: false,
59 | // Label for the back button. Set to true to use the link's own label
60 | backLabel: 'Back'
61 | };
62 |
63 | SlidingMenu.prototype.init = function (element, options) {
64 | this.$el = $(element);
65 |
66 | if (this.$el.hasClass(SlidingMenu.MAIN_CLASS)) {
67 | return;
68 | }
69 |
70 | this.options = this.getOptions(options);
71 | this.events();
72 | this.process();
73 | };
74 |
75 | SlidingMenu.prototype.$ = function (selector) {
76 | return this.$el.find(selector);
77 | };
78 |
79 | SlidingMenu.prototype.events = function () {
80 | this.$el.on('click', 'a, .' + SlidingMenu.NAVIGATION_CLASS, $.proxy(this._onClickItem, this));
81 | };
82 |
83 | SlidingMenu.prototype._onClickItem = function (event) {
84 | var linker, targetPanel, movePanelTo;
85 |
86 | linker = $(event.currentTarget);
87 |
88 | if (linker.attr('data-id') !== undefined) {
89 |
90 | movePanelTo = linker.hasClass(SlidingMenu.BACK_CLASS);
91 | targetPanel = this.$('.' + SlidingMenu.PANEL_CLASS + '[data-id="' + linker.attr('data-id') + '"]');
92 |
93 | if (this.currentPanel.attr('data-id') !== targetPanel.attr('data-id')) {
94 | this.currentPanel.stop(true, true).animate({
95 | left: movePanelTo ? '100%' : '-100%'
96 | }, this.options.transitionDuration);
97 |
98 | targetPanel.stop(true, true).css('left', movePanelTo ? '-100%' : '100%').animate({
99 | left: 0
100 | }, this.options.transitionDuration);
101 |
102 | this.$el.stop(true, true).animate({
103 | height: targetPanel.height()
104 | }, this.options.transitionDuration);
105 | } else {
106 | targetPanel.css({
107 | 'left': 0
108 | });
109 | this.$el.height(targetPanel.height());
110 | }
111 |
112 | this.currentPanel = targetPanel;
113 | }
114 |
115 | if (!linker.hasClass(SlidingMenu.NAVIGATION_CLASS)) {
116 | this.$('li.active').removeClass('active');
117 | linker.closest('li').addClass('active');
118 | }
119 | };
120 |
121 | SlidingMenu.prototype.process = function () {
122 | var data;
123 |
124 | if (this.options.dataJSON === true) {
125 | data = this.processJSON(this.options.dataJSON);
126 | } else {
127 | data = this.processHTML();
128 | }
129 |
130 | this.setMenuContent(data);
131 | };
132 |
133 | SlidingMenu.prototype.processJSON = function (data, parent, backLabel) {
134 | var root, panels;
135 |
136 | root = {
137 | id: SlidingMenu.PANEL_CLASS + '-' + this.getNewId(),
138 | root: parent ? false : true,
139 | children: []
140 | };
141 | panels = [];
142 |
143 | if (parent) {
144 | root.children.push({
145 | panelId: parent.id,
146 | href: false,
147 | label: this.options.backLabel === true ? backLabel : this.options.backLabel,
148 | _styleClass: SlidingMenu.BACK_CLASS + ' ' + SlidingMenu.NAVIGATION_CLASS
149 | });
150 | }
151 |
152 | $(data).each($.proxy(function (index, item) {
153 | var panel;
154 |
155 | root.children.push(item);
156 |
157 | if (item.children) {
158 | panel = this.processJSON(item.children, root, item.label);
159 | item.panelId = panel[0].id;
160 | item._styleClass = SlidingMenu.NAVIGATION_CLASS;
161 | panels = panels.concat(panel);
162 |
163 | // Delete all childrens
164 | delete item.children;
165 | }
166 | }, this));
167 |
168 | return [root].concat(panels);
169 | };
170 |
171 | SlidingMenu.prototype.processHTML = function (parentElem, parentObj, backLabel) {
172 | var root, panels;
173 |
174 | root = {
175 | id: SlidingMenu.PANEL_CLASS + '-' + this.getNewId(),
176 | root: parentElem ? false : true,
177 | children: []
178 | };
179 | panels = [];
180 |
181 | if (parentElem !== undefined) {
182 | root.children.push({
183 | panelId: parentObj.id,
184 | href: false,
185 | label: this.options.backLabel === true ? backLabel : this.options.backLabel,
186 | _styleClass: SlidingMenu.BACK_CLASS + ' ' + SlidingMenu.NAVIGATION_CLASS
187 | });
188 | } else {
189 | parentElem = this.$el.children('ul');
190 | }
191 |
192 | parentElem.children('li').each($.proxy(function (key, item) {
193 | var itemObj, itemLink, panel, subPanel;
194 |
195 | item = $(item);
196 |
197 | if (!item.hasClass('separator')) {
198 | itemLink = item.children('a');
199 |
200 | itemObj = {
201 | icon: itemLink.find('.' + SlidingMenu.SET_ICON_CLASS).attr('class') || undefined,
202 | href: itemLink.attr('href'),
203 | label: this.trimWhiteSpaces(itemLink.text()),
204 | classNames: {
205 | parent: this.trimWhiteSpaces(item.attr('class') || ''),
206 | element: this.trimWhiteSpaces(itemLink.attr('class') || '')
207 | }
208 | };
209 |
210 | if (itemObj.icon !== undefined) {
211 | itemObj.icon = (itemObj.icon).replace(SlidingMenu.SET_ICON_CLASS, '');
212 | }
213 |
214 | subPanel = item.children('ul');
215 | if (subPanel.length !== 0) {
216 | panel = this.processHTML(subPanel, root, itemObj.label);
217 |
218 | itemObj.panelId = panel[0].id;
219 | itemObj._styleClass = SlidingMenu.NAVIGATION_CLASS;
220 | panels = panels.concat(panel);
221 | }
222 | } else {
223 | itemObj = {
224 | separator: true
225 | };
226 | }
227 |
228 | root.children.push(itemObj);
229 | }, this));
230 |
231 | return [root].concat(panels);
232 | };
233 |
234 | SlidingMenu.prototype.setMenuContent = function (json) {
235 | var rootPanel;
236 |
237 | this.$el
238 | .empty()
239 | .addClass(SlidingMenu.MAIN_CLASS + ' ' + this.options.className);
240 |
241 | $(json).each($.proxy(function (index, item) {
242 | var panel;
243 | panel = $('');
244 |
245 | if (item.root) {
246 | rootPanel = '.' + SlidingMenu.PANEL_CLASS + '[data-id="' + item.id + '"]';
247 | }
248 |
249 | // panel.attr('id', item.id);
250 | panel.attr('data-id', item.id);
251 | panel.addClass(SlidingMenu.PANEL_CLASS);
252 |
253 | $(item.children).each(function (index, item) {
254 | var li, link, icon;
255 |
256 | li = $(' ');
257 |
258 | if (item.separator !== true) {
259 | link = item.panelId ? $(' ') : $(' ');
260 |
261 | if (item.classNames !== undefined) {
262 | li.addClass(item.classNames.parent);
263 | link.addClass(item.classNames.element);
264 | }
265 |
266 | link.addClass(item._styleClass);
267 |
268 | if (item.panelId) {
269 | link.attr({
270 | 'type': 'button',
271 | 'data-id': item.panelId
272 | });
273 | } else {
274 | link.attr({
275 | 'href': item.href
276 | });
277 | }
278 |
279 | link.text(item.label);
280 |
281 | if (item.icon) {
282 | icon = $(' ');
283 | icon.addClass(SlidingMenu.ICON_CLASS + ' ' + item.icon);
284 |
285 | link.prepend(icon);
286 | }
287 | li.append(link);
288 | } else {
289 | li.addClass(SlidingMenu.SEPARATOR_CLASS);
290 | }
291 |
292 | panel.append(li);
293 | });
294 |
295 | this.$el.append(panel);
296 | }, this));
297 |
298 | rootPanel = this.$(rootPanel);
299 |
300 | rootPanel.addClass(SlidingMenu.PANEL_CLASS + '-root');
301 | this.currentPanel = rootPanel;
302 |
303 | if (this.options.initHref !== false) {
304 | this.changeVisiblePanel();
305 | } else {
306 | this.currentPanel.css('left', 0);
307 | }
308 |
309 | this.$el.height(this.currentPanel.height());
310 | };
311 |
312 | SlidingMenu.prototype.changeVisiblePanel = function () {
313 | var selectedLink, selectedPanel;
314 |
315 | selectedLink = this.getHyperlinkByHref(this.options.initHref)
316 |
317 | if (selectedLink.length !== 0) {
318 | selectedLink.closest('li').addClass('active');
319 | selectedPanel = this.getPanelByHref(this.options.initHref);
320 | this.currentPanel = selectedPanel;
321 | } else {
322 | console.warn(SlidingMenu.NAME + ': the link "' + this.options.initHref + '" does not exists. Please ' +
323 | 'check the ' + (this.options.dataJSON !== false ? 'JSON object' : 'HTML structure') + '.');
324 | }
325 |
326 | this.options.initHref = false;
327 | this.currentPanel.css('left', 0);
328 | };
329 |
330 | SlidingMenu.prototype.trimWhiteSpaces = function (text) {
331 | return text.trim();
332 | };
333 |
334 | SlidingMenu.prototype.getDefaults = function () {
335 | return SlidingMenu.DEFAULTS;
336 | };
337 |
338 | SlidingMenu.prototype.getOptions = function (options) {
339 | return $.extend({}, this.getDefaults(), this.$el.data(), options);
340 | };
341 |
342 | SlidingMenu.prototype.getHyperlinkByHref = function (href) {
343 | return this.$('a[href="' + href + '"]') || undefined;
344 | };
345 |
346 | SlidingMenu.prototype.getPanelByHref = function (href) {
347 | var linkElement = this.getHyperlinkByHref(href);
348 | return linkElement !== undefined ? linkElement.closest('ul') : undefined;
349 | };
350 |
351 | /**
352 | * Create a new ID
353 | * @return {Number} New id generated
354 | */
355 | SlidingMenu.prototype.getNewId = function () {
356 | var id;
357 |
358 | do {
359 | id = Math.random().toString(36).substring(2, 9);
360 | } while (slidingMenuUsedIds.indexOf(id) >= 0);
361 |
362 | slidingMenuUsedIds.push(id);
363 |
364 | return id;
365 | };
366 |
367 | // PLUGIN DEFINITION
368 | // =======================
369 | //
370 | function Plugin(option) {
371 | return this.each(function () {
372 | var $this, data, options;
373 |
374 | $this = $(this);
375 | data = $this.data('dc.slidingMenu');
376 | options = typeof option === 'object' && option;
377 |
378 | if (!data && /destroy|hide/.test(option)) {
379 | return;
380 | }
381 | if (!data) {
382 | $this.data('dc.slidingMenu', (data = new SlidingMenu(this, options)));
383 | }
384 | if (typeof option === 'string') {
385 | data[option]();
386 | }
387 | });
388 | }
389 |
390 | var old = $.fn.slidingMenu;
391 | $.fn.slidingMenu = Plugin;
392 | $.fn.slidingMenu.Constructor = SlidingMenu;
393 |
394 | // SLIDINGMENU NO CONFLICT
395 | // =================
396 |
397 | $.fn.slidingMenu.noConflict = function () {
398 | $.fn.slidingMenu = old;
399 | return this;
400 | };
401 | }));
402 |
--------------------------------------------------------------------------------
/examples/assets/style.min.css:
--------------------------------------------------------------------------------
1 | html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #cccccc;margin:1em 0;padding:0}input,select{vertical-align:middle}*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font-family:'Helvetica Neue', sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{font:200 1.4em/1.67em Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;color:#fff;cursor:default}body>.overlay{position:absolute;top:0;bottom:0;z-index:1;width:100%}a{color:#333;text-decoration:none;outline:none;-webkit-transition:all 300ms ease;-moz-transition:all 300ms ease;-o-transition:all 300ms ease;transition:all 300ms ease}a:hover{color:#111}.hide{height:0;overflow:hidden}h1{font-size:3em;font-weight:100;line-height:normal}h2{margin:1.0em 0 .5em 0;font-size:2em;font-weight:100;line-height:normal}h3{margin:1.5em 0 .25em 0;font-size:1.1em;font-weight:100;line-height:normal}h1 small,h2 small,h3 small{font-size:60%;color:inherit;text-transform:lowercase;opacity:0.7}pre{padding:1.4em;font-size:.55em;line-height:1.3em;color:#333;-moz-tab-size:4;-o-tab-size:4;tab-size:4;background:rgba(255,255,255,0.6)}table pre{padding:1.1em;font-size:.8em;color:#333;background:rgba(255,255,255,0.3)}table{width:100%;border-spacing:0;border-collapse:collapse;background:rgba(255,255,255,0.4)}table tr{font-size:16px}th,td{padding:1em;font-weight:300;line-height:1;text-align:left;vertical-align:top}tbody th{font-family:"Consolas", monospace}tbody tr:nth-child(2n+1){background:rgba(0,0,0,0.2)}.canvas{position:absolute;top:0;bottom:0;z-index:4;width:100%;padding:80px 0 60px;-webkit-transition:background .2s ease-in-out;-moz-transition:background .2s ease-in-out;-ms-transition:background .2s ease-in-out;-o-transition:background .2s ease-in-out;transition:background .2s ease-in-out}.canvas__scroller{position:relative;height:100%;padding:30px 0}.canvas__container{position:relative;top:30px !important;bottom:30px !important}.canvas__container section{width:80%;max-width:720px;margin:0 auto}.header{position:absolute;top:0;width:100%;height:80px;padding-left:20px;padding-right:20px;background:#fff;background:rgba(255,255,255,0.8);z-index:5;text-align:center}.header:before,.header:after{content:"";display:table}.header:after{clear:both}@media (min-width: 500px){.header{text-align:none}}.header__intro{display:inline-block;margin-top:15px;overflow:hidden;width:155px}@media (min-width: 500px){.header__intro{float:left}}.header__logo{height:50px;display:block}.header__byline{margin:0;padding:0;font-size:12px;color:#979292;letter-spacing:0.03rem}.header__share-btns{display:none;float:right;margin-top:23px}@media (min-width: 500px){.header__share-btns{display:inline-block}}.navigation__item{-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;display:inline-block;height:60px;width:40px;text-align:center;background-color:rgba(255,255,255,0.1);cursor:pointer}.navigation__item:hover{background-color:rgba(255,255,255,0.5)}.navigation__item:first-child{position:absolute;color:#fff;display:block;z-index:99;top:50%;left:0}.navigation__item:last-child{position:absolute;color:#fff;display:block;z-index:99;top:50%;right:0}.navigation__arrow{margin:0;padding:0;opacity:0.9}.navigation__arrow:before{margin-top:22px;display:inline-block}.footer{position:absolute;bottom:0;width:100%;height:60px;text-align:center;z-index:5;overflow:hidden;background:rgba(0,0,0,0.15)}.footer:before,.footer:after{content:"";display:table}.footer:after{clear:both}@media (min-width: 500px){.footer{text-align:none}}.footer__toggle{float:left;margin-bottom:20px;margin-left:20px;margin-top:3px}.footer__footnote{-webkit-font-smoothing:antialiased;-moz-font-smoothing:antialiased;-ms-font-smoothing:antialiased;-o-font-smoothing:antialiased;font-smoothing:antialiased;margin-right:20px;font-size:10px;color:#fff;line-height:59px}@media (min-width: 500px){.footer__footnote{float:right}}.footer__footnote a{text-decoration:none;color:white}.footer__keyboard{float:left;width:35px;margin-right:20px;margin-top:20px;margin-left:20px;display:none}@media (min-width: 500px){.footer__keyboard{display:block}}.footer__gradient-btn{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-ms-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;float:left;padding-left:8px;padding-right:8px;margin-top:19px;margin-left:20px;border-radius:2px;border:solid 1px rgba(255,255,255,0);background-color:rgba(255,255,255,0.15);color:rgba(255,255,255,0.9);text-decoration:none;display:none}.footer__gradient-btn:before,.footer__gradient-btn:after{content:"";display:table}.footer__gradient-btn:after{clear:both}@media (min-width: 500px){.footer__gradient-btn{display:block}}.footer__gradient-btn span{float:left;display:inline-block;vertical-align:top;height:23px;line-height:23px;font-size:12px}.footer__gradient-btn span.text{font-size:10px}.footer__gradient-btn span.icon{margin-right:8px}.footer__gradient-btn:hover{border:solid 1px rgba(255,255,255,0.15);background-color:rgba(255,255,255,0.3);color:#fff}.footer__gradient-btn.active{border:solid 1px rgba(255,255,255,0.75);background-color:rgba(255,255,255,0.4);color:#fff}.social-sharing{font-family:"HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif}.social-sharing *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.social-sharing a{display:inline-block;height:20px;margin:0 10px 10px 0;font-weight:normal;line-height:20px;color:#fff;text-decoration:none;border-radius:2px}.social-sharing a:hover{color:#fff}.social-sharing span{display:inline-block;height:20px;font-size:12px;line-height:20px;vertical-align:top}.social-sharing .fa{padding:0 5px 0 10px}.social-sharing .fa:before{line-height:20px}.social-sharing.is-large a{height:40px;line-height:40px}.social-sharing.is-large a span{height:40px;font-size:18px;line-height:40px}.social-sharing.is-large a .fa{padding:0 10px 0 18px}.social-sharing.is-large a .fa:before{line-height:40px}.share-title{padding-right:10px;font-size:12px;font-weight:900}.is-large .share-title{padding-right:16px}.share-facebook{background-color:#3b5998}.share-facebook:hover{background-color:#2d4373}.share-twitter{background-color:#00aced}.share-twitter:hover{background-color:#0087ba}.share-pinterest{background-color:#cb2027}.share-pinterest:hover{background-color:#9f191f}.share-fancy{background-color:#4999dc}.share-fancy:hover{background-color:#2780cb}.share-google{background-color:#dd4b39}.share-google:hover{background-color:#c23321}.share-github{background-color:#7c7c7c}.share-github:hover{background-color:#636262}.share-count{-webkit-transition:opacity 0.2s ease-in;-moz-transition:opacity 0.2s ease-in;-o-transition:opacity 0.2s ease-in;transition:opacity 0.2s ease-in;position:relative;padding:0 8px;margin-right:-2px;font-size:14px;line-height:18px;color:#333;background-color:#fff;border:1px solid #ececec;border-radius:0 2px 2px 0;opacity:0}.share-count.is-loaded{opacity:1}.share-count:before,.share-count:after{position:absolute;top:50%;display:block;width:0;height:0;margin-top:-6px;content:"";border-top:6px solid transparent;border-right:6px solid;border-bottom:6px solid transparent}.share-count:before{left:-6px;border-right-color:#ececec}.share-count:after{left:-5px;border-right-color:#fff}a:hover .share-count{background-color:#f5f5f5}a:hover .share-count:after{border-right-color:#f5f5f5}.is-large .share-count{padding:0 14px;font-size:18px}.social-sharing.is-clean a{height:30px;line-height:30px;color:#333;background-color:#fff;border:1px solid #ececec}.social-sharing.is-clean a span{height:30px;font-size:13px;line-height:30px}.social-sharing.is-clean a:hover{background-color:#ececec}.social-sharing.is-clean a:hover .share-count{background-color:#fff}.social-sharing.is-clean a:hover .share-count:after{border-right-color:#fff}.social-sharing.is-clean a .share-title{font-weight:normal}.social-sharing.is-clean .share-count{top:-1px}.social-sharing.is-clean .fa-facebook{color:#3b5998}.social-sharing.is-clean .fa-twitter{color:#00aced}.social-sharing.is-clean .fa-pinterest{color:#cb2027}.social-sharing.is-clean .fa-fancy{color:#4999dc}.social-sharing.is-clean .fa-google{color:#dd4b39}
2 |
3 | /* Prism.js */
4 | code[class*="language-"],
5 | pre[class*="language-"] {
6 | font-family: Consolas, Monaco, "Andale Mono", monospace;
7 | -webkit-hyphens: none;
8 | -moz-hyphens: none;
9 | -ms-hyphens: none;
10 | hyphens: none;
11 | color: black;
12 | text-align: left;
13 | word-spacing: normal;
14 | -moz-tab-size: 4;
15 | -o-tab-size: 4;
16 | tab-size: 4;
17 | white-space: pre;
18 |
19 | direction: ltr;
20 | }
21 |
22 | /* Code blocks */
23 | pre[class*="language-"] {
24 | padding: 1em;
25 | margin: .5em 0;
26 | overflow: auto;
27 | font-size: 14px;
28 | }
29 | :not(pre) > code[class*="language-"],
30 | pre[class*="language-"] {
31 | background: rgba(250, 250, 250, 0.8);
32 | }
33 |
34 | /* Inline code */
35 | :not(pre) > code[class*="language-"] {
36 | padding: .1em;
37 | -webkit-border-radius: .3em;
38 | border-radius: .3em;
39 | }
40 | .token.comment,
41 | .token.prolog,
42 | .token.doctype,
43 | .token.cdata {
44 | color: slategray;
45 | }
46 | .token.punctuation {
47 | color: #999;
48 | }
49 | .namespace {
50 | opacity: .7;
51 | }
52 | .token.property,
53 | .token.tag,
54 | .token.boolean,
55 | .token.number,
56 | .token.constant,
57 | .token.symbol {
58 | color: #905;
59 | }
60 | .token.selector,
61 | .token.attr-name,
62 | .token.string,
63 | .token.builtin {
64 | color: #690;
65 | }
66 | .token.operator,
67 | .token.entity,
68 | .token.url,
69 | .language-css .token.string,
70 | .style .token.string,
71 | .token.variable {
72 | color: #a67f59;
73 | }
74 | .token.atrule,
75 | .token.attr-value,
76 | .token.keyword {
77 | color: #07a;
78 | }
79 | .token.regex,
80 | .token.important {
81 | color: #e90;
82 | }
83 | .token.important {
84 | font-weight: bold;
85 | }
86 | .token.entity {
87 | cursor: help;
88 | }
89 |
90 | /**
91 | * Nano scroll stuff
92 | */
93 | .nano {
94 | position: relative;
95 | overflow: hidden;
96 | width: 100%;
97 | height: 100%;
98 | }
99 | .nano > .nano-content {
100 | position: absolute;
101 | top: 0;
102 | right: 0;
103 | bottom: 0;
104 | left: 0;
105 | overflow: scroll;
106 | overflow-x: hidden;
107 | }
108 | .nano > .nano-content:focus {
109 | outline: none;
110 | }
111 | .nano > .nano-content::-webkit-scrollbar {
112 | visibility: hidden;
113 | }
114 | .has-scrollbar > .nano-content::-webkit-scrollbar {
115 | visibility: visible;
116 | }
117 | .nano > .nano-pane {
118 | position: absolute;
119 | top: 8px;
120 | right: 8px;
121 | bottom: 8px;
122 | visibility: hidden\9;
123 | width: 8px;
124 |
125 | /* Target only IE7 and IE8 with this hack */
126 | opacity: .01;
127 | -webkit-border-radius: 5px;
128 | border-radius: 5px;
129 | background: rgba(117, 117, 117, .2);
130 |
131 | -webkit-transition: .3s;
132 | -moz-transition: .3s;
133 | -o-transition: .3s;
134 | transition: .3s;
135 | }
136 | .nano > .nano-pane > .nano-slider {
137 | position: relative;
138 |
139 | cursor: pointer;
140 | -webkit-border-radius: 3px;
141 | border-radius: 3px;
142 | background: #fff;
143 |
144 | -webkit-transition: .3s;
145 | -moz-transition: .3s;
146 | -o-transition: .3s;
147 | transition: .3s;
148 | -webkit-transition-property: background;
149 | -moz-transition-property: background;
150 | -o-transition-property: background;
151 | transition-property: background;
152 | }
153 | .nano > .nano-pane:hover > .nano-slider,
154 | .nano > .nano-pane.active > .nano-slider {
155 | background: #a6a6a6;
156 | }
157 | .nano:hover > .nano-pane,
158 | .nano-pane.active,
159 | .nano-pane.flashed {
160 | visibility: visible\9;
161 |
162 | /* Target only IE7 and IE8 with this hack */
163 | opacity: .99;
164 | }
165 | .sliding-menu {
166 | position: relative;
167 | overflow: hidden;
168 | background-color: rgba(255, 255, 255, 0.5);
169 | text-align: left;
170 | font-size: 21px;
171 | }
172 |
173 | .sliding-menu__panel {
174 | position: absolute;
175 | top: 0;
176 | left: 100%;
177 | width: 100%;
178 | }
179 |
180 | .sliding-menu li {
181 | padding: 0;
182 | margin: 0;
183 | list-style: none;
184 | }
185 |
186 | .sliding-menu li a,
187 | .sliding-menu li .sliding-menu__nav {
188 | display: block;
189 | padding: .8em 1em;
190 | text-align: left;
191 | font-size: 21px;
192 | line-height: 1.4em;
193 | color: #333;
194 | text-decoration: none;
195 | border-width: 0;
196 | width: 100%;
197 | background-color: transparent;
198 | -webkit-transition: color 250ms ease, background-color 250ms ease;
199 | -moz-transition: color 250ms ease, background-color 250ms ease;
200 | -o-transition: color 250ms ease, background-color 250ms ease;
201 | transition: color 250ms ease, background-color 250ms ease;
202 | }
203 |
204 | .sliding-menu li a:hover,
205 | .sliding-menu li .sliding-menu__nav:hover {
206 | color: #fff;
207 | background-color: #333;
208 | }
209 |
210 | .sliding-menu .active a {
211 | color: #fff;
212 | background-color: #333;
213 | }
214 |
215 | .sliding-menu .sliding-menu__nav:before {
216 | float: right;
217 | margin-left: 1em;
218 | content: "\3009";
219 | }
220 |
221 | .sliding-menu .sliding-menu__back {
222 | color: #fff;
223 | background-color: #555;
224 | font-weight: bold;
225 | }
226 |
227 | .sliding-menu .sliding-menu__back:before {
228 | float: left;
229 | margin-right: 1em;
230 | content: "\3008";
231 | }
232 |
233 | .sliding-menu .sliding-menu__icon {
234 | margin-right: .4em;
235 | }
236 |
237 | .sliding-menu .sliding-menu__separator {
238 | margin: .4em 1em;
239 | border-top: 2px solid #555;
240 | }
241 |
--------------------------------------------------------------------------------
/examples/example-html.html:
--------------------------------------------------------------------------------
1 |
2 |
14 |
15 |
16 |
17 |
18 |
19 | Sliding Menu
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
44 |
236 |
241 |
242 |
243 |
249 |
250 |
--------------------------------------------------------------------------------
/examples/assets/script.min.js:
--------------------------------------------------------------------------------
1 | if("undefined"==typeof jQuery)throw new Error("Sliding Menu requires jQuery");!function(t){"use strict";"function"==typeof define&&define.amd?define(["jquery"],t):t(jQuery)}(function(l){"use strict";var e,c;e=[],(c=function(t,e){this.options=void 0,this.$el=void 0,this.currentPanel=void 0,this.init(t,e)}).NAME="Sliding Menu",c.VERSION="0.3.0",c.PANEL_CLASS=(c.MAIN_CLASS="sliding-menu")+"__panel",c.ICON_CLASS=c.MAIN_CLASS+"__icon",c.NAVIGATION_CLASS=c.MAIN_CLASS+"__nav",c.BACK_CLASS=c.MAIN_CLASS+"__back",c.SEPARATOR_CLASS=c.MAIN_CLASS+"__separator",c.SET_ICON_CLASS="sm-set-icon",c.DEFAULTS={className:"",transitionDuration:250,dataJSON:!1,initHref:!1,backLabel:"Back"},c.prototype.init=function(t,e){this.$el=l(t),this.$el.hasClass(c.MAIN_CLASS)||(this.options=this.getOptions(e),this.events(),this.process())},c.prototype.$=function(t){return this.$el.find(t)},c.prototype.events=function(){this.$el.on("click","a, ."+c.NAVIGATION_CLASS,l.proxy(this._onClickItem,this))},c.prototype._onClickItem=function(t){var e,n,i;void 0!==(e=l(t.currentTarget)).attr("data-id")&&(i=e.hasClass(c.BACK_CLASS),n=this.$("."+c.PANEL_CLASS+'[data-id="'+e.attr("data-id")+'"]'),this.currentPanel.attr("data-id")!==n.attr("data-id")?(this.currentPanel.stop(!0,!0).animate({left:i?"100%":"-100%"},this.options.transitionDuration),n.stop(!0,!0).css("left",i?"-100%":"100%").animate({left:0},this.options.transitionDuration),this.$el.stop(!0,!0).animate({height:n.height()},this.options.transitionDuration)):(n.css({left:0}),this.$el.height(n.height())),this.currentPanel=n),e.hasClass(c.NAVIGATION_CLASS)||(this.$("li.active").removeClass("active"),e.closest("li").addClass("active"))},c.prototype.process=function(){var t;t=!0===this.options.dataJSON?this.processJSON(this.options.dataJSON):this.processHTML(),this.setMenuContent(t)},c.prototype.processJSON=function(t,e,n){var i,o;return i={id:c.PANEL_CLASS+"-"+this.getNewId(),root:!e,children:[]},o=[],e&&i.children.push({panelId:e.id,href:!1,label:!0===this.options.backLabel?n:this.options.backLabel,_styleClass:c.BACK_CLASS+" "+c.NAVIGATION_CLASS}),l(t).each(l.proxy(function(t,e){var n;i.children.push(e),e.children&&(n=this.processJSON(e.children,i,e.label),e.panelId=n[0].id,e._styleClass=c.NAVIGATION_CLASS,o=o.concat(n),delete e.children)},this)),[i].concat(o)},c.prototype.processHTML=function(t,e,n){var r,a;return r={id:c.PANEL_CLASS+"-"+this.getNewId(),root:!t,children:[]},a=[],void 0!==t?r.children.push({panelId:e.id,href:!1,label:!0===this.options.backLabel?n:this.options.backLabel,_styleClass:c.BACK_CLASS+" "+c.NAVIGATION_CLASS}):t=this.$el.children("ul"),t.children("li").each(l.proxy(function(t,e){var n,i,o,s;(e=l(e)).hasClass("separator")?n={separator:!0}:(void 0!==(n={icon:(i=e.children("a")).find("."+c.SET_ICON_CLASS).attr("class")||void 0,href:i.attr("href"),label:this.trimWhiteSpaces(i.text()),classNames:{parent:this.trimWhiteSpaces(e.attr("class")||""),element:this.trimWhiteSpaces(i.attr("class")||"")}}).icon&&(n.icon=n.icon.replace(c.SET_ICON_CLASS,"")),0!==(s=e.children("ul")).length&&(o=this.processHTML(s,r,n.label),n.panelId=o[0].id,n._styleClass=c.NAVIGATION_CLASS,a=a.concat(o))),r.children.push(n)},this)),[r].concat(a)},c.prototype.setMenuContent=function(t){var n;this.$el.empty().addClass(c.MAIN_CLASS+" "+this.options.className),l(t).each(l.proxy(function(t,e){var s;s=l(""),e.root&&(n="."+c.PANEL_CLASS+'[data-id="'+e.id+'"]'),s.attr("data-id",e.id),s.addClass(c.PANEL_CLASS),l(e.children).each(function(t,e){var n,i,o;n=l(" "),!0!==e.separator?(i=e.panelId?l(" "):l(" "),void 0!==e.classNames&&(n.addClass(e.classNames.parent),i.addClass(e.classNames.element)),i.addClass(e._styleClass),e.panelId?i.attr({type:"button","data-id":e.panelId}):i.attr({href:e.href}),i.text(e.label),e.icon&&((o=l(" ")).addClass(c.ICON_CLASS+" "+e.icon),i.prepend(o)),n.append(i)):n.addClass(c.SEPARATOR_CLASS),s.append(n)}),this.$el.append(s)},this)),(n=this.$(n)).addClass(c.PANEL_CLASS+"-root"),this.currentPanel=n,!1!==this.options.initHref?this.changeVisiblePanel():this.currentPanel.css("left",0),this.$el.height(this.currentPanel.height())},c.prototype.changeVisiblePanel=function(){var t,e;0!==(t=this.getHyperlinkByHref(this.options.initHref)).length?(t.closest("li").addClass("active"),e=this.getPanelByHref(this.options.initHref),this.currentPanel=e):console.warn(c.NAME+': the link "'+this.options.initHref+'" does not exists. Please check the '+(!1!==this.options.dataJSON?"JSON object":"HTML structure")+"."),this.options.initHref=!1,this.currentPanel.css("left",0)},c.prototype.trimWhiteSpaces=function(t){return t.trim()},c.prototype.getDefaults=function(){return c.DEFAULTS},c.prototype.getOptions=function(t){return l.extend({},this.getDefaults(),this.$el.data(),t)},c.prototype.getHyperlinkByHref=function(t){return this.$('a[href="'+t+'"]')||void 0},c.prototype.getPanelByHref=function(t){var e=this.getHyperlinkByHref(t);return void 0!==e?e.closest("ul"):void 0},c.prototype.getNewId=function(){for(var t;t=Math.random().toString(36).substring(2,9),0<=e.indexOf(t););return e.push(t),t};var t=l.fn.slidingMenu;l.fn.slidingMenu=function(i){return this.each(function(){var t,e,n;e=(t=l(this)).data("dc.slidingMenu"),n="object"==typeof i&&i,!e&&/destroy|hide/.test(i)||(e||t.data("dc.slidingMenu",e=new c(this,n)),"string"==typeof i&&e[i]())})},l.fn.slidingMenu.Constructor=c,l.fn.slidingMenu.noConflict=function(){return l.fn.slidingMenu=t,this}}),function(i,s,o){"use strict";var u,p,n,l,e,c,h,d,r,a,g,f,m,v,S,y,b,A,w,C,$,k,N;function t(t,e){this.el=t,this.options=e,p=p||b(),this.$el=i(this.el),this.doc=i(this.options.documentContext||o),this.win=i(this.options.windowContext||s),this.body=this.doc.find("body"),this.$content=this.$el.children("."+e.contentClass),this.$content.attr("tabindex",this.options.tabIndex||0),this.content=this.$content[0],this.previousPosition=0,this.options.iOSNativeScrolling&&null!=this.el.style.WebkitOverflowScrolling?this.nativeScrolling():this.generate(),this.createEvents(),this.addEvents(),this.reset()}y={paneClass:"nano-pane",sliderClass:"nano-slider",contentClass:"nano-content",iOSNativeScrolling:!1,preventPageScrolling:!1,disableResize:!1,alwaysVisible:!1,flashDelay:1500,sliderMinHeight:20,sliderMaxHeight:null,documentContext:null,windowContext:null},f="scroll",e="mousedown",c="mouseenter",h="mousemove",r="mousewheel",d="mouseup",g="resize",v="up",n="DOMMouseScroll",l="down",m="touchmove",u="Microsoft Internet Explorer"===s.navigator.appName&&/msie 7./i.test(s.navigator.appVersion)&&s.ActiveXObject,p=null,C=s.requestAnimationFrame,S=s.cancelAnimationFrame,k=o.createElement("div").style,N=function(){var t,e,n,i;for(t=n=0,i=(e=["t","webkitT","MozT","msT","OT"]).length;nthis.previousPosition?"down":this.contentScrollTop=r.maxScrollTop&&r.prevScrollTop!==r.maxScrollTop?r.$el.trigger("scrollend"):0===r.contentScrollTop&&0!==r.prevScrollTop&&r.$el.trigger("scrolltop"),!1}),up:(s=this,function(){return s.isBeingDragged=!1,s.pane.removeClass("active"),s.doc.unbind(h,s.events.drag).unbind(d,s.events.up),s.body.unbind(c,s.events.enter),!1}),resize:(t=this,function(){t.reset()}),panedown:(o=this,function(t){return o.sliderY=(t.offsetY||t.originalEvent.layerY)-.5*o.sliderHeight,o.scroll(),o.events.down(t),!1}),scroll:(e=this,function(t){e.updateScrollValues(),e.isBeingDragged||(e.iOSNativeScrolling||(e.sliderY=e.sliderTop,e.setOnScrollStyles()),null!=t&&(e.contentScrollTop>=e.maxScrollTop?(e.options.preventPageScrolling&&e.preventScrolling(t,l),e.prevScrollTop!==e.maxScrollTop&&e.$el.trigger("scrollend")):0===e.contentScrollTop&&(e.options.preventPageScrolling&&e.preventScrolling(t,v),0!==e.prevScrollTop&&e.$el.trigger("scrolltop"))))}),wheel:(i=this,function(t){var e;if(null!=t)return(e=t.delta||t.wheelDelta||t.originalEvent&&t.originalEvent.wheelDelta||-t.detail||t.originalEvent&&-t.originalEvent.detail)&&(i.sliderY+=-e/3),i.scroll(),!1}),enter:(n=this,function(t){var e;if(n.isBeingDragged)return 1!==(t.buttons||t.which)?(e=n.events).up.apply(e,arguments):void 0})}},t.prototype.addEvents=function(){var t;this.removeEvents(),t=this.events,this.options.disableResize||this.win.bind(g,t[g]),this.iOSNativeScrolling||(this.slider.bind(e,t[l]),this.pane.bind(e,t.panedown).bind(r+" "+n,t.wheel)),this.$content.bind(f+" "+r+" "+n+" "+m,t[f])},t.prototype.removeEvents=function(){var t;t=this.events,this.win.unbind(g,t[g]),this.iOSNativeScrolling||(this.slider.unbind(),this.pane.unbind()),this.$content.unbind(f+" "+r+" "+n+" "+m,t[f])},t.prototype.generate=function(){var t,e,n,i,o;return i=(e=this.options).paneClass,o=e.sliderClass,e.contentClass,(n=this.$el.children("."+i)).length||n.children("."+o).length||this.$el.append(''),this.pane=this.$el.children("."+i),this.slider=this.pane.find("."+o),0===p&&w()?t={right:-14,paddingRight:+s.getComputedStyle(this.content,null).getPropertyValue("padding-right").replace(/[^0-9.]+/g,"")+14}:p&&(t={right:-p},this.$el.addClass("has-scrollbar")),null!=t&&this.$content.css(t),this},t.prototype.restore=function(){this.stopped=!1,this.iOSNativeScrolling||this.pane.show(),this.addEvents()},t.prototype.reset=function(){var t,e,n,i,o,s,r,a,l,c,h;return this.iOSNativeScrolling?void(this.contentHeight=this.content.scrollHeight):(this.$el.find("."+this.options.paneClass).length||this.generate().stop(),this.stopped&&this.restore(),o=(i=(t=this.content).style).overflowY,u&&this.$content.css({height:this.$content.height()}),e=t.scrollHeight+p,0<(l=parseInt(this.$el.css("max-height"),10))&&(this.$el.height(""),this.$el.height(t.scrollHeight>l?l:t.scrollHeight)),r=(s=this.pane.outerHeight(!1))+(a=parseInt(this.pane.css("top"),10))+parseInt(this.pane.css("bottom"),10),(h=Math.round(r/e*r))this.options.sliderMaxHeight&&(h=this.options.sliderMaxHeight),o===f&&i.overflowX!==f&&(h+=p),this.maxSliderTop=r-h,this.contentHeight=e,this.paneHeight=s,this.paneOuterHeight=r,this.sliderHeight=h,this.paneTop=a,this.slider.height(h),this.events.scroll(),this.pane.show(),this.isActive=!0,t.scrollHeight===t.clientHeight||this.pane.outerHeight(!0)>=t.scrollHeight&&o!==f?(this.pane.hide(),this.isActive=!1):this.el.clientHeight===t.scrollHeight&&o===f?this.slider.hide():this.slider.show(),this.pane.css({opacity:this.options.alwaysVisible?1:"",visibility:this.options.alwaysVisible?"visible":""}),"static"!==(n=this.$content.css("position"))&&"relative"!==n||(c=parseInt(this.$content.css("right"),10))&&this.$content.css({right:"",marginRight:c}),this)},t.prototype.scroll=function(){return this.isActive?(this.sliderY=Math.max(0,this.sliderY),this.sliderY=Math.min(this.maxSliderTop,this.sliderY),this.$content.scrollTop(this.maxScrollTop*this.sliderY/this.maxSliderTop),this.iOSNativeScrolling||(this.updateScrollValues(),this.setOnScrollStyles()),this):void 0},t.prototype.scrollBottom=function(t){return this.isActive?(this.$content.scrollTop(this.contentHeight-this.$content.height()-t).trigger(r),this.stop().restore(),this):void 0},t.prototype.scrollTop=function(t){return this.isActive?(this.$content.scrollTop(+t).trigger(r),this.stop().restore(),this):void 0},t.prototype.scrollTo=function(t){return this.isActive?(this.scrollTop(this.$el.find(t).get(0).offsetTop),this):void 0},t.prototype.stop=function(){return S&&this.scrollRAF&&(S(this.scrollRAF),this.scrollRAF=null),this.stopped=!0,this.removeEvents(),this.iOSNativeScrolling||this.pane.hide(),this},t.prototype.destroy=function(){return this.stopped||this.stop(),!this.iOSNativeScrolling&&this.pane.length&&this.pane.remove(),u&&this.$content.height(""),this.$content.removeAttr("tabindex"),this.$el.hasClass("has-scrollbar")&&(this.$el.removeClass("has-scrollbar"),this.$content.css({right:""})),this},t.prototype.flash=function(){return!this.iOSNativeScrolling&&this.isActive?(this.reset(),this.pane.addClass("flashed"),setTimeout((t=this,function(){t.pane.removeClass("flashed")}),this.options.flashDelay),this):void 0;var t},a=t,i.fn.nanoScroller=function(n){return this.each(function(){var t,e;if((e=this.nanoscroller)||(t=i.extend({},y,n),this.nanoscroller=e=new a(this,t)),n&&"object"==typeof n){if(i.extend(e.options,n),null!=n.scrollBottom)return e.scrollBottom(n.scrollBottom);if(null!=n.scrollTop)return e.scrollTop(n.scrollTop);if(n.scrollTo)return e.scrollTo(n.scrollTo);if("bottom"===n.scroll)return e.scrollBottom(0);if("top"===n.scroll)return e.scrollTop(0);if(n.scroll&&n.scroll instanceof i)return e.scrollTo(n.scroll);if(n.stop)return e.stop();if(n.destroy)return e.destroy();if(n.flash)return e.flash()}return e.reset()})},i.fn.nanoScroller.Constructor=a}(jQuery,window,document),self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{};var Prism=function(){var c=/\blang(?:uage)?-(?!\*)(\w+)\b/i,C=self.Prism={util:{encode:function(t){return t instanceof h?new h(t.type,C.util.encode(t.content),t.alias):"Array"===C.util.type(t)?t.map(C.util.encode):t.replace(/&/g,"&").replace(/t.length)break t;if(!(f instanceof i))if(c.lastIndex=0,m=c.exec(f)){u&&(p=m[1].length);var m,v=m.index-1+p,S=v+(m=m[0].slice(p)).length,y=f.slice(0,v+1),b=f.slice(S+1),A=[g,1];y&&A.push(y);var w=new i(r,h?C.tokenize(m,h):m,d);A.push(w),b&&A.push(b),Array.prototype.splice.apply(o,A)}}}}return o},hooks:{all:{},add:function(t,e){var n=C.hooks.all;n[t]=n[t]||[],n[t].push(e)},run:function(t,e){var n=C.hooks.all[t];if(n&&n.length)for(var i,o=0;i=n[o++];)i(e)}}},h=C.Token=function(t,e,n){this.type=t,this.content=e,this.alias=n};if(h.stringify=function(e,n,t){if("string"==typeof e)return e;if("Array"===C.util.type(e))return e.map(function(t){return h.stringify(t,n,e)}).join("");var i={type:e.type,content:h.stringify(e.content,n,t),tag:"span",classes:["token",e.type],attributes:{},language:n,parent:t};if("comment"==i.type&&(i.attributes.spellcheck="true"),e.alias){var o="Array"===C.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(i.classes,o)}C.hooks.run("wrap",i);var s="";for(var r in i.attributes)s+=r+'="'+(i.attributes[r]||"")+'"';return"<"+i.tag+' class="'+i.classes.join(" ")+'" '+s+">"+i.content+""+i.tag+">"},!self.document)return self.addEventListener&&self.addEventListener("message",function(t){var e=JSON.parse(t.data),n=e.language,i=e.code;self.postMessage(JSON.stringify(C.util.encode(C.tokenize(i,C.languages[n])))),self.close()},!1),self.Prism;var t=document.getElementsByTagName("script");return(t=t[t.length-1])&&(C.filename=t.src,document.addEventListener&&!t.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",C.highlightAll)),self.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=Prism),Prism.languages.markup={comment://,prolog:/<\?.+?\?>/,doctype://,cdata://i,tag:{pattern:/<\/?[\w:-]+\s*(?:\s+[\w:-]+(?:=(?:("|')(\\?[\w\W])*?\1|[^\s'">=]+))?\s*)*\/?>/i,inside:{tag:{pattern:/^<\/?[\w:-]+/i,inside:{punctuation:/^<\/?/,namespace:/^[\w-]+?:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/i,inside:{punctuation:/=|>|"/}},punctuation:/\/?>/,"attr-name":{pattern:/[\w:-]+/,inside:{namespace:/^[\w-]+?:/}}}},entity:/?[\da-z]{1,8};/i},Prism.hooks.add("wrap",function(t){"entity"===t.type&&(t.attributes.title=t.content.replace(/&/,"&"))}),Prism.languages.css={comment:/\/\*[\w\W]*?\*\//,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*\{))/i,inside:{punctuation:/[;:]/}},url:/url\((?:(["'])(\\\n|\\?.)*?\1|.*?)\)/i,selector:/[^\{\}\s][^\{\};]*(?=\s*\{)/,string:/("|')(\\\n|\\?.)*?\1/,property:/(\b|\B)[\w-]+(?=\s*:)/i,important:/\B!important\b/i,punctuation:/[\{\};:]/,function:/[-a-z0-9]+(?=\()/i},Prism.languages.markup&&(Prism.languages.insertBefore("markup","tag",{style:{pattern:/