Skip to content
This repository was archived by the owner on Mar 7, 2024. It is now read-only.

Commit 1f5b1fc

Browse files
committed
v2.0.0
1 parent dba36d0 commit 1f5b1fc

File tree

6 files changed

+586
-184
lines changed

6 files changed

+586
-184
lines changed

README.md

Lines changed: 70 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
## jQuery Plugin inspired by [Codrops](http://tympanus.net/codrops/2013/08/13/multi-level-push-menu/) MultiLevelPushMenu implementation
44
If you do not need older browsers supported (i.e. IE 8) I do recommend you to use Codrops implementation since it's based on CSS 3D Transforms and therefore has better preformances.
55

6-
###Demo / More Examples [multi-level-push-menu.make.rs](http://multi-level-push-menu.make.rs)
6+
###Simple Demo [multi-level-push-menu.make.rs](http://multi-level-push-menu.make.rs)
7+
More examples will be provided soon.
78

89
### Features
910
* Multi-level menu support
@@ -491,22 +492,77 @@ Full list of options is provided below.
491492

492493
container: $( '#menu' ), // Holding container.
493494
containersToPush: [ $( '#content1' ), $( '#content2' ) ], // Array of objects to push/slide together with menu.
494-
collapsed: false, // Initialize menu in collapsed/expanded mode
495-
menuID: "multilevelpushmenu", // ID of <nav> element.
496-
wrapperClass: 'multilevelpushmenu_wrapper', // Wrapper CSS class.
497-
menuInactiveClass: 'multilevelpushmenu_inactive', // CSS class for inactive wrappers.
498-
menu: arrMenu, // JS array of menu items (if markup not provided).
499-
menuWidth: 0, // Wrapper width (integer, '%', 'px', 'em').
500-
menuHeight: 0, // Menu height (integer, '%', 'px', 'em').
501-
backText: 'Back', // Text for 'Back' menu item.
502-
backItemClass: 'backItemClass', // CSS class for back menu item.
503-
backItemIcon: 'fa fa-angle-right', // FontAvesome icon used for back menu item.
504-
groupIcon: 'fa fa-angle-left', // FontAvesome icon used for menu items contaning sub-items.
505-
mode: 'overlap', // Menu sliding mode: overlap/cover.
506-
overlapWidth: 40 // Width in px of menu wrappers overlap
495+
collapsed: false, // Initialize menu in collapsed/expanded mode
496+
menuID: "multilevelpushmenu", // ID of <nav> element.
497+
wrapperClass: 'multilevelpushmenu_wrapper', // Wrapper CSS class.
498+
menuInactiveClass: 'multilevelpushmenu_inactive', // CSS class for inactive wrappers.
499+
menu: arrMenu, // JS array of menu items (if markup not provided).
500+
menuWidth: 0, // Wrapper width (integer, '%', 'px', 'em').
501+
menuHeight: 0, // Menu height (integer, '%', 'px', 'em').
502+
backText: 'Back', // Text for 'Back' menu item.
503+
backItemClass: 'backItemClass', // CSS class for back menu item.
504+
backItemIcon: 'fa fa-angle-right', // FontAvesome icon used for back menu item.
505+
groupIcon: 'fa fa-angle-left', // FontAvesome icon used for menu items contaning sub-items.
506+
mode: 'overlap', // Menu sliding mode: overlap/cover.
507+
overlapWidth: 40 // Width in px of menu wrappers overlap
508+
509+
Full list of exposed metdods is provided below.
510+
511+
### Methods
512+
513+
// Initialize menu
514+
$('#menu').multilevelpushmenu('init') // Equivalent to $('#menu').multilevelpushmenu()
515+
516+
// Collapse menu
517+
$('#menu').multilevelpushmenu('collapse') // Full menu collapse
518+
$('#menu').multilevelpushmenu('collapse', 1) // Collapse menu down to level 1 (0 is starting level)
519+
$('#menu').multilevelpushmenu('collapse', $menuLevelObject) // Collapse menu down to the level of $menuLevelObject
520+
$('#menu').multilevelpushmenu('collapse', 'Devices') // Collapse menu down to the level of $menuLevelObject with title 'Devices' (not really recommended since there could be many menu level objects with the same title; in such cases collasing will be unsuccessful)
521+
522+
// Expand menu
523+
$('#menu').multilevelpushmenu('expand') // Menu expand from fully collapsed mode to level 0
524+
$('#menu').multilevelpushmenu('expand', $menuLevelObject) // Expand menu up to the $menuLevelObject
525+
$('#menu').multilevelpushmenu('expand', 'Devices') // Expand menu up to the $menuLevelObject with title 'Devices' (not recommended since there could be many menu level objects with the same title; in such cases expanding will be unsuccessful)
526+
When expand method is invoked, if menu was already expanded to some other menu level object it will first collapse to highest shared parent menu level and then expanded from that point to desired menu level.
527+
528+
// Menu expanded
529+
$('#menu').multilevelpushmenu('menuexpanded', $menuLevelObject) // Check if menu level object is expanded (returns true/false)
530+
531+
// Active menu
532+
$('#menu').multilevelpushmenu('activemenu') // Provides active menu level object or false if menu is fully collapsed
533+
534+
// Find menu(s) by title
535+
$('#menu').multilevelpushmenu('findmenusbytitle', 'Devices') // Provides collection of menu level objects matching provided menu title, or false if there is no match
536+
537+
// Find path to root menu collection
538+
$('#menu').multilevelpushmenu('pathtoroot', $menuLevelObject) // Provides collection chain of menu level objects (root menu level object - given menu level object), or false in case of error
539+
540+
// Find shared path or path differences in between 2 provided menus
541+
$('#menu').multilevelpushmenu('comparepaths', $menuLevelObject1, $menuLevelObject2, bool) // Provides collection of shared menu level objects in between two menu level objects if bool is true, or differences collection if bool is false, or false if there is no match
542+
543+
// Get/Set settings options
544+
$('#menu').multilevelpushmenu('option', 'mode', 'cover') // Get (if third parameter is not set) or Set selected multi-level-push-menu option
545+
546+
Full list of events/callbacks is provided below.
547+
548+
### Events/Callbacks
549+
550+
onCollapseMenuStart // Menu collapse started
551+
onCollapseMenuEnd // Menu collapse ended
552+
onExpandMenuStart // Menu expand started
553+
onExpandMenuEnd // Menu expand ended
554+
onGroupItemClick // Click/touchstart menu item containing sub-items
555+
onItemClick // Click/touchstart menu item which doesn't contain sub-items
556+
onTitleItemClick // Title icon click/touchstart
557+
onBackItemClick // Back item click/touchstart
558+
559+
Provided argument for onCollapseMenuStart, onCollapseMenuEnd, onExpandMenuStart and onExpandMenuEnd callbacks is current settings options object.
560+
For onTitleItemClick and onBackItemClick callbacks provided arguments are respecively event object and menu level holder object.
561+
For onGroupItemClick and onItemClick callbacks provided arguments are respecively event object, menu level object and clicked item object.
507562

508563
### Browser Support / tested
509564
* Chrome
565+
* Midori
510566
* Firefox
511567
* Safari
512568
* IE8+

demo/jquery.multilevelpushmenu.css

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@
99

1010
.multilevelpushmenu_wrapper .levelHolderClass {
1111
position: absolute;
12-
left: -100%;
12+
margin-left: -100%;
13+
left: 0;
1314
top: 0;
1415
background: #336ca6;
1516
width: auto;

demo/jquery.multilevelpushmenu.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

jquery.multilevelpushmenu.css

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@
99

1010
.multilevelpushmenu_wrapper .levelHolderClass {
1111
position: absolute;
12-
left: -100%;
12+
margin-left: -100%;
13+
left: 0;
1314
top: 0;
1415
background: #336ca6;
1516
width: auto;

0 commit comments

Comments
 (0)