CSS Codes
CSS Layouts
FF2+ IE8+ Opr9+

Responsive Side Toggle Menu

Author: Dynamic Drive

July 21st, 15'- Updated to v1.1,which adds multiple levels UL support inside toggle menu. Any nested ULs inside menu will be automatically transformed into to an accordion.

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 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"):

Step 2: Then, add the below sample markup to your page:

Select All

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:

<div id="togglemenu1" class="sidetogglemenu">

<ul>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.dynamicdrive.com/style/">CSS Library</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Gif Optimizer</a></li>
<li><a href="http://tools.dynamicdrive.com/favicon/">Favicon Creator</a></li>
<li><a href="http://tools.dynamicdrive.com/button/">Button Maker</a></li>
</ul>

//some other menu contents

</div>

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.
downarrowsrc: "image_path"

defaults to "down.png" v1.1 option

 The path (relative to the current page) or full URL to the down arrow image. This image will be used if a toggle menu contains a nested UL inside it, to indicate LI headers that are expandable. The script automatically transforms any nested ULs inside a toggle menu into a collapsible UL accordion.
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.

Nested ULs inside a toggle menu (v1.1+)

Toggle Menu will automatically transform any nested ULs found inside the menu container into a collapsible accordion. This lets you easily add a multi-level UL menu to a toggle menu. Be sure to set the "downarrowsrc" option to properly define the down arrow image path. The style of the sub ULs is defined inside sidetogglemenu.css as follows:

.sidetogglemenu ul ul{ /* Toggle menu sub ULs style */
 border-left: 6px solid darkred;
 margin-left: 5px;
 padding-left: 2px;
 font-size: .9em;
}

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:

1) The CSS media query section of sidetogglemenu.css:

@media screen and (max-width: 480px){
"
"
}

2) Inside sidetogglemenu.css, the "mediabreakpoint" variable:

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.