FF2+ IE8+ Opr8+

Side Push Menu v1.1

Author: Dynamic Drive

Note (Nov 3rd, 14'): Upgraded to v1.1, which adds an animated drawer button to default code, plus fixes couple of minor bugs.

Description: This is the emblematic menu of the mobile web era- it's a side bar menu that when opened pushes aside the rest of the page's content horizontally, similar to the navigation menu found on Facebook Mobile. It supports either a left or right orientation, with the contents of the menu optionally pulled from an external file on the server.  It employs CSS3 to create the animation; for browsers that don't support it such as IE8, simply no animation will be used.

By default two means of toggling the push menu is present- a floating, fixed gray button that appears on the left edge of the page, plus a blue "animated" drawer button that can be placed anywhere on the page. Either can be customized or removed altogether to make way for your own custom control instead (see below).

Demo (To the left of the page).

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: Wrap your entire page contents inside the following DIV in red. This is necessary so the script can shift the page horizontally when the menu is revealed:

<div id="pushcontentwrapper">

 Your page contents here...
 Your page contents here...
 Your page contents here...

</div>

Then, to use the blue, animated drawer button as seen in the demo above to toggle the menu, add the below markup anywhere within your page's content inside the red DIV above where you want the button to appear:

<a id="drawer" class="animateddrawer toggleitem" href="#" onClick="menu1.toggle(); return false">
<span></span>
</a>

Step 3: Then finally, insert the menu markup into the BODY of your page, as a direct child of the BODY element and outside the wrapper DIV:

Select All

If you so wish, you can move the code of Step 3 into an external .htm file and have the script dynamically insert this markup onto your page via Ajax. More info on this below.

More Information

Calling the pushmenu() function

To initialize the script, you need to call pushmenu() 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
  var menuvar = pushmenu({ // call pushmenu() function
   id: "menuid"
})

This function supports the following list of options:

Option Description
id: "string"

Required

 The ID of the menu <nav> container:

jQuery(function(){ // on DOM Load
  var menu1 = pushmenu({
   menuid: 'pushmenu1'
 })
})

 
position: "left|right"

defaults to 'left'

 The orientation of the menu, whether it should appear on the left or right side of the page. This also effects where the menu toggler appears.
source: 'inline | path'

defaults to 'inline'

 Sets the source of the menu markup, which can either be the path to the external file on your server containing the markup (ie: 'mymenu.txt'), or a value of 'inline' if the markup is simply defined inline on the current page (default). With the former setting, your initialization code looks something like the following:

jQuery(function(){ // on DOM Load
  var menu1 = pushmenu({
   menuid: 'pushmenu1',
   position: 'left',
   source: 'mymenu.txt'
 })
})

The markup for the menu in either case should be a <nav> element with an unique ID attribute, such as:

<nav id="pushmenu1" class="pushmenu">

<h2>Navigation</h2>

<div class="closebutton fa fa-times" title="Close Menu"></div>

<ul class="mainnav">
<li><a href="#"><i class="fa fa-bolt"></i> Dynamic Drive</a></li>
<li><a href="#"><i class="fa fa-css3"></i> CSS Library</a></li>
<li><a href="#"><i class="fa fa-comment-o"></i> Help Forums</a></li>
<li><a href="#"><i class="fa fa-search"></i> Search</a></li>
<li><a href="#"><i class="fa fa-icon-rss"></i> Gif Optimizer</a></li>
<li><a href="#"><i class="fa fa-gears"></i> Favicon Creator</a></li>
</ul>

<h2>Share It</h2>

<p style="padding: 10px">Follow us on Twitter or via RSS feed!</p>

</nav>
pushcontent: true/false

defaults to true

 Boolean variable on whether the menu should push aside the rest of the page's content when expanded. if set to false, it will overlap the contents.
fxduration: number

defaults to 100

 Sets the duration of the open/close animation, in milliseconds.
wrapperid: "string"

defaults to "pushcontentwrapper"

 The ID of the DIV that wraps around the entire page content, enabling the menu to shift the page when it's expanded. This value typically does not need to be modified unless the default value conflicts with another element's ID attribute on your page.
marginoffset: number

defaults to 0

 This option lets you apply an additional margin between the menu and the rest of the page's content when the menu is revealed. It's useful when your page doesn't contain much margin or padding by default, in which the menu would appear flush against the page's content when expanded. You can give the menu more breathing room visually by setting  marginoffset to a positive value (px unit assumed) in this case, creating additional margin between the menu and the page's content while the menu is visible.
revealamt: number

defaults to -8

 Sets how much of the menu should initially "stick out" when the page loads. A positive number (in pixels) will cause part of the menu to be visible on the page from the onset, while a negative number tucks the menu farther inside the edge of the browser window.

One reason to utilize this option and set it to a negative value is when you've defined a shadow (using CSS3 box-shadow) on the menu, which adds to the menu's width. In this case, to fully conceal the menu, you'll want to set revealamt to negative width of the shadow.
dismissonclick: true/false

defaults to true

 Boolean variable on whether the menu should close when the user clicks on anywhere outside the menu, on top of the "close" button embedded inside it.
curstate: "open|closed"

defaults to "closed"

 Controls the initial state of the menu. Set it to "open" to have the  menu open by default.
onopenclose:function(state){

}

defaults to empty function

 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  
pushmenuinstance.toggle([state]) Toggles the state of a horizontal push menu. Call this method on top of the variable you used when initializing the menu, for example:

jQuery(function(){ // on DOM Load
  var menu1 = pushmenu({
   menuid: 'pushmenu1',
   position: 'right'
 })
})

The user defined variable in red above allows you to reference the menu outside the initialization code. Then to utilize the toggle() method, you'd call menu1.toggle(). The state parameter when left undefined toggles the menu state, while a value of "open" or "closed" does as the value suggests.  The following three links control the state of the menu:

<a href="#" onClick="menu1.toggle(); return false" class="toggleitem">Toggle Menu</a>
<a href="#" onClick="menu1.toggle('open'); return false" class="toggleitem">Open Menu</a>
<a href="#" onClick="menu1.toggle('closed'); return false" class="toggleitem">Close Menu</a>

Demo: Toggle Menu Open Menu Close Menu

See below for more details.

Creating custom toggle buttons for the push menu

To create customized buttons that open/ close or toggle your push menu, simply create the desired markup first, then do the following:

  • Give the button a CSS class of "toggleitem" on top of any existing class you wish to assign to the button. If your button has multiple CSS classes, just separate each with a space (ie: class="mybutton toggleitem"). The "toggleitem" class is to inform the script that this markup will be acting as a menu toggler, so clicking on it won't close the menu as clicking anywhere on the page will by default.

  • Call the method pushinstance.toggle() inside the button via a onClick event handler typically to complete the button.

Customizing the  fancy animated drawer button

The code that you add to your page by default comes with an animated drawer button to toggle the state of the demo menu.  The button's markup is as follows:

<a id="drawer" class="animateddrawer toggleitem" href="#" onClick="menu1.toggle(); return false">
<span></span>
</a>

We give this button an arbitrary but unique ID attribute, plus two specific CSS classes to style it and indicate that this is a menu toggler, respectively. To modify the style of this button, edit the class ".animateddrawer" inside pushmenu.css.

Whenever the menu is opened, the button is given a CSS class of ".open", with this class removed when the menu is closed. This is realized by making use of the onopenclose() event handler inside the initialization code of the script:

menu1 = new pushmenu({ // initialize menu example
 menuid: 'pushmenu1',
 position: 'left',
 marginoffset: 0,
 revealamt: -8,
 onopenclose:function(state){ // add /remove "open" class to drawer button based on menu state
  var $buttonref = $('#drawer') // reference the drawer button
  if (state == 'open')
   $buttonref.addClass('open')
  else
   $buttonref.removeClass('open')
 }
})

Inside onopenclose() we reference the animated button by its ID, then proceed to add or remove the ".open" class based on the menu's state. The actual magic of animating the button happens inside inside pushmenu.css, by defining a ".animateddrawer.open" class with the final animation style and using CSS3 transitions to transition between the two states.

Customizing the "floating" menu toggler

The "floating", fixed menu toggler that appears by default on either the left or right edge of the browser window is defined inside pushmenu.js as a variable:

var menutoggler = '<div class="menutoggler" title="Open Push Menu"><i class="fa fa-bars"></i></div>'

with additional styling for it done inside pushmenu.css. The nested <i> element inside it renders the  folder icon look, courtesy of Font Awesome.

If you wish to disable the floating toggler from appearing, just set the menutoggler variable to an empty string ("").

Additional Menu styling

Tjhe bulk of the menu styling is done directly inside pushmenu.css, specifically, the .pushmenu class, from the width of the menu to its various colors. See the comments inside the file for guidance on where to edit.

Font Awesome is deployed again to create the the "close" button, plus  the list icons you see alongside each LI element, inside the menu markup. Here is a snippet for both:

<div class="closebutton fa fa-plus-circle" title="Close Menu"></div>
"
"
<li><a href="http://www.dynamicdrive.com/"><i class="fa fa-bolt"></i> Dynamic Drive</a></li>

Refer to Font Awesome to see the full list of icons you can use and their corresponding CSS class names.