├── .gitignore ├── README.md ├── bower.json ├── demo ├── addremove │ ├── addremove.css │ ├── addremove.html │ └── addremove.js ├── basichtml │ ├── basichtml.css │ ├── basichtml.html │ └── basichtml.js ├── basicjs │ ├── basicjs.css │ ├── basicjs.html │ └── basicjs.js ├── bootstrap │ ├── bootstrap_integration.css │ ├── bootstrap_integration.html │ └── bootstrap_integration.js ├── collapsed │ ├── collapsed.css │ ├── collapsed.html │ └── collapsed.js ├── covermode │ ├── covermode.css │ ├── covermode.html │ └── covermode.js ├── customsize │ ├── customsize.css │ ├── customsize.html │ └── customsize.js ├── events │ ├── events.css │ ├── events.html │ └── events.js ├── expandcollapse │ ├── expandcollapse.css │ ├── expandcollapse.html │ └── expandcollapse.js ├── fullexpandcollapse │ ├── fullexpandcollapse.css │ ├── fullexpandcollapse.html │ ├── fullexpandcollapse.js │ └── index.html ├── jquery.multilevelpushmenu.css ├── jquery.multilevelpushmenu.min.js ├── jquery.multilevelpushmenu_brown.css ├── jquery.multilevelpushmenu_grey.css ├── jquery.multilevelpushmenu_red.css ├── options │ ├── options.css │ ├── options.html │ └── options.js ├── pushmany │ ├── pushmany.css │ ├── pushmany.html │ └── pushmany.js ├── responsive │ ├── index.html │ ├── responsive.css │ ├── responsive.html │ └── responsive.js └── rtl │ ├── rtl.css │ ├── rtl.html │ └── rtl.js ├── jquery.multilevelpushmenu.css ├── jquery.multilevelpushmenu.js ├── jquery.multilevelpushmenu.min.css ├── jquery.multilevelpushmenu.min.js ├── jquery.multilevelpushmenu.min.scss ├── multilevelpushmenu.jquery.json └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | **/.DS_Store 2 | **/Gruntfile.js 3 | **/node_modules/ 4 | **/.directory -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "multilevelpushmenu", 3 | "version": "2.1.4", 4 | "homepage": "http://multi-level-push-menu.make.rs", 5 | "authors": [ 6 | "Momčilo Džunić " 7 | ], 8 | "description": "Cross-browser compatible jQuery plug-in allowing endless nesting of navigation elements.", 9 | "main": "jquery.multilevelpushmenu.js", 10 | "keywords": [ 11 | "menu", 12 | "multi-level", 13 | "push", 14 | "animation" 15 | ], 16 | "license": "MIT", 17 | "ignore": [ 18 | "**/.*", 19 | "node_modules", 20 | "bower_components", 21 | "test", 22 | "tests", 23 | "multilevelpushmenu.jquery.json" 24 | ], 25 | "dependencies": { 26 | "jquery": ">=1.10" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /demo/addremove/addremove.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | background: #fff; 5 | } 6 | 7 | #pushobj { 8 | position: absolute; 9 | top: 7px; 10 | left: 300px; 11 | color: #000; 12 | font-family: 'Open Sans Condensed', sans-serif; 13 | font-size: 2em; 14 | z-index: 1; 15 | } -------------------------------------------------------------------------------- /demo/addremove/addremove.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 24 | 25 |
26 | 37 |
38 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 216 | 217 | 218 | -------------------------------------------------------------------------------- /demo/addremove/addremove.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function(){ 2 | // HTML markup implementation, overlap mode 3 | $( '#menu' ).multilevelpushmenu({ 4 | containersToPush: [$( '#pushobj' )], 5 | 6 | // Just for fun also changing the look of the menu 7 | wrapperClass: 'mlpm_w', 8 | menuInactiveClass: 'mlpm_inactive' 9 | }); 10 | 11 | // Expand to Mobile Phones where we will add two 12 | // additional menu items with sub-menus 13 | $( '#menu' ).multilevelpushmenu( 'expand' , $( '#menu' ).multilevelpushmenu( 'findmenusbytitle' , 'Mobile Phones' ).first() ); 14 | 15 | // Add iPhone and Samsung items 16 | $( '#additems' ).click(function(){ 17 | var $addTo = $('#menu').multilevelpushmenu('activemenu').first(); 18 | $( '#menu' ).multilevelpushmenu( 'additems' , addItems , $addTo , 0 ); 19 | }); 20 | 21 | // Remove Samsung items 22 | $( '#removeitems' ).click(function(){ 23 | var item = $( '#menu' ).multilevelpushmenu( 'finditemsbyname' , 'Samsung' ); 24 | $( '#menu' ).multilevelpushmenu( 'removeitems' , item ); 25 | }); 26 | 27 | // Add counter items 28 | $( '#counteritems' ).click(function(){ 29 | var $addTo = $('#menu').multilevelpushmenu('activemenu').first(), 30 | index = ( $addTo ) ? $addTo.children( 'ul' ).children( 'li' ).length : 0; 31 | item = [ 32 | { 33 | name: 'Item ' + index, 34 | link: '#', 35 | items: [ 36 | { 37 | title: 'Item ' + index, 38 | icon: 'fa fa-bookmark', 39 | items: [ 40 | { 41 | name: 'Item Info', 42 | icon: 'fa fa-info-circle', 43 | link: '#' 44 | }, 45 | { 46 | name: 'Delete Item', 47 | id: 'deleteItem', 48 | icon: 'fa fa-trash-o', 49 | link: '#' 50 | } 51 | ] 52 | }] 53 | } 54 | ]; 55 | $('#menu').multilevelpushmenu('additems', item, $addTo , index ); 56 | }); 57 | }); 58 | 59 | var addItems = [ 60 | { 61 | name: 'iPhone', 62 | icon: 'fa fa-phone-square', 63 | link: '#', 64 | items: [ 65 | { 66 | title: 'iPhones', 67 | icon: 'fa fa-phone-square', 68 | items: [ 69 | { 70 | name: 'iPhone 4', 71 | icon: 'fa fa-phone-square', 72 | link: '#' 73 | }, 74 | { 75 | name: 'iPhone 5', 76 | icon: 'fa fa-phone-square', 77 | link: '#' 78 | } 79 | ] 80 | } 81 | ] 82 | }, 83 | { 84 | name: 'Samsung', 85 | icon: 'fa fa-phone-square', 86 | link: '#', 87 | items: [ 88 | { 89 | title: 'Samsung', 90 | icon: 'fa fa-phone-square', 91 | items: [ 92 | { 93 | name: 'Samsung Galaxy S II', 94 | icon: 'fa fa-phone-square', 95 | link: '#' 96 | }, 97 | { 98 | name: 'Samsung Galaxy S III', 99 | icon: 'fa fa-phone-square', 100 | link: '#' 101 | }, 102 | { 103 | name: 'Samsung Galaxy S IV', 104 | icon: 'fa fa-phone-square', 105 | link: '#' 106 | } 107 | ] 108 | } 109 | ] 110 | } 111 | ]; -------------------------------------------------------------------------------- /demo/basichtml/basichtml.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | background: #243342; 5 | } 6 | 7 | #pushobj { 8 | position: absolute; 9 | top: 0px; 10 | left: 300px; 11 | color: #fff; 12 | background: #243342; 13 | font-family: 'Open Sans Condensed', sans-serif; 14 | font-size: 2em; 15 | z-index: 1; 16 | } -------------------------------------------------------------------------------- /demo/basichtml/basichtml.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 23 | 24 |
25 | Some content here! 26 |
27 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | -------------------------------------------------------------------------------- /demo/basichtml/basichtml.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function(){ 2 | // HTML markup implementation, overlap mode 3 | $( '#menu' ).multilevelpushmenu({ 4 | containersToPush: [$( '#pushobj' )] 5 | }); 6 | }); -------------------------------------------------------------------------------- /demo/basicjs/basicjs.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | background: #fff; 5 | } 6 | 7 | #pushobj { 8 | position: absolute; 9 | top: 0px; 10 | left: 300px; 11 | color: #000; 12 | font-family: 'Open Sans Condensed', sans-serif; 13 | font-size: 2em; 14 | } -------------------------------------------------------------------------------- /demo/basicjs/basicjs.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 23 | 24 |
25 | Some content here! 26 |
27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /demo/basicjs/basicjs.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function(){ 2 | // JS Array implementation, overlap mode 3 | $( '#menu' ).multilevelpushmenu({ 4 | menu: arrMenu, 5 | containersToPush: [$( '#pushobj' )], 6 | 7 | // Just for fun also changing the look of the menu 8 | wrapperClass: 'mlpm_w', 9 | menuInactiveClass: 'mlpm_inactive' 10 | }); 11 | }); 12 | 13 | // JS Aray instead HTML Markup 14 | 15 | var arrMenu = [ 16 | { 17 | title: 'All Categories', 18 | icon: 'fa fa-reorder', 19 | items: [ 20 | { 21 | name: 'Devices', 22 | icon: 'fa fa-laptop', 23 | link: '#', 24 | items: [ 25 | { 26 | title: 'Devices', 27 | icon: 'fa fa-laptop', 28 | items: [ 29 | { 30 | name: 'Mobile Phones', 31 | icon: 'fa fa-phone', 32 | link: '#', 33 | items: [ 34 | { 35 | title: 'Mobile Phones', 36 | icon: 'fa fa-phone', 37 | link: '#', 38 | items: [ 39 | { 40 | name: 'Super Smart Phone', 41 | link: '#' 42 | }, 43 | { 44 | name: 'Thin Magic Mobile', 45 | link: '#' 46 | }, 47 | { 48 | name: 'Performance Crusher', 49 | link: '#' 50 | }, 51 | { 52 | name: 'Futuristic Experience', 53 | link: '#' 54 | } 55 | ] 56 | } 57 | ] 58 | }, 59 | { 60 | name: 'Televisions', 61 | icon: 'fa fa-desktop', 62 | link: '#', 63 | items: [ 64 | { 65 | title: 'Televisions', 66 | icon: 'fa fa-desktop', 67 | link: '#', 68 | items: [ 69 | { 70 | name: 'Flat Super Screen', 71 | link: '#' 72 | }, 73 | { 74 | name: 'Gigantic LED', 75 | link: '#' 76 | }, 77 | { 78 | name: 'Power Eater', 79 | link: '#' 80 | }, 81 | { 82 | name: '3D Experience', 83 | link: '#' 84 | }, 85 | { 86 | name: 'Classic Comfort', 87 | link: '#' 88 | } 89 | ] 90 | } 91 | ] 92 | }, 93 | { 94 | name: 'Cameras', 95 | icon: 'fa fa-camera-retro', 96 | link: '#', 97 | items: [ 98 | { 99 | title: 'Cameras', 100 | icon: 'fa fa-camera-retro', 101 | link: '#', 102 | items: [ 103 | { 104 | name: 'Smart Shot', 105 | link: '#' 106 | }, 107 | { 108 | name: 'Power Shooter', 109 | link: '#' 110 | }, 111 | { 112 | name: 'Easy Photo Maker', 113 | link: '#' 114 | }, 115 | { 116 | name: 'Super Pixel', 117 | link: '#' 118 | } 119 | ] 120 | } 121 | ] 122 | } 123 | ] 124 | } 125 | ] 126 | }, 127 | { 128 | name: 'Magazines', 129 | icon: 'fa fa-book', 130 | link: '#', 131 | items: [ 132 | { 133 | title: 'Magazines', 134 | icon: 'fa fa-book', 135 | items: [ 136 | { 137 | name: 'National Geographics', 138 | link: '#' 139 | }, 140 | { 141 | name: 'Scientific American', 142 | link: '#' 143 | }, 144 | { 145 | name: 'The Spectator', 146 | link: '#' 147 | }, 148 | { 149 | name: 'Rambler', 150 | link: '#' 151 | }, 152 | { 153 | name: 'Physics World', 154 | link: '#' 155 | }, 156 | { 157 | name: 'The New Scientist', 158 | link: '#' 159 | } 160 | ] 161 | } 162 | ] 163 | }, 164 | { 165 | name: 'Store', 166 | icon: 'fa fa-shopping-cart', 167 | link: '#', 168 | items: [ 169 | { 170 | title: 'Store', 171 | icon: 'fa fa-shopping-cart', 172 | items: [ 173 | { 174 | name: 'Clothes', 175 | icon: 'fa fa-tags', 176 | link: '#', 177 | items: [ 178 | { 179 | title: 'Clothes', 180 | icon: 'fa fa-tags', 181 | items: [ 182 | { 183 | name: 'Women\'s Clothing', 184 | icon: 'fa fa-female', 185 | link: '#', 186 | items: [ 187 | { 188 | title: 'Women\'s Clothing', 189 | icon: 'fa fa-female', 190 | items: [ 191 | { 192 | name: 'Tops', 193 | link: '#' 194 | }, 195 | { 196 | name: 'Dresses', 197 | link: '#' 198 | }, 199 | { 200 | name: 'Trousers', 201 | link: '#' 202 | }, 203 | { 204 | name: 'Shoes', 205 | link: '#' 206 | }, 207 | { 208 | name: 'Sale', 209 | link: '#' 210 | } 211 | ] 212 | } 213 | ] 214 | }, 215 | { 216 | name: 'Men\'s Clothing', 217 | icon: 'fa fa-male', 218 | link: '#', 219 | items: [ 220 | { 221 | title: 'Men\'s Clothing', 222 | icon: 'fa fa-male', 223 | items: [ 224 | { 225 | name: 'Shirts', 226 | link: '#' 227 | }, 228 | { 229 | name: 'Trousers', 230 | link: '#' 231 | }, 232 | { 233 | name: 'Shoes', 234 | link: '#' 235 | }, 236 | { 237 | name: 'Sale', 238 | link: '#' 239 | } 240 | ] 241 | } 242 | ] 243 | } 244 | ] 245 | } 246 | ] 247 | }, 248 | { 249 | name: 'Jewelry', 250 | link: '#' 251 | }, 252 | { 253 | name: 'Music', 254 | link: '#' 255 | }, 256 | { 257 | name: 'Grocery', 258 | link: '#' 259 | } 260 | ] 261 | } 262 | ] 263 | }, 264 | { 265 | name: 'Collections', 266 | link: '#' 267 | }, 268 | { 269 | name: 'Credits', 270 | link: '#' 271 | } 272 | ] 273 | } 274 | ]; -------------------------------------------------------------------------------- /demo/bootstrap/bootstrap_integration.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #243342; 3 | } 4 | 5 | #pushobj { 6 | margin-left: 40px; 7 | } 8 | 9 | #menu { 10 | -ms-opacity: 0.95; 11 | opacity: 0.95; 12 | } 13 | -------------------------------------------------------------------------------- /demo/bootstrap/bootstrap_integration.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 30 | 31 |
32 |
33 |
34 |
35 |
36 |
37 |

38 | Some random text 39 | Some random text 40 |
41 | Some random text 42 | Some random text 43 |
44 | Some random text 45 | Some random text 46 |
47 | Some random text 48 | Some random text 49 |
50 | Some random text 51 | Some random text 52 |
53 | Some random text 54 | Some random text 55 |
56 | Some random text 57 | Some random text 58 |
59 | Some random text 60 | Some random text 61 |
62 | Some random text 63 | Some random text 64 |
65 | Some random text 66 | Some random text 67 |
68 | Some random text 69 | Some random text 70 |
71 | Some random text 72 | Some random text 73 |
74 | Some random text 75 | Some random text 76 |
77 | Some random text 78 | Some random text 79 |
80 | Some random text 81 | Some random text 82 |
83 | Some random text 84 | Some random text 85 |
86 | 87 |

88 |
89 |
90 |
91 | 92 | 249 |
250 |
251 |
252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | -------------------------------------------------------------------------------- /demo/bootstrap/bootstrap_integration.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function () { 2 | $('#menu').multilevelpushmenu({ 3 | containersToPush: [$('#pushobj')], 4 | menuWidth: '300px', 5 | menuHeight: '100%', 6 | collapsed: true 7 | }); 8 | $('#menu').multilevelpushmenu('option', 'menuHeight', $(document).height()); 9 | $('#menu').multilevelpushmenu('redraw'); 10 | }); 11 | 12 | $(window).resize(function () { 13 | $('#menu').multilevelpushmenu('option', 'menuHeight', $(document).height()); 14 | $('#menu').multilevelpushmenu('redraw'); 15 | }); 16 | 17 | -------------------------------------------------------------------------------- /demo/collapsed/collapsed.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | background: #fff; 5 | } 6 | 7 | #pushobj { 8 | position: absolute; 9 | top: 0px; 10 | left: 100px; 11 | color: #000; 12 | font-family: 'Open Sans Condensed', sans-serif; 13 | font-size: 2em; 14 | } -------------------------------------------------------------------------------- /demo/collapsed/collapsed.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 23 | 24 |
25 | Some content here! 26 |
27 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | -------------------------------------------------------------------------------- /demo/collapsed/collapsed.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function(){ 2 | // HTML markup implementation, overlap mode, initilaize collapsed 3 | $( '#menu' ).multilevelpushmenu({ 4 | containersToPush: [$( '#pushobj' )], 5 | collapsed: true, 6 | 7 | // Just for fun also changing the look of the menu 8 | wrapperClass: 'mlpm_w', 9 | menuInactiveClass: 'mlpm_inactive' 10 | }); 11 | }); -------------------------------------------------------------------------------- /demo/covermode/covermode.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | background: #243342; 5 | } 6 | 7 | #pushobj { 8 | position: absolute; 9 | top: 0px; 10 | left: 300px; 11 | color: #fff; 12 | background: #243342; 13 | font-family: 'Open Sans Condensed', sans-serif; 14 | font-size: 2em; 15 | } -------------------------------------------------------------------------------- /demo/covermode/covermode.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 23 | 24 |
25 | Some content here! 26 |
27 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | -------------------------------------------------------------------------------- /demo/covermode/covermode.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function(){ 2 | // HTML markup implementation, cover mode 3 | $( '#menu' ).multilevelpushmenu({ 4 | containersToPush: [$( '#pushobj' )], 5 | mode: 'cover' 6 | }); 7 | }); -------------------------------------------------------------------------------- /demo/customsize/customsize.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | background: #243342; 5 | } 6 | 7 | #pushobj { 8 | position: absolute; 9 | top: 0px; 10 | left: 450px; 11 | color: #fff; 12 | background: #243342; 13 | font-family: 'Open Sans Condensed', sans-serif; 14 | font-size: 2em; 15 | } 16 | 17 | #menu { 18 | position: absolute; 19 | top: 50px; 20 | left: 50px; 21 | } -------------------------------------------------------------------------------- /demo/customsize/customsize.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 23 | 24 |
25 | Some content here! 26 |
27 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | -------------------------------------------------------------------------------- /demo/customsize/customsize.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function(){ 2 | // HTML markup implementation, overlap mode 3 | $( '#menu' ).multilevelpushmenu({ 4 | containersToPush: [$( '#pushobj' )], 5 | menuWidth: 450, // '450px', '30em', '25%' will also work 6 | menuHeight: 500 7 | }); 8 | }); -------------------------------------------------------------------------------- /demo/events/events.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | background: #fff; 5 | } 6 | 7 | #pushobj { 8 | position: absolute; 9 | top: 7px; 10 | left: 300px; 11 | color: #000; 12 | font-family: 'Open Sans Condensed', sans-serif; 13 | font-size: 2em; 14 | z-index: 1; 15 | } 16 | 17 | h3 { 18 | font-size: .7em !important; 19 | } 20 | 21 | .panel { 22 | width: 500px; 23 | } 24 | 25 | .panel-body { 26 | font-size: .6em !important; 27 | } 28 | 29 | .panel-content { 30 | max-height: 400px; 31 | overflow: auto; 32 | } -------------------------------------------------------------------------------- /demo/events/events.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 24 | 25 |
26 |
27 |
28 |

Events log

29 |
30 |
31 |
32 | Start using menu on the left... 33 |
34 |
35 |
36 |
37 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | -------------------------------------------------------------------------------- /demo/events/events.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function(){ 2 | // HTML markup implementation, overlap mode 3 | $( '#menu' ).multilevelpushmenu({ 4 | containersToPush: [$( '#pushobj' )], 5 | onCollapseMenuStart: function() { 6 | $( '#eventpanel' ).append( '
Started collapsing...' ); 7 | //console.log(arguments); 8 | }, 9 | onCollapseMenuEnd: function() { 10 | $( '#eventpanel' ).append( '
Collapsing ended!' ); 11 | //console.log(arguments); 12 | }, 13 | onExpandMenuStart: function() { 14 | $( '#eventpanel' ).append( '
Started expanding...' ); 15 | //console.log(arguments); 16 | }, 17 | onExpandMenuEnd: function() { 18 | $( '#eventpanel' ).append( '
Expanding ended!' ); 19 | //console.log(arguments); 20 | }, 21 | onTitleItemClick: function() { 22 | var event = arguments[0], 23 | $menuLevelHolder = arguments[1], 24 | options = arguments[2], 25 | title = $menuLevelHolder.find( 'h2:first' ).text(); 26 | 27 | $( '#eventpanel' ).append( '
Title item ' + title + ' clicked!' ); 28 | //console.log(arguments); 29 | }, 30 | onBackItemClick: function() { 31 | var event = arguments[0], 32 | $menuLevelHolder = arguments[1], 33 | options = arguments[2], 34 | title = $menuLevelHolder.find( 'h2:first' ).text(); 35 | 36 | $( '#eventpanel' ).append( '
Back item on ' + title + ' menu level clicked!' ); 37 | //console.log(arguments); 38 | }, 39 | onGroupItemClick: function() { 40 | var event = arguments[0], 41 | $menuLevelHolder = arguments[1], 42 | $item = arguments[2], 43 | options = arguments[3], 44 | title = $menuLevelHolder.find( 'h2:first' ).text(), 45 | itemName = $item.find( 'a:first' ).text(); 46 | 47 | $( '#eventpanel' ).append( '
Group Item ' + itemName + '' + ' on ' + title + ' menu level clicked!' ); 48 | //console.log(arguments); 49 | }, 50 | onItemClick: function() { 51 | var event = arguments[0], 52 | $menuLevelHolder = arguments[1], 53 | $item = arguments[2], 54 | options = arguments[3], 55 | title = $menuLevelHolder.find( 'h2:first' ).text(), 56 | itemName = $item.find( 'a:first' ).text(); 57 | 58 | $( '#eventpanel' ).append( '
Item ' + itemName + '' + ' on ' + title + ' menu level clicked!' ); 59 | //console.log(arguments); 60 | }, 61 | 62 | // Just for fun also changing the look of the menu 63 | wrapperClass: 'mlpm_w', 64 | menuInactiveClass: 'mlpm_inactive' 65 | }); 66 | }); -------------------------------------------------------------------------------- /demo/expandcollapse/expandcollapse.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | background: #fff; 5 | } 6 | 7 | #pushobj { 8 | position: absolute; 9 | top: 7px; 10 | left: 300px; 11 | color: #000; 12 | font-family: 'Open Sans Condensed', sans-serif; 13 | font-size: 2em; 14 | z-index: 1; 15 | } -------------------------------------------------------------------------------- /demo/expandcollapse/expandcollapse.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 24 | 25 |
26 | 43 |
44 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | -------------------------------------------------------------------------------- /demo/expandcollapse/expandcollapse.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function(){ 2 | // HTML markup implementation, overlap mode 3 | $( '#menu' ).multilevelpushmenu({ 4 | containersToPush: [$( '#pushobj' )], 5 | 6 | // Just for fun also changing the look of the menu 7 | wrapperClass: 'mlpm_w', 8 | menuInactiveClass: 'mlpm_inactive' 9 | }); 10 | 11 | // Full collapse 12 | $( '#fullcollapse' ).click(function(){ 13 | $( '#menu' ).multilevelpushmenu( 'collapse' ); 14 | }); 15 | 16 | // Base expand 17 | $( '#baseexpand' ).click(function(){ 18 | $( '#menu' ).multilevelpushmenu( 'expand' ); 19 | }); 20 | 21 | // Expand to Men's Clothing 22 | $( '#expandmensclothing' ).click(function(){ 23 | // Use menu title for expanding just in case you know that there 24 | // is only one option with such title. If there is more then one 25 | // menu has with the same title, expand/collapse invoked with 26 | // title name as parameter won't work. 27 | $( '#menu' ).multilevelpushmenu( 'expand' , 'Men\'s Clothing' ); 28 | 29 | // More safe way is to use methods like 30 | // $( '#menu' ).multilevelpushmenu( 'findmenusbytitle' , 'Mobile Phones' ); 31 | // and then invoke expand method with desired menu level object 32 | // (e.g. if we have several menu objects with title 'Mobile Phones' but 33 | // we want to expand the first one) 34 | // var $phonemenu = $( '#menu' ).multilevelpushmenu( 'findmenusbytitle' , 'Mobile Phones' ).first(); 35 | // and then 36 | // $( '#menu' ).multilevelpushmenu( 'expand' , $phonemenu ); 37 | }); 38 | 39 | // Expand to Mobile Phones 40 | $( '#expandmobilephones' ).click(function(){ 41 | // Use menu title for expanding just in case you know that there 42 | // is only one option with such title. If there is more then one 43 | // menu has with the same title, expand/collapse invoked with 44 | // title name as parameter won't work. 45 | $( '#menu' ).multilevelpushmenu( 'expand' , 'Mobile Phones' ); 46 | 47 | // More safe way is to use methods like 48 | // $( '#menu' ).multilevelpushmenu( 'findmenusbytitle' , 'Mobile Phones' ); 49 | // and then invoke expand method with desired menu level object 50 | // (e.g. if we have several menu objects with title 'Mobile Phones' but 51 | // we want to expand the first one) 52 | // var $phonemenu = $( '#menu' ).multilevelpushmenu( 'findmenusbytitle' , 'Mobile Phones' ).first(); 53 | // and then 54 | // $( '#menu' ).multilevelpushmenu( 'expand' , $phonemenu ); 55 | }); 56 | 57 | // Collapse to the level of 'Devices' menu 58 | $( '#collapsedevices' ).click(function(){ 59 | // Have in mind that this will collapse to the level of 'Devices' 60 | // menu (level 1 in our case). So even when open path is not containing 61 | // 'Devices' menu it will collapse expanded menus to level 1; it's 62 | // basically the same as 63 | // $( '#menu' ).multilevelpushmenu( 'collapse' , 1 ); 64 | $( '#menu' ).multilevelpushmenu( 'collapse' , 'Devices' ); 65 | }); 66 | }); 67 | -------------------------------------------------------------------------------- /demo/fullexpandcollapse/fullexpandcollapse.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | background: #fff; 5 | } 6 | 7 | #menu { 8 | position: absolute; 9 | right: 0; 10 | top: 0; 11 | min-height: 100%; 12 | } 13 | 14 | #pushobj { 15 | position: absolute; 16 | top: 7px; 17 | right: 300px; 18 | color: #000; 19 | font-family: 'Open Sans Condensed', sans-serif; 20 | font-size: 2em; 21 | z-index: 1; 22 | } -------------------------------------------------------------------------------- /demo/fullexpandcollapse/fullexpandcollapse.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 24 | 25 |
26 | 43 |
44 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 222 | 223 | 224 | -------------------------------------------------------------------------------- /demo/fullexpandcollapse/fullexpandcollapse.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function(){ 2 | // HTML markup implementation, overlap mode 3 | $( '#menu' ).multilevelpushmenu({ 4 | containersToPush: [$( '#pushobj' )], 5 | direction: 'rtl', 6 | fullCollapse: true, 7 | 8 | // Just for fun also changing the look of the menu 9 | wrapperClass: 'mlpm_w', 10 | menuInactiveClass: 'mlpm_inactive' 11 | }); 12 | 13 | // Full collapse 14 | $( '#fullcollapse' ).click(function(){ 15 | $( '#menu' ).multilevelpushmenu( 'collapse' ); 16 | }); 17 | 18 | // Base expand 19 | $( '#baseexpand' ).click(function(){ 20 | $( '#menu' ).multilevelpushmenu( 'expand' ); 21 | }); 22 | 23 | // Expand to Men's Clothing 24 | $( '#expandmensclothing' ).click(function(){ 25 | // Use menu title for expanding just in case you know that there 26 | // is only one option with such title. If there is more then one 27 | // menu has with the same title, expand/collapse invoked with 28 | // title name as parameter won't work. 29 | $( '#menu' ).multilevelpushmenu( 'expand' , 'Men\'s Clothing' ); 30 | 31 | // More safe way is to use methods like 32 | // $( '#menu' ).multilevelpushmenu( 'findmenusbytitle' , 'Mobile Phones' ); 33 | // and then invoke expand method with desired menu level object 34 | // (e.g. if we have several menu objects with title 'Mobile Phones' but 35 | // we want to expand the first one) 36 | // var $phonemenu = $( '#menu' ).multilevelpushmenu( 'findmenusbytitle' , 'Mobile Phones' ).first(); 37 | // and then 38 | // $( '#menu' ).multilevelpushmenu( 'expand' , $phonemenu ); 39 | }); 40 | 41 | // Expand to Mobile Phones 42 | $( '#expandmobilephones' ).click(function(){ 43 | // Use menu title for expanding just in case you know that there 44 | // is only one option with such title. If there is more then one 45 | // menu has with the same title, expand/collapse invoked with 46 | // title name as parameter won't work. 47 | $( '#menu' ).multilevelpushmenu( 'expand' , 'Mobile Phones' ); 48 | 49 | // More safe way is to use methods like 50 | // $( '#menu' ).multilevelpushmenu( 'findmenusbytitle' , 'Mobile Phones' ); 51 | // and then invoke expand method with desired menu level object 52 | // (e.g. if we have several menu objects with title 'Mobile Phones' but 53 | // we want to expand the first one) 54 | // var $phonemenu = $( '#menu' ).multilevelpushmenu( 'findmenusbytitle' , 'Mobile Phones' ).first(); 55 | // and then 56 | // $( '#menu' ).multilevelpushmenu( 'expand' , $phonemenu ); 57 | }); 58 | 59 | // Collapse to the level of 'Devices' menu 60 | $( '#collapsedevices' ).click(function(){ 61 | // Have in mind that this will collapse to the level of 'Devices' 62 | // menu (level 1 in our case). So even when open path is not containing 63 | // 'Devices' menu it will collapse expanded menus to level 1; it's 64 | // basically the same as 65 | // $( '#menu' ).multilevelpushmenu( 'collapse' , 1 ); 66 | $( '#menu' ).multilevelpushmenu( 'collapse' , 'Devices' ); 67 | }); 68 | }); 69 | -------------------------------------------------------------------------------- /demo/fullexpandcollapse/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /demo/jquery.multilevelpushmenu.css: -------------------------------------------------------------------------------- 1 | .multilevelpushmenu_wrapper { 2 | position: absolute; 3 | overflow: hidden; 4 | min-width: 100%; 5 | min-height: 100%; 6 | margin: 0; 7 | padding: 0; 8 | } 9 | 10 | .multilevelpushmenu_wrapper .levelHolderClass { 11 | position: absolute; 12 | overflow: hidden; 13 | top: 0; 14 | background: #336ca6; 15 | width: auto; 16 | min-height: 100%; 17 | font-family: 'Open Sans Condensed', sans-serif; 18 | font-size: 1em; 19 | zoom: 1; 20 | } 21 | 22 | .multilevelpushmenu_wrapper .ltr { 23 | margin-left: -100%; 24 | left: 0; 25 | -moz-box-shadow: 5px 0 5px -5px #1f4164; 26 | -webkit-box-shadow: 5px 0 5px -5px #1f4164; 27 | box-shadow: 5px 0 5px -5px #1f4164; 28 | filter: progid:DXImageTransform.Microsoft.Shadow(color=#1f4164,direction=90,strength=2); 29 | } 30 | 31 | .multilevelpushmenu_wrapper .rtl { 32 | margin-right: -100%; 33 | right: 0; 34 | -moz-box-shadow: 5px 0 5px 5px #1f4164; 35 | -webkit-box-shadow: 5px 0 5px 5px #1f4164; 36 | box-shadow: 5px 0 5px 5px #1f4164; 37 | filter: progid:DXImageTransform.Microsoft.Shadow(color=#1f4164,direction=270,strength=2); 38 | } 39 | 40 | .multilevelpushmenu_wrapper .multilevelpushmenu_inactive { 41 | background: #2e6196; 42 | } 43 | 44 | .multilevelpushmenu_wrapper h2 { 45 | font-size: 1.5em; 46 | line-height: 1em; 47 | font-weight: bold; 48 | color: #1f4164; 49 | padding: 0 .4em 0 .4em; 50 | } 51 | 52 | .multilevelpushmenu_wrapper ul { 53 | list-style: none; 54 | padding: 0; 55 | margin: 0; 56 | } 57 | 58 | .multilevelpushmenu_wrapper li { 59 | cursor: pointer; 60 | border-top: 1px solid #295685; 61 | padding: .4em .4em .4em .4em; 62 | } 63 | 64 | .multilevelpushmenu_wrapper li:last-child { 65 | border-bottom: 1px solid #295685; 66 | } 67 | 68 | .multilevelpushmenu_wrapper li:hover { 69 | background-color: #295685; 70 | } 71 | 72 | .multilevelpushmenu_wrapper a { 73 | display: block; 74 | outline: none; 75 | overflow: hidden; 76 | font-size: 1.5em; 77 | line-height: 1em; 78 | padding: .2em .2em; 79 | text-decoration: none; 80 | color: #fff; 81 | } 82 | 83 | .multilevelpushmenu_wrapper a:hover { 84 | color: #ffe; 85 | } 86 | 87 | .multilevelpushmenu_wrapper .backItemClass { 88 | display: block; 89 | padding: .4em .4em .4em .4em; 90 | background: #2e6196; 91 | border-top: 1px solid #295685; 92 | } 93 | 94 | .multilevelpushmenu_wrapper .floatRight { 95 | float: right; 96 | } 97 | 98 | .multilevelpushmenu_wrapper .floatLeft { 99 | float: left; 100 | } 101 | 102 | .multilevelpushmenu_wrapper .cursorPointer { 103 | cursor: pointer; 104 | } 105 | 106 | .multilevelpushmenu_wrapper .iconSpacing_ltr { 107 | padding: 0 .4em 0 0; 108 | } 109 | 110 | .multilevelpushmenu_wrapper .iconSpacing_rtl { 111 | padding: 0 0 0 .4em; 112 | } 113 | 114 | .multilevelpushmenu_wrapper h2 > img, 115 | .multilevelpushmenu_wrapper a > img { 116 | max-height: 1em; 117 | } -------------------------------------------------------------------------------- /demo/jquery.multilevelpushmenu_brown.css: -------------------------------------------------------------------------------- 1 | .mlpm_w { 2 | position: absolute; 3 | overflow: hidden; 4 | min-width: 100%; 5 | min-height: 100%; 6 | margin: 0; 7 | padding: 0; 8 | } 9 | 10 | .mlpm_w .levelHolderClass { 11 | position: absolute; 12 | overflow: hidden; 13 | top: 0; 14 | background: #926738; 15 | width: auto; 16 | min-height: 100%; 17 | font-family: 'Open Sans Condensed', sans-serif; 18 | font-size: 1em; 19 | zoom: 1; 20 | } 21 | 22 | .mlpm_w .ltr { 23 | margin-left: -100%; 24 | left: 0; 25 | -moz-box-shadow: 5px 0 5px -5px #50371B; 26 | -webkit-box-shadow: 5px 0 5px -5px #50371B; 27 | box-shadow: 5px 0 5px -5px #50371B; 28 | filter: progid:DXImageTransform.Microsoft.Shadow(color=#50371B,direction=90,strength=2); 29 | } 30 | 31 | .mlpm_w .rtl { 32 | margin-right: -100%; 33 | right: 0; 34 | -moz-box-shadow: 5px 0 5px 5px #50371B; 35 | -webkit-box-shadow: 5px 0 5px 5px #50371B; 36 | box-shadow: 5px 0 5px 5px #50371B; 37 | filter: progid:DXImageTransform.Microsoft.Shadow(color=#50371B,direction=270,strength=2); 38 | } 39 | 40 | .mlpm_w .multilevelpushmenu_inactive { 41 | background: #9F7648; 42 | } 43 | 44 | .mlpm_w h2 { 45 | font-size: 1.5em; 46 | line-height: 1em; 47 | font-weight: bold; 48 | color: #50371B; 49 | padding: 0 .4em 0 .4em; 50 | } 51 | 52 | .mlpm_w ul { 53 | list-style: none; 54 | padding: 0; 55 | margin: 0; 56 | } 57 | 58 | .mlpm_w li { 59 | cursor: pointer; 60 | border-top: 1px solid #50371B; 61 | padding: .4em .4em .4em .4em; 62 | } 63 | 64 | .mlpm_w li:last-child { 65 | border-bottom: 1px solid #50371B; 66 | } 67 | 68 | .mlpm_w li:hover { 69 | background-color: #50371B; 70 | } 71 | 72 | .mlpm_w a { 73 | display: block; 74 | outline: none; 75 | overflow: hidden; 76 | font-size: 1.5em; 77 | line-height: 1em; 78 | padding: .2em .2em; 79 | text-decoration: none; 80 | color: #E3CEB5; 81 | } 82 | 83 | .mlpm_w a:hover { 84 | color: #E3CEB5; 85 | } 86 | 87 | .mlpm_w .backItemClass { 88 | display: block; 89 | padding: .4em .4em .4em .4em; 90 | background: #9F7648; 91 | border-top: 1px solid #50371B; 92 | } 93 | 94 | .mlpm_w .floatRight { 95 | float: right; 96 | } 97 | 98 | .mlpm_w .floatLeft { 99 | float: left; 100 | } 101 | 102 | .mlpm_w .cursorPointer { 103 | cursor: pointer; 104 | } 105 | 106 | .mlpm_w .iconSpacing_ltr { 107 | padding: 0 .4em 0 0; 108 | } 109 | 110 | .mlpm_w .iconSpacing_rtl { 111 | padding: 0 0 0 .4em; 112 | } -------------------------------------------------------------------------------- /demo/jquery.multilevelpushmenu_grey.css: -------------------------------------------------------------------------------- 1 | .mlpm_w { 2 | position: absolute; 3 | overflow: hidden; 4 | min-width: 100%; 5 | min-height: 100%; 6 | margin: 0; 7 | padding: 0; 8 | } 9 | 10 | .mlpm_w .levelHolderClass { 11 | position: absolute; 12 | overflow: hidden; 13 | top: 0; 14 | background: #737373; 15 | width: auto; 16 | min-height: 100%; 17 | font-family: 'Open Sans Condensed', sans-serif; 18 | font-size: 1em; 19 | zoom: 1; 20 | } 21 | 22 | .mlpm_w .ltr { 23 | margin-left: -100%; 24 | left: 0; 25 | -moz-box-shadow: 5px 0 5px -5px #4F4F4F; 26 | -webkit-box-shadow: 5px 0 5px -5px #4F4F4F; 27 | box-shadow: 5px 0 5px -5px #4F4F4F; 28 | filter: progid:DXImageTransform.Microsoft.Shadow(color=#4F4F4F,direction=90,strength=2); 29 | } 30 | 31 | .mlpm_w .rtl { 32 | margin-right: -100%; 33 | right: 0; 34 | -moz-box-shadow: 5px 0 5px 5px #4F4F4F; 35 | -webkit-box-shadow: 5px 0 5px 5px #4F4F4F; 36 | box-shadow: 5px 0 5px 5px #4F4F4F; 37 | filter: progid:DXImageTransform.Microsoft.Shadow(color=#4F4F4F,direction=270,strength=2); 38 | } 39 | 40 | .mlpm_w .multilevelpushmenu_inactive { 41 | background: #979797; 42 | } 43 | 44 | .mlpm_w h2 { 45 | font-size: 1.5em; 46 | line-height: 1em; 47 | font-weight: bold; 48 | color: #4F4F4F; 49 | padding: 0 .4em 0 .4em; 50 | } 51 | 52 | .mlpm_w ul { 53 | list-style: none; 54 | padding: 0; 55 | margin: 0; 56 | } 57 | 58 | .mlpm_w li { 59 | cursor: pointer; 60 | border-top: 1px solid #4F4F4F; 61 | padding: .4em .4em .4em .4em; 62 | } 63 | 64 | .mlpm_w li:last-child { 65 | border-bottom: 1px solid #4F4F4F; 66 | } 67 | 68 | .mlpm_w li:hover { 69 | background-color: #4F4F4F; 70 | } 71 | 72 | .mlpm_w a { 73 | display: block; 74 | outline: none; 75 | overflow: hidden; 76 | font-size: 1.5em; 77 | line-height: 1em; 78 | padding: .2em .2em; 79 | text-decoration: none; 80 | color: #fff; 81 | } 82 | 83 | .mlpm_w a:hover { 84 | color: #ffe; 85 | } 86 | 87 | .mlpm_w .backItemClass { 88 | display: block; 89 | padding: .4em .4em .4em .4em; 90 | background: #979797; 91 | border-top: 1px solid #4F4F4F; 92 | } 93 | 94 | .mlpm_w .floatRight { 95 | float: right; 96 | } 97 | 98 | .mlpm_w .floatLeft { 99 | float: left; 100 | } 101 | 102 | .mlpm_w .cursorPointer { 103 | cursor: pointer; 104 | } 105 | 106 | .mlpm_w .iconSpacing_ltr { 107 | padding: 0 .4em 0 0; 108 | } 109 | 110 | .mlpm_w .iconSpacing_rtl { 111 | padding: 0 0 0 .4em; 112 | } -------------------------------------------------------------------------------- /demo/jquery.multilevelpushmenu_red.css: -------------------------------------------------------------------------------- 1 | .mlpm_w { 2 | position: absolute; 3 | overflow: hidden; 4 | min-width: 100%; 5 | min-height: 100%; 6 | margin: 0; 7 | padding: 0; 8 | } 9 | 10 | .mlpm_w .levelHolderClass { 11 | position: absolute; 12 | overflow: hidden; 13 | top: 0; 14 | background: #ce3130; 15 | width: auto; 16 | min-height: 100%; 17 | font-family: 'Open Sans Condensed', sans-serif; 18 | font-size: 1em; 19 | zoom: 1; 20 | } 21 | 22 | .mlpm_w .ltr { 23 | margin-left: -100%; 24 | left: 0; 25 | -moz-box-shadow: 5px 0 5px -5px #870000; 26 | -webkit-box-shadow: 5px 0 5px -5px #870000; 27 | box-shadow: 5px 0 5px -5px #870000; 28 | filter: progid:DXImageTransform.Microsoft.Shadow(color=#870000,direction=90,strength=2); 29 | } 30 | 31 | .mlpm_w .rtl { 32 | margin-right: -100%; 33 | right: 0; 34 | -moz-box-shadow: 5px 0 5px 5px #870000; 35 | -webkit-box-shadow: 5px 0 5px 5px #870000; 36 | box-shadow: 5px 0 5px 5px #870000; 37 | filter: progid:DXImageTransform.Microsoft.Shadow(color=#870000,direction=270,strength=2); 38 | } 39 | 40 | .mlpm_w .mlpm_inactive { 41 | background: #ba0011; 42 | } 43 | 44 | .mlpm_w h2 { 45 | font-size: 1.5em; 46 | line-height: 1em; 47 | font-weight: bold; 48 | color: #870000; 49 | padding: 0 .4em 0 .4em; 50 | } 51 | 52 | .mlpm_w ul { 53 | list-style: none; 54 | padding: 0; 55 | margin: 0; 56 | } 57 | 58 | .mlpm_w li { 59 | cursor: pointer; 60 | border-top: 1px solid #870000; 61 | padding: .4em .4em .4em .4em; 62 | } 63 | 64 | .mlpm_w li:last-child { 65 | border-bottom: 1px solid #870000; 66 | } 67 | 68 | .mlpm_w li:hover { 69 | background-color: #870000; 70 | } 71 | 72 | .mlpm_w a { 73 | display: block; 74 | outline: none; 75 | overflow: hidden; 76 | font-size: 1.5em; 77 | line-height: 1em; 78 | padding: .2em .2em; 79 | text-decoration: none; 80 | color: #fff; 81 | } 82 | 83 | .mlpm_w a:hover { 84 | color: #ffe; 85 | } 86 | 87 | .mlpm_w .backItemClass { 88 | display: block; 89 | padding: .4em .4em .4em .4em; 90 | background: #ba0011; 91 | border-top: 1px solid #870000; 92 | } 93 | 94 | .mlpm_w .floatRight { 95 | float: right; 96 | } 97 | 98 | .mlpm_w .floatLeft { 99 | float: left; 100 | } 101 | 102 | .mlpm_w .cursorPointer { 103 | cursor: pointer; 104 | } 105 | 106 | .mlpm_w .iconSpacing_ltr { 107 | padding: 0 .4em 0 0; 108 | } 109 | 110 | .mlpm_w .iconSpacing_rtl { 111 | padding: 0 0 0 .4em; 112 | } -------------------------------------------------------------------------------- /demo/options/options.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | background: #fff; 5 | } 6 | 7 | #pushobj { 8 | position: absolute; 9 | top: 7px; 10 | left: 300px; 11 | color: #000; 12 | font-family: 'Open Sans Condensed', sans-serif; 13 | font-size: 2em; 14 | z-index: 1; 15 | } -------------------------------------------------------------------------------- /demo/options/options.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 24 | 25 |
26 | 34 |
35 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | -------------------------------------------------------------------------------- /demo/options/options.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function(){ 2 | // HTML markup implementation, overlap mode 3 | $( '#menu' ).multilevelpushmenu({ 4 | containersToPush: [$( '#pushobj' )], 5 | 6 | // Just for fun also changing the look of the menu 7 | wrapperClass: 'mlpm_w', 8 | menuInactiveClass: 'mlpm_inactive' 9 | }); 10 | 11 | // Get value for mode option 12 | $( '#getMode' ).click(function(){ 13 | $( this ).find( 'span' ).text( $( '#menu' ).multilevelpushmenu( 'option', 'mode' ) ); 14 | }); 15 | 16 | // Set value for mode option 17 | $( '#setMode' ).click(function(){ 18 | // Collapse menu first to ensure good functionality after mode change 19 | $( '#menu' ).multilevelpushmenu( 'collapse', 0 ); 20 | // Toggle mode 21 | $( '#menu' ).multilevelpushmenu( 'option', 'mode') == 'overlap' ? 22 | $( this ).find( 'span' ).text( $( '#menu' ).multilevelpushmenu( 'option', 'mode', 'cover' ) ) : $( this ).find( 'span' ).text( $( '#menu' ).multilevelpushmenu( 'option', 'mode', 'overlap' ) ); 23 | // Update getMode button info 24 | $( '#getMode' ).find( 'span' ).text( $( '#menu' ).multilevelpushmenu( 'option', 'mode' ) ); 25 | }); 26 | }); 27 | -------------------------------------------------------------------------------- /demo/pushmany/pushmany.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | background: #243342; 5 | } 6 | 7 | #pushobj { 8 | position: absolute; 9 | top: 0; 10 | left: 0; 11 | height: 100%; 12 | color: #fff; 13 | background: #243342; 14 | padding-left: 450px; 15 | font-family: 'Open Sans Condensed', sans-serif; 16 | font-size: 2em; 17 | } 18 | 19 | #pushthisobjalso { 20 | position: absolute; 21 | top: 150px; 22 | left: 400px; 23 | color: #000; 24 | background: #c8ccd7; 25 | padding: 20px; 26 | font-family: 'Open Sans Condensed', sans-serif; 27 | font-size: 2em; 28 | } 29 | 30 | #pushthisobjtoo { 31 | position: absolute; 32 | top: 250px; 33 | left: 450px; 34 | color: #fff; 35 | background: #d13e1d; 36 | padding: 20px; 37 | font-family: 'Open Sans Condensed', sans-serif; 38 | font-size: 2em; 39 | } 40 | 41 | #lazy { 42 | position: absolute; 43 | top: 350px; 44 | left: 500px; 45 | color: #fff; 46 | background: #a1a8bb; 47 | padding: 20px; 48 | font-family: 'Open Sans Condensed', sans-serif; 49 | font-size: 2em; 50 | } -------------------------------------------------------------------------------- /demo/pushmany/pushmany.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 23 | 24 |
25 | Some content here! 26 |
27 |
28 | Push me! 29 |
30 |
31 | Push me too! 32 |
33 |
34 | I'm lazy! I'll just stay here. 35 |
36 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | -------------------------------------------------------------------------------- /demo/pushmany/pushmany.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function(){ 2 | // HTML markup implementation, overlap mode, push 3 DOM elements 3 | $( '#menu' ).multilevelpushmenu({ 4 | containersToPush: [$( '#pushobj' ), $( '#pushthisobjalso' ), $( '#pushthisobjtoo' )] 5 | }); 6 | }); -------------------------------------------------------------------------------- /demo/responsive/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /demo/responsive/responsive.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | background: #243342; 5 | } 6 | 7 | #pushobj { 8 | position: absolute; 9 | top: 0px; 10 | left: 30%; 11 | color: #fff; 12 | background: #243342; 13 | font-family: 'Open Sans Condensed', sans-serif; 14 | font-size: 2em; 15 | z-index: 1; 16 | } -------------------------------------------------------------------------------- /demo/responsive/responsive.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 23 | 24 |
25 | resize browser window to see menu scaling 26 |
27 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 204 | 205 | 206 | -------------------------------------------------------------------------------- /demo/responsive/responsive.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function(){ 2 | // HTML markup implementation, overlap mode 3 | $( '#menu' ).multilevelpushmenu({ 4 | containersToPush: [$( '#pushobj' )], 5 | menuWidth: '25%', 6 | menuHeight: '100%' 7 | }); 8 | }); 9 | 10 | $(window).resize(function () { 11 | $( '#menu' ).multilevelpushmenu( 'redraw' ); 12 | }); 13 | -------------------------------------------------------------------------------- /demo/rtl/rtl.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | background: #243342; 5 | } 6 | 7 | #menu { 8 | position: absolute; 9 | top: 0px; 10 | right: 0px; 11 | height: 100%; 12 | } -------------------------------------------------------------------------------- /demo/rtl/rtl.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 23 | 24 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | -------------------------------------------------------------------------------- /demo/rtl/rtl.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function(){ 2 | // HTML markup implementation, overlap mode 3 | $( '#menu' ).multilevelpushmenu({ 4 | direction: 'rtl', 5 | backItemIcon: 'fa fa-angle-left', 6 | groupIcon: 'fa fa-angle-right' 7 | }); 8 | }); -------------------------------------------------------------------------------- /jquery.multilevelpushmenu.css: -------------------------------------------------------------------------------- 1 | .multilevelpushmenu_wrapper { 2 | position: absolute; 3 | overflow: hidden; 4 | min-width: 100%; 5 | min-height: 100%; 6 | margin: 0; 7 | padding: 0; 8 | } 9 | 10 | .multilevelpushmenu_wrapper .levelHolderClass { 11 | position: absolute; 12 | overflow: hidden; 13 | top: 0; 14 | background: #336ca6; 15 | width: auto; 16 | min-height: 100%; 17 | font-family: 'Open Sans Condensed', sans-serif; 18 | font-size: 1em; 19 | zoom: 1; 20 | } 21 | 22 | .multilevelpushmenu_wrapper .ltr { 23 | margin-left: -100%; 24 | left: 0; 25 | -moz-box-shadow: 5px 0 5px -5px #1f4164; 26 | -webkit-box-shadow: 5px 0 5px -5px #1f4164; 27 | box-shadow: 5px 0 5px -5px #1f4164; 28 | filter: progid:DXImageTransform.Microsoft.Shadow(color=#1f4164,direction=90,strength=2); 29 | } 30 | 31 | .multilevelpushmenu_wrapper .rtl { 32 | margin-right: -100%; 33 | right: 0; 34 | -moz-box-shadow: 5px 0 5px 5px #1f4164; 35 | -webkit-box-shadow: 5px 0 5px 5px #1f4164; 36 | box-shadow: 5px 0 5px 5px #1f4164; 37 | filter: progid:DXImageTransform.Microsoft.Shadow(color=#1f4164,direction=270,strength=2); 38 | } 39 | 40 | .multilevelpushmenu_wrapper .multilevelpushmenu_inactive { 41 | background: #2e6196; 42 | } 43 | 44 | .multilevelpushmenu_wrapper h2 { 45 | font-size: 1.5em; 46 | line-height: 1em; 47 | font-weight: bold; 48 | color: #1f4164; 49 | padding: 0 .4em 0 .4em; 50 | } 51 | 52 | .multilevelpushmenu_wrapper ul { 53 | list-style: none; 54 | padding: 0; 55 | margin: 0; 56 | } 57 | 58 | .multilevelpushmenu_wrapper li { 59 | cursor: pointer; 60 | border-top: 1px solid #295685; 61 | padding: .4em .4em .4em .4em; 62 | } 63 | 64 | .multilevelpushmenu_wrapper li:last-child { 65 | border-bottom: 1px solid #295685; 66 | } 67 | 68 | .multilevelpushmenu_wrapper li:hover { 69 | background-color: #295685; 70 | } 71 | 72 | .multilevelpushmenu_wrapper a { 73 | display: block; 74 | outline: none; 75 | overflow: hidden; 76 | font-size: 1.5em; 77 | line-height: 1em; 78 | padding: .2em .2em; 79 | text-decoration: none; 80 | color: #fff; 81 | } 82 | 83 | .multilevelpushmenu_wrapper a:hover { 84 | color: #ffe; 85 | } 86 | 87 | .multilevelpushmenu_wrapper .backItemClass { 88 | display: block; 89 | padding: .4em .4em .4em .4em; 90 | background: #2e6196; 91 | border-top: 1px solid #295685; 92 | } 93 | 94 | .multilevelpushmenu_wrapper .floatRight { 95 | float: right; 96 | } 97 | 98 | .multilevelpushmenu_wrapper .floatLeft { 99 | float: left; 100 | } 101 | 102 | .multilevelpushmenu_wrapper .cursorPointer { 103 | cursor: pointer; 104 | } 105 | 106 | .multilevelpushmenu_wrapper .iconSpacing_ltr { 107 | padding: 0 .4em 0 0; 108 | } 109 | 110 | .multilevelpushmenu_wrapper .iconSpacing_rtl { 111 | padding: 0 0 0 .4em; 112 | } 113 | 114 | .multilevelpushmenu_wrapper h2 > img, 115 | .multilevelpushmenu_wrapper a > img { 116 | max-height: 1em; 117 | } -------------------------------------------------------------------------------- /jquery.multilevelpushmenu.min.css: -------------------------------------------------------------------------------- 1 | .multilevelpushmenu_wrapper{position:absolute;overflow:hidden;min-width:100%;min-height:100%;margin:0;padding:0}.multilevelpushmenu_wrapper .levelHolderClass{position:absolute;overflow:hidden;top:0;background:#336ca6;width:auto;min-height:100%;font-family:'Open Sans Condensed',sans-serif;font-size:1em;zoom:1}.multilevelpushmenu_wrapper .ltr{margin-left:-100%;left:0;-moz-box-shadow:5px 0 5px -5px #1f4164;-webkit-box-shadow:5px 0 5px -5px #1f4164;box-shadow:5px 0 5px -5px #1f4164;filter:progid:DXImageTransform.Microsoft.Shadow(color=#1f4164,direction=90,strength=2)}.multilevelpushmenu_wrapper .rtl{margin-right:-100%;right:0;-moz-box-shadow:5px 0 5px 5px #1f4164;-webkit-box-shadow:5px 0 5px 5px #1f4164;box-shadow:5px 0 5px 5px #1f4164;filter:progid:DXImageTransform.Microsoft.Shadow(color=#1f4164,direction=270,strength=2)}.multilevelpushmenu_wrapper .multilevelpushmenu_inactive{background:#2e6196}.multilevelpushmenu_wrapper h2{font-size:1.5em;line-height:1em;font-weight:700;color:#1f4164;padding:0 .4em}.multilevelpushmenu_wrapper ul{list-style:none;padding:0;margin:0}.multilevelpushmenu_wrapper li{cursor:pointer;border-top:1px solid #295685;padding:.4em}.multilevelpushmenu_wrapper li:last-child{border-bottom:1px solid #295685}.multilevelpushmenu_wrapper li:hover{background-color:#295685}.multilevelpushmenu_wrapper a{display:block;outline:none;overflow:hidden;font-size:1.5em;line-height:1em;padding:.2em;text-decoration:none;color:#fff}.multilevelpushmenu_wrapper a:hover{color:#ffe}.multilevelpushmenu_wrapper .backItemClass{display:block;padding:.4em;background:#2e6196;border-top:1px solid #295685}.multilevelpushmenu_wrapper .floatRight{float:right}.multilevelpushmenu_wrapper .floatLeft{float:left}.multilevelpushmenu_wrapper .cursorPointer{cursor:pointer}.multilevelpushmenu_wrapper .iconSpacing_ltr{padding:0 .4em 0 0}.multilevelpushmenu_wrapper .iconSpacing_rtl{padding:0 0 0 .4em}.multilevelpushmenu_wrapper h2 > img,.multilevelpushmenu_wrapper a > img{max-height:1em} -------------------------------------------------------------------------------- /jquery.multilevelpushmenu.min.js: -------------------------------------------------------------------------------- 1 | !function(t){t.fn.multilevelpushmenu=function(e){"use strict";var i=arguments,n=null;return this.each(function(){function s(t){t.stopPropagation&&t.preventDefault?(t.stopPropagation(),t.preventDefault()):(t.cancelBubble=!0,t.returnValue=!1)}function a(e,i){if(void 0==e||void 0==i)return!1;e.on(i,function(n,s){e.hide();try{if(!n.pageX||!n.pageY)return!1;s=s||{pageX:n.pageX,pageY:n.pageY};var a=document.elementFromPoint(s.pageX,s.pageY);a=3==a.nodeType?a.parentNode:a,t(a).trigger(i,s)}catch(e){t.error("Error while propagating event: "+e.message)}finally{e.show()}})}function r(){var e=t("