Page Sideview Menu
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.
Demos:
Directions
Step 1: Add the below code to the HEAD section of your page:
This script uses the following external files. Download them below (right click, and select "Save As"):
- sideviewmenu.js
- sideviewmenu.css
- menucontents.txt (external file where menu markup is defined)
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.
Step 2: Then, add the below sample "toggler" anywhere on your page to toggle the menu's appearance:
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:
<div id="sideviewmenu">
<ul class="menulinks">
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="http://www.dynamicdrive.com/new.htm">What's New</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Help Forums</a></li>
<li><a href="http://tools.dynamicdrive.com">Tools</a></li>
<li><a href="http://www.dynamicdrive.com/style/">CSS Library</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
</ul>
</div>
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:
jQuery(function(){ // on DOM Load
sideviewmenu() // call sideviewmenu() function
})
The sideviewmenu() function supports
| Option | Description |
menuid: "string"defaults to 'sideviewmenu' |
The ID of the menu DIV container. It defaults
to "sideviewmenu". If you wish to change this value, be sure to do the
same in the following two places as well:
|
menusource: "string"defaults to 'menucontents.txt'' |
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 " <div id="sideviewmenu"> |
main_transition_duration: numdefaults to 0.3 |
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. |
list_transition: {listclass: 'string',
duration: num, basedelay: num, delay: num}defaults to {listclass: 'menulinks', duration: 0.5, basedelay: 0.4, delay: 0.3} |
Configures the animation on the selected UL
list inside the menu, to animate each LI element within into view. The
four settings are:
|
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:<a href="#" onClick="sideviewmenu.toggle();
return false">Toggle Menu</a> |
The following uses some of the above options to form the initialization code for Page Sideview menu (defined in the HEAD section of your page):
jQuery(function(){ // on DOM Load
sideviewmenu({ // call sideviewmenu() function
menusource: 'inline',
main_transition_duration: 0.4,
onopenclose:function(state){ // state is either "open" or "closed"
if (state == 'open')
alert('Menu is now open')
}
})
})
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.