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

This is the most easy and lightweight solution to have a responsive and fixed navigation menu on top of the page.

Some features:

- Custom colors and background patterns.
- Custom opacity level for modern designs.
- Custom slide speed.
- Advanced alignment modes and positions.
- RWD, RTL and fluid support.
- Tooltips in the main panel and its options.
- Embeds objects (useful for logos, etc).
- Smart slide/link behavior.
- Works smoothly with [rz] Preloaded Links.
- Multi-instance (i.e: top and bottom).
- Maximum crossbrowser, crossplatform and backward compatibility.
- No jQuery required.

...and more!

HTML 4.01 Transitional
W3C compliant


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

* New in version 1.1.4

- Improved advanced options alignments/variants.
- Improved uniformity and compatibility when using borders and separators.
- Fixed a sizing issue when using fixed width for the horizontal menu.
- Fixed a slight vertical alignment issue in default position with bottom border in options.
- Fixed an issue formatting/equalizing the vertical image/option list on older browsers and improved cross-browser uniformity.

* New in version 1.1.3

- Optional 'fade while slide' effect for the vertical panel options.
- Improved (and extended) images/options alignments.
- Fixed a misalignment when options are mixed with and without images.
- Improved backward compatibility in 'current page detection'.

* New in version 1.1.2

- Indent effect for the vertical panel options (hover/push statuses).
- Smooth transitions for the indent effect.

* New in version 1.1.1

- Optional smooth context fade-in/out with custom color and opacity when the vertical options are being opened.
- Fixed an unstable backward compatibility issue (missing menubar).
- Fixed minor scroll gaps 'on push contents' on some setups.
- Due to some limitations, the 'within-a-layer' instance feature has been [temporarily?] removed.
- Tweaked code for better performance.

* New in version 1.1

- Optional images for the options with also optional ones for their different statuses.
- Optional images can have eight different positions for the main buttons and two for the slide.
- Optional images can be resized for a better appearance on retina-based devices.
- Extended panel positioning with 'push' effect.
- Horizontal and vertical menus can have their own appearance (icon-based/text-based/both).
- Vertical options have an optional 'equalize' feature that extends the icon/text alignment within its general alignment.
- Improved burger behavior on slower sliding setup.
- Improved logical z-order related to the page elements.
- Improved startup.
- Proprietary events: onopen, onopened, onclose, onclosed, onslide (this improves the interaction with other extensions
  like [rz] PFO and similar).

* New in version 1.0.2

- Instances can be placed on the body page or within layers.
- Added support for instances on [deeply] nested objects (usually layers) and within wb-carousel, jQueryTabs, etc.

* New in version

- Optional sample preview on the workspace.
- Improved optional object embedding.
- Fixed a z-order concordance interacting with some [rz] extensions.

* New in version 1.0.1

- Extended embedded object alignment options.
- Improved compatibility with [rz] PAO and other complex scenarios.

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 alignments, margins, colors,
    backgrounds/patterns and many other options; or leave them as by default.
3. Preview or publish.

Custom events:

onopen: Called when the burger button starts the open sequence.
onopened: Called when the open sequence has been completed.
onclose: Called when the burger button starts the close sequence.
onclosed: Called when the close sequence has been completed.
onslide: Called on every step of the open/close sequence.

w3c compliant
© 2012-20 by MAGNA web studio • all rights reserved

new shop with