Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:


FF2+ IE8+ Opr8+

Side Push Menu

Author: Dynamic Drive

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.

Demo (To the left of the page).

Toggle Menu Open Menu Close Menu


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="contentwrapper">

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

</div>

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 "contentwrapper"

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>

 

Customizing the "floating" menu toggler

The "floating", fixed menu toggler that appears 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.

Customizing the "floating" menu toggler

Additional Menu styling

Tjhe bulk of the menu styling is done directly inside pushmenu.css, 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.