├── 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("