Description: Side Toggle Menu lets you
add a side bar menu to your page that slides in from the left or right
edge of the browser window. It supports two types of unveiling- either
by nudging the rest of the page and making room for itself, or
overlaying the page (and not displacing its neighbours). CSS3
transitions are used to power the animation, ensuring a smooth visual
experience even on low powered mobile devices. And speaking of mobile
devices, the menus are adaptive in that it automatically switches to a
basic drop down menu using a toggle button at the top of the page when
the user's device width is 480px or less (configurable). Finally, the
menus are dismissed when the user clicks anywhere on the page that's
outside the menus, or when clicking on a link inside the menu.
Demos (in windows with max width 480px or less, the
menus change to a drop down box at the top of the page):
This menu's markup is defined inline on the page. With the setting pushcontent: true, the menu shifts the rest of the page's content to make room for itself when revealed.
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"):
Step 2: Then, add the below sample markup to
your page:
That sets up the two demo menus you see on this script.
Read on for details on set up and customization options.
Menu setup
To set up a Toggle Menu, you should first define the
markup for it, either inline on the page, or inside an external file on
the server. Whichever route you take, the markup looks something like
the following:
Notice the part in red- your menu should consist of a DIV
wrapper with an arbitrary but unique ID, plus a CSS class of "sidetogglemenu"
to apply some requisite styles to it (as defined inside sidetogglemenu.css).
What's contained inside the DIV is up to you. As noted, the entire menu markup
can be defined either inline on the page, or inside an external file on the
server (ie: togglemenu.txt).
Once you have the markup of the menu taken care of, call the
function sidetogglemenu() in the HEAD section of your page to
initialize the menu upon document load, such as:
<script>
jQuery(function(){ // on DOM load
menu1 = new sidetogglemenu({ // initialize
first menu example
id: 'togglemenu1',
pushcontent: true // <- No comma after last option!
})
})
</script>
Where "menu1" should be a unique but arbitrary
variable name for each instance of toggle menu on the page, useful when you wish
to refer back to the menu elsewhere on the page.
Now, to the function sidetogglemenu(), which
accepts the following options:
option
Description
id: "id_of_menu"
required setting
The ID of the toggle menu's outermost DIV
(with the menu either defined inline on the page, or externally inside
an external file).
jQuery(function(){ // on DOM
load
menu2 = new sidetogglemenu({ // initialize second menu example
id: 'togglemenu'
})
})
position: "string"
defaults to "left"
Specifies the position of the menu on the
page when it's revealed. Set to either "left" or "right".
pushcontent: Boolean
defaults to true
Boolean that sets whether menu when revealed
should push the rest of the page's content to make room for itself. If
set to false, menu overlays the page instead.
source: "string"
defaults to "inline"
Sets the source of the menu markup. Valid
value is either "inline" if the menu's entire markup is defined on the
page, or if the markup is defined inside an external file on the server,
the full path to that file relative to the current page:
jQuery(function(){ // on DOM load
menu2 = new sidetogglemenu({ // initialize second menu example
id: 'togglemenu2',
position: 'right',
source: 'togglemenu.txt' // <- No comma
after last option!
})
})
revealamt: int
defaults to 0
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 into 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:
jQuery(function(){ // on DOM load
menu1 = new sidetogglemenu({ // initialize second menu example
id: 'togglemenu2',
position: 'left,
revealamt: -10 // -10 assumed to be length of CSS3
shadow
})
})
marginoffset: int
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.
dismissonclick: Boolean
defaults to true
Boolean on whether any revealed toggle
menus on the page should automatically contract when the user clicks
anywhere on the page other than inside the menus themselves.
Inside the menus, clicking on a link will dismiss the menu.
Once a menu is initialized, you can call the public method
toggle() to expand or contract the menu (initially it's always
hidden):
method
Description
toggle(["string"])
Method to call on top of the initialized menu
variable to toggle its visibility. You can pass a string parameter of
either "open" or "closed" to explicitly set the menu's state.
Upon
initializing a menu in the HEAD section of your page:
jQuery(function(){ // on DOM
load
mymenu = new sidetogglemenu({ // initialize second menu example
id: 'togglemenu'
})
})
You would refer to the menu's assigned variable name, in the above
case, "mymenu", to then call toggle() on top
of anywhere on your page to set its state. For example:
<button onClick="mymenu.toggle();"
class="sideviewtoggle">Toggle Menu visibility</button>
<button onClick="mymenu.toggle('open')"
class="sideviewtoggle">Explicitly
show menu</button>
button onClick="mymenu.toggle('closed')"
class="sideviewtoggle">Explicitly
hide menu</button>
IMPORTANT: When calling the toggle()
method via a link or button, you MUST give that link a CSS class
of "sideviewtoggle". This is so the default behaviour
of hiding the menu upon clicking anywhere on the page does not override
the desired action administered by toggle(), as clicking on
a link technically is clicking anywhere on the page. The presence of the
CSS class "sideviewtoggle" tells the script to bypass this
default behaviour and allow toggle()'s behaviour to come
through. Without this class, clicking on such a link would appear to
have no effect.
Configuring the "responsive" aspect of the menu
Side Toggle Menu is a responsive menu in that it's built
to adapt to cases where the user's device width is below a certain
width, such as in the case of a smart phone. In such cases showing a
side menu is counterproductive and obscures too much of the page's
content. The default setting is to react to when the user's device width
is 480px or less (applicable to most smart phones then, but not
tablets). This setting is defined in two places inside the script, which
if you wish to alter you'll need to edit in both places:
var mediabreakpoint = 'screen and
(max-width: 480px)'
Whatever changes you make to the CSS media query string of 1),
that should be reflected in 2), minus the "@media " prefix. You can learn more
about CSS media queries here.
When there is a match of the CSS media query, side toggle menu
is modified to just show a toggle button at the very top of the page. Clicking
on the button expands all of the side toggle menus:
The style of the toggle button and altered toggle menus is
defined under the "responsive menu related CSS" section of
sidetogglemenu.css.
Menu and Navigation 
