magna
Follow @magnawebstudio on Twitter Follow @magnawebstudio on Twitter
Follow /magnawebstudio on LinkedIn Follow /magnawebstudio on LinkedIn
awarded site
BS"D
magna web studio
Contact us! Contact us!
WB-Developers' Corner
WB-Developers' Corner
       [rz] Flat Side Menu


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.
- Options and open/close button can have their own tooltips.
- Custom events/functions calls in every sequence: 'onopen', 'onopened', 'onslide', 'onclose', 'onclosed'.
- 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.
- 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


DEMO


* Just a brief about some of the changes that were made lately...

* 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.



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.

How to insert a category?

1. Enter the options you need.
2. Enter a category as you do with normal options but be sure that you have cleared the link-to entry.
3. Move it up/down wherever you need.
4. Optionally, you can setup a different style for categories.


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.

Replace "
MyMenu" with the actual extension instance name.

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.


Enjoy!
w3c compliant
© 2012-17 by MAGNA web studio • all rights reserved


new shop with