Page Sideview Menu

Author:Dynamic Drive

Description: This menu displays itself
prominently on the page with the help of css3 transforms and
transitions. The menu glides in from the left edge of the screen while
shrinking the rest of the page content into the background, bringing the
user's focus squarely on the menu itself. Clicking anywhere on the page
again hides the menu and returns the page back to its original state.

The
menu works across all major browsers and platforms, including IE8+ and mobile
browsers. In browsers that don’t support CSS3, a fall back animation is used instead to
reveal the menu.

IMPORTANT: Your page should carry the META tag <meta name="viewport"
content="width=device-width"> in the HEAD section of your page to ensure
the best mobile experience with this menu.
This
META tag instructs mobile browsers not to zoom out when rendering the
webpage by default, which can lead to the menu appearing too small to start.

More Information

When the menu script is initialized, it automatically
wraps the entire BODY contents with a <div id="contentwrapper">
element, with the exception of the menu markup.

The entire menu contents by default is defined inside an
external file (ie: "menucontents.txt") and
fetched via Ajax. You can choose to define the menu inline on the page instead
if you prefer (just configure the "menusource" option below. Below
shows the markup for the menu:

You're free to modify the contents of the menu as desired, though it
should carry an ID attribute of "sideviewmenu"; if you must change
this value, be sure to do the same for the "menuid" option of the script, plus
inside "siteviewmenu.css". The CSS class "menulinks"
should be retained if you wish to have the LI links inside it slide into view,
as dictated by the CSS inside "siteviewmenu.css".

Calling the sideviewmenu() function

To initialize the script, you need to call sideviewmenu() in
the HEAD section of your page, after the Document DOM has loaded. At its bare
minimum here's how that would look:

Sets the source of the menu markup, which can
either be the path to the external file on your server containing the
markup, or a value of "inline" if the markup is simply defined inline on
the current page.

The default setting is "menucontents.txt", which will
have the script look for such a file in the current directory (relative
to the current page) for the menu's markup. If you set the value to
"inline" instead, be sure to define the menu markup directly on the
current page. Either way, the menu markup looks something like the
following:

Sets the duration of the "first stage"
animation, when the BODY content is scaled down, in seconds.

menu_transition: {duration: num, delay: num}

defaults to {duration: 0.4, delay: 0.4}'

Sets the duration of the "second stage"
animation, when the left hand menu is revealed. The duration
setting sets the duration of the animation, and the delay
setting the amount of delay before the animation starts. Both are in
seconds.

Configures the animation on the selected UL
list inside the menu, to animate each LI element within into view. The
four settings are:

listclass: The CSS class of the UL element inside the menu
you wish the script to animate into view. Defaults to "menulinks".

duration: The duration of the animation of each LI element
within the UL, in seconds.

basedelay: The delay in seconds before the very first LI
element is animated into view., or the base delay shared by all LI
elements inside the UL.

delay: Sets the delay between animation of each of the LI
elements. For example, a value of 0.3 means a o.3 second delay between
the first LI and 2nd LI showing, and so on.

onopenclose:function(state){}

A custom event handler that fires whenever
the menu is fully revealed or fully closed. The parameter state
lets you probe the state of the menu, and returns the two possible
values "open" or "closed".

Method

sideviewmenu.toggle([state])

Once sideviewmenu() is called,
the toggle() method on top of it becomes available to allow
you to toggle the state of the menu from anywhere on your page. The
state parameter if left undefined toggles the menu state,
while a value of "open" or "close" does as the
value suggests. The following three links control the state of the
menu:

Styling the Menu

All visual aspects of Page Sideview menu is defined inside
siteviewmenu.css, from the scale-down degree
of the BODY content to the width of the side view menu, its background
etc. Simply refer to the comments inside the .css file to modify the
desired aspect of the menu.