New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:

FF2+ IE8+ Opr8+

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.

Demos:


Directions Developer's View

Step 1: Add the below code to the HEAD section of your page:

Select All

This script uses the following external files. Download them below (right click, and select "Save As"):

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:

Select All

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>

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:

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:
  • Inside the menu markup, specifically, its outermost DIV tag.
  • Inside siteviewmenu.css whereever "#siteviewmenu" appears.
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 "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:

 <div id="sideviewmenu">

<ul class="menulinks">
<li><a href="#">Home</a></li>
<li><a href="#">What's New</a></li>
<li><a href="#">Help Forums</a></li>
<li><a href="#">Tools</a></li>
<li><a href="#">CSS Library</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">What's New</a></li>
</ul>

</div>

main_transition_duration: num

defaults 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:
  • 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:

<a href="#" onClick="sideviewmenu.toggle(); return false">Toggle Menu</a>
<a href="#" onClick="sideviewmenu.toggle('open'); return false">Open Menu</a>
<a href="#" onClick="sideviewmenu.toggle('close'); return false">Close 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.