CodeCanyon Path Style Menu 2113415

CodeCanyon Path Style Menu 2113415

CodeCanyon Path Style Menu 2113415
JavaScript \ Navigation
Navigation \ Navbar \ Mobile \ Rotate \ Slide \ Tablet \ Menu \ Iphone \ Transitions

JavaScript - Path Style Menu 2113415 by Ale55andro @ CodeCanyon

JavaScript \ Navigation

Last Update: 27 November 12; Compatible Browsers: IE8, IE9, Firefox 2, Firefox 3, Firefox 4, Safari 4, Safari 5, Opera, Chrome; Files Included: JavaScript JS, HTML, CSS.

*We now support multi-level submenu items.
This menu is inspired by Path 2.0 UI which has sky rocketed the Path application in the App store, proving that a distinctive UI can really give you the edge in a competitive marketplace with similar products.

We bring you the same simplicity of the Path based menu using minimal css3 and javascript and it has no external dependencies. This means you are free to use your clientside library of choice without feeling penalized and due to it’s small size and zero dependency, it’s also a very good choice for usage on mobile and tablet devices where bandwidth, speed, responsiveness and screen estate all play an important role.

When the user presses or clicks the button, menu items expand and place themselves around the main button forming an arc. To close the menu the user needs to either selects one of the options presented or press the main button again. If a menu item has submenu items, then the user can either navigate back to the previous level or select one of the choices presented.

This menu also sports minimal options to configure, a zero learning curve and integration into your apps with small effort. You only need to set a few properties, the essential to get it working.

26/11/2012 Changeset 3.5

- Fixed an issue on touch devices where the inline menu wasn’t showing at all. A change in the previous release broke this, fixed now.

- Fixed the positioning of submenu items when there were 1 or 2 submenu items in all. The menu items would remain partially covered by the main button.

- Ensured that the menu doesn’t get hidden by accident, i.e. you end up selecting the menu in your css when creating responsive design layouts and hidding it. Noted a few themes doing this, shouldn’t be a problem now.

19/11/2012 Changeset 3.4

- Clicking the buttons will now allow enough time for the animation to complete before navigating to the destination url

- When the menu loads the first time, you see it in motion as it hides behind the main button. This was unintentional. Now it just loads behind the main button period.

- Fixed inconsistencies in the documentation.

22/10/2012 Changeset 3.3

- New documentation in pdf format

- Added support for setting url directly when setting the items. No need to write any code for navigation, as long as you provided the url, navigation is automatic. This makes setting up
navigation quite easy and doesn’t require manually subscribing to events if one wants to only provide navigation.

- Added support for opening the url in new tab, default is false.

- Removed the requirement for setting icons url in css. You can now setup the entire menu in javascript or do things as before. You’ll have to take a look at the new documentation.

- Earlier versions exposed a single onSelecteditem which fired for any button
clicked. This is a cause for confusion as you then had to manually filter the buttons
of interest. For sakes of clarity we now expose separate events instead.

- onMainButtonClick!fires when the main button is clicked

- onParentButtonClick!fires when a parent item is clicked

- onBackButtonClick!fires when the back button is clicked

- onItemButtonClick!fires for a menu item button

- Fixed an inconsistency with the automatic expansion of the menu in page

- Changed the way id’s were output by the component. This change break backward
compatibility in this version. People using css to style the buttons, which was also
the default in previous versions, will want to prefix the menu id with the menu
button identifier i.e. previously if they had this.

#menuitem0 {
background: url('./images/photo.png') no-repeat;
#menuitem1 {
background: url('./images/people.png') no-repeat;

now its.

#menu1_menuitem0 {
background: url('./images/photo.png') no-repeat;
#menu1_menuitem1 {
background: url('./images/people.png') no-repeat;

where menu1 is the id of your menu.

- The container element now has a default size that is the size of the main button.
Previously we left this responsibility on the user but this added more room for
confusion and more manual steps to make the inlined menu behave as one would expect
it to. This is now handled by the menu internally.

10/01/2012 Changeset 3.2

- enableUrlHash is now false by default. To use this feature you have to manually set it to true e.g. {enableUrlHash: true} passed in as an option to the menu constructor.

- When passing a simple set of string values to the items property eg: {items: ‘Menu 1’, ‘Menu 2’, ‘Menu 3’} vs the much richer format, the value parameter passed to the onSelectedItem event handler turned up null. This is fixed now.

- when a menu item is active (i.e. clicked) which collapses the menu items all together, clicking into the document again expands the menu with the clicked element not showing. The menu shouldn’t expand nor should the clicked element be hidden. This is a bug due to the clicked element being hidden via opacity. It’s fixed now.

- Added default margin and padding on main button. This is to ensure that third party css in the page does not affect the menu.

- Added support for automatically opening the menu on page load. To enable this you have to set expanded: true

- Added support for automatically collapsing the menu after it was automatically expanded on page load. For this you have to set the expandTimeout value to the number of waiting milliseconds.

- Added support for labels. You can enable this feature by adding showLabel: true, and a label is displayed alongside the icon. The label text is supplied through the title property.

8/15/2012 Changeset 3.1 !This update mostly resolves any ie8 and ie7 issues. A list of fixes .

- IE7 & IE8 compatibility fixes.

- when clicking in the document and elements were in an expanded state,
they weren’t getting collapsed. This is fixed now.

- All the online demos used querySelector. This breaks in ie8 ( compatbility

- Added a polyfill for querySelector and [].forEach. This is only affecting
the online demo in ie8. Fixed.

- Added a polyfill for String.trim

- Fixed the dispose method which choked in ie8

- Other issues.

- Added high z-index order support for the menu when on inline mode.

- Fixed flicker in css3 transition on firefox, where the animation was choppy
and slow.

- Added a missing link in the documentation.

8/10/2012 Changeset 3.0

- Added support for docking the menu in the Left Top Corner, Right Top Corner and Bottom Right Corner. Previously we had support for only the Bottom Left Corner. Now we support docking in all 4 corners of the screen.

- Docking is now properly supported in android 4.0++ as it supports css fixed position nicely. It should work similarly in iOS 5 (if not report it, thanks).

- Added support for inlining the menu.

- We now support 11 different styles of laying out the menu.


- PathMenu.ExpandPattern.lineTop

- PathMenu.ExpandPattern.lineRight

- PathMenu.ExpandPattern.lineBottom

- PathMenu.ExpandPattern.lineLeft

- PathMenu.ExpandPattern.lineMiddleHorizontal

- PathMenu.ExpandPattern.lineMiddleVertical

- PathMenu.ExpandPattern.leftBottomFixedArc

- PathMenu.ExpandPattern.leftTopFixedArc

- PathMenu.ExpandPattern.rightBottomFixedArc

- PathMenu.ExpandPattern.rightTopFixedArc

- Added support for multiple instances of the menu

- Added support for textual content in the buttons.

- Added support for image masks.

- Extended the api and exposed new methods and properties, specifically ones you can use to add menu items dynamically. Reference the documentation for the details. In addition we’ve also added a new lab demo to showcase more complex scenarios, such as adding menu items at runtime.

6/12/2012 Changeset 1.9

- Fixed a bug in handheld devices where the addressbar wasn’t compensated for. This resulted in the menu not doing anything during a touch operation.

- Added a default z-index order to ensure that the menu is always above all other elements on the page where it resides.

5/19/2012 what’s new in this release 1.8 (The current version) .

- Enhanced the curve

- Added support for closing menu when clicking into the document. This is only for desktop. On touch enabled devices you have to use the close button .

- Added support for tooltips. This is available only on desktop(non-touch enabled devices). check the documentation on how to get tooltip on your menu items.

- onSelectedItem handler now includes the clicked menu items title as well, which is passed in the callbacks arguments.

- Media queries. You can now pass a list of viewport widths to the control eg: [{‘minWidth’: 640, ‘maxWidth’: 1024}] and it will render itself if this condition is satisfied by the requesting device/browser.

- Horizontal scrollbar thickness wasn’t compensated for when placing the menu in the lower left corner of the viewport. This is fixed now.

- Most biggest feature yet as it has been asked more times is that we now have a wordpress plugin (already submitted for review).

5/19/2012 Changeset 1.8 .

- Fixed positioning bug where if you had only a single menu item and with the proper curve set it would still remain hidden behind the main menu.

- Fixed reference only (debug mode) element hierarchy generator where an extra menu item was included in the output.

- Fixed a bug that affected multi-navigation. Basically when you had more than 1 sub level on more than 1 menu item, there would be a mixup.

- Fixed a bug that affected the first menu item. when clicking the first menu item it wouldn’t scale out when scrolling out of view like the others.

- Now the icons reposition themselves when navigating from one submenu to another. This allows the icons to maintain their arc as menu items can vary in number from submenu to submenu.

5/15/2012 Notice: 1.8 (Coming soon)

4/28/2012 Changeset: 1.7

- Fixed small IE bugs.

- Added new online demo page and included with source packages.

- Added support for hash symbols. Now if enableUrlHash is true ( false by default), then when you click on a menu item it’s command will get appended in the url, just like in the new online demo.

04/26/2012 Changeset: 1.6

- When submenu’s expanded the transition was jerky. Fixed.

- Opera mini lost smooth transitions when we upgraded to 1.5. This is fixed now.

- The back button icon used an arrow in 1.5; This doesn’t lend itself too well for rotation effects. To compensate for this we had incremented the rotation, but that wasn’t too good. We now decreased the rotation back to how it was and changed the icon to something much better.

- Documented a debug feature that will print out your menu structure so you can see what your menu’s id’s look like to ease your development efforts. This is documented in the walkthrough.

- Updated the walkthrough.html file found in the home folder to bring to speed with the recent changes.

- Exposed a new method toggleMainButton. This can be combined with the toggleMenuExpansion method.

04/24/2012 changeset 1.5 .

- We now support multi-level submenus.

- The api remains consistent with previous versions.

- Added documentation for multi-level submenus. It’s part of your download in the walkthrough page.

- This is actually quite a big change and the codebase has undergone a partial rewrite. Enjoy!

04/17/2012 Changeset 1.4 .

- Fixed touch bug on handheld devices

- Fixed a bug in the dispose method

- !now proper cleanup is taking place when the menu is disposed of.

04/16/2012 Changeset 1.3 .

- Exposed set_curve(value) public method

- Exposed snap() public method

- At the following location ProjectPathMenusrccompathmenuhome

- !Added an extra demo in index.html that showcases setting the curve pattern of the sub menu items.

- !Added a walkthrough tutorial, making it much easier for end user.

- !Added a demo page which only includes the menu reducing chances for distraction.
04/15/2012 Change set 1.2 .

- Exposed public method : toggleMenuExpansion

- Exposed public method : get_toggleState

- Added code sample in the index file (same as the live preview) to show case how toggleMenuExpansion and get_toggleState can be used.

- Revamped the sample page a little with new fold banner for mobile/desktop devices

04/14/2012 Change set 1.1 : x x x

Path Style Menu.

Keywords: android, css3 transitions, customizable, desktop, handheld, ipad, iphone, menu, mobile, navbar, navigation, rotate, slide, tablet, wp7.

Tags: Navigation, Navbar, Rotate, Mobile, Slide, Tablet

Premium CodeCanyon Path Style Menu 2113415 WordPress Themes, Website Templates, Mobile Themes, Flash Templates & Scripts from creative professional designers. Full details of CodeCanyon Path Style Menu 2113415 for digital design and education. CodeCanyon Path Style Menu 2113415 desigen style information or anything related.


Add Comments:
Enter Code: *