www.wysiwygwebbuilder.com

[rz] Flat Side Menu v1.2

The most lightweight solution to add modern slidable menu panels in both sides of the page.

Some features:

- Multi-instance in each side and both sides with synchronization.
- Highly customizable; colors, alignments, sizes, patterns, images, opacity level, RWD support and more.
- Both LTR and RTL support (also mixed).
- Full keyboard navigability support.
- Persistent open/close modes between pages.
- Indicates the current page with a different colors set.
- Embeddable objects before and/or after the options menu.
- Options can be links and/or events.
- Custom events for every sequence: 'onopen', 'onopened', 'onslide', 'onclose', 'onclosed'.
- Options and open/close button can have their own tooltips.
- Smart auto-close method.
- Smart centralized "one-scrollbar" when the options do not fit within the available space.
- Can be handled programatically (click on this sample to test both left and right sides).
- Selectable overlay, fade overlay, reveal or auto-reflow modes.
- Custom events/functions calls on open/close/slide sequence.
- Lightweight, no jQuery required.
- Maximum compatibility with other [rz] plug-ins.
- Maximum cross-browser, cross-platform and backward compatibility.

...and many, many more!


HTML 4.01 Transitional
W3C compliant


* New in version 1.2

- Indent effect for the options (hover/push/current statuses).
- Smooth transitions for colors and indent.
- Improved backward focus control compatibility.
- Improved compatibility with [rz] Scrollbar II extension.
- Improved backward compatibility for current page status.

* New in version 1.1

- Added optional hover, push and current-page images to the options (useful for high-contrast schemes).
- Improved open/close button; added optional normal, hover and push images with image/text alignments.
- The open/close button can be disabled or enabled for images, text or both.
- Improved multi-instance handling when accessing with the functions (refer to "Available custom functions" section).
- Improved events handling (refer to "Available custom events functions calls" section).
- New optional smooth screen fade modes; "default" fades the whole screen and "background" fades only the background.
- Fix for a Firefox render bug in reveal mode.
- Improved backward/crossbrowser compatibility for page alignments.

* New in version 1.0.2.2

- Added optional image-size definition to allow a better implementation in Retina-based devices.
- Fixed a sporadic misbehavior of the vertical scrollbar when refreshing the browser in persistent mode menu.
- Improved backward compatibility for the optional smooth screen fade effect.

* New in version 1.0.2.1

- Optional smooth screen fade when the panel is opened with custom opacity level and color.
- New panel mode effect: 'fade overlay'.
- Optional objects activation/deactivation in the selected breakpoint; hidden objects using this feature will not take up place in the layout.
- Improved objects embedding.
- Improved startup.

* New in version 1.0.2

- Improved performance in mobile devices.
- Added support for page with fluid content.
- Added category/folder handling for options without links ("groups of options"-like).
- Optional auto-open feature after a specific time of menu inactivity since the page was loaded.
- Fixed a minor alignment gap in options with no images and no image padding.
- Fixed missing top alignment in options.
- Improved the centralized "one-scrollbar" handling (specially in multi-instance cases vs page contents).
- Improved buttons hidding/showing in multi-instance scenarios.

* New in version 1.0.1.1

- Improved patterns handling.
- Fixed an introduced bug in the menu pattern.

* New in version 1.0.1

- Breakpoint control in which the panel feature is enabled or disabled.


DEMO


How to use?

1. Drag and drop this extension and enter the options menu, this means the links to the available pages in your project.
2. Optionally, you can setup additional properties such as margins, images, colors and a lot of other possible customization options; or leave them as by default.
3. Preview or publish.

Enjoy!


Available custom functions:

You can have your own images, links or any other object that supports events.
The event, usually "onclick", can call the following available functions:

MyMenu.open(); to open the menu.
MyMenu.close(); to close the menu.
MyMenu.toggle(); to toggle the status of the menu panel; if the menu is opened, the panel is closed; if the menu is closed, the panel is opened.

Available custom events functions calls:

onopen: the event is triggered when the open sequence starts.
onopened: the event is triggered when the open sequence has been completed.
onslide: the event is triggered during the opening/closing cycle.
onclose: the event is triggered when the close sequence starts.
onclosed: the event is triggered when the close sequence has been completed.

Great work (as usual) works beautifully on iOS. A must have tool when deigning for mobile sites or even normal sites!

thank you!

NIce work RZ!

thank you colin!

Thanks rz
Great addition to the tools we have available
You work and contributions are greatly appreciated.

thank you cjs for your kind words

I just bought your extension and I cannot get it to "push" the screen on a page that also has your adaptive frame work. It only works as an overlay. Do you know what the problem might be ?

without seeing what you did, no, i cannot know
contact here for support: http://www.magnawebstudio.com/shop

good news: i personally tested them right now and both work together!
both extensions work and manipulate the whole screen contents so may be a z-order issue in your project
to ensure that both work as expected, put the [rz] Flat Side Menu instance over the [rz] Adaptive Framework instance, you can do it easily in the object manager panel
(of course, you must have disabled any page centering in the page properties, and delegate this task to the [rz] Adaptive Framework instance, as it has its own contents aligner)
anyhow, if you still need support, pls get in contact at the above mentioned address
with regards,

(ps: the most important, thank you for support the hard work behind the scenes purchasing the extensions)

THat's great news that they work together. I'll try the Z-order.

I got it to work ! It was the page centering. Never thought of that. Thank you.

yes, this is the main reason, as the adaptive framework has its own page formatting
when it is used alone should not represent any problem, but with the flat side menu the things change a bit, because both of them work "intimately" with the contents so you should let the adaptive framework to do its work

* New in version 1.0.1

- Breakpoint control in which the panel feature is enabled or disabled.

* New in version 1.0.1.1

- Improved patterns handling.
- Fixed an introduced bug in the menu pattern.

* New in version 1.0.2

- Improved performance in mobile devices.
- Added support for page with fluid content.
- Added category/folder handling for options without links ("groups of options"-like).
- Optional auto-open feature after a specific time of menu inactivity since the page was loaded.
- Fixed a minor alignment gap in options with no images and no image padding.
- Fixed missing top alignment in options.
- Improved the centralized "one-scrollbar" handling (specially in multi-instance cases vs page contents).
- Improved buttons hidding/showing in multi-instance scenarios.

* New in version 1.0.2.1

- Optional smooth screen fade when the panel is opened with custom opacity level and color.
- New panel mode effect: 'fade overlay'.
- Optional objects activation/deactivation in the selected breakpoint; hidden objects using this feature will not take up place in the layout.
- Improved objects embedding.
- Improved startup.

* New in version 1.0.2.2

- Added optional image-size definition to allow a better implementation in Retina-based devices.
- Fixed a sporadic misbehavior of the vertical scrollbar when refreshing the browser in persistent mode menu.
- Improved backward compatibility for the optional smooth screen fade effect.

UPGRADE AVAILABLE

* New in version 1.1

- Added optional hover, push and current-page images to the options (useful for high-contrast schemes).
- Improved open/close button; added optional normal, hover and push images with image/text alignments.
- The open/close button can be disabled or enabled for images, text or both.
- Improved multi-instance handling when accessing with the functions (refer to "Available custom functions" section).
- Improved events handling (refer to "Available custom events functions calls" section).
- New optional smooth screen fade modes; "default" fades the whole screen and "background" fades only the background.
- Fix for a Firefox render bug in reveal mode.
- Improved backward/crossbrowser compatibility for page alignments.

* New in version 1.2

- Indent effect for the options (hover/push/current statuses).
- Smooth transitions for colors and indent.
- Improved backward focus control compatibility.
- Improved compatibility with [rz] Scrollbar II extension.
- Improved backward compatibility for current page status.