Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library

CSS Library: Vertical CSS Menus: Here

Mobile side menu

Author: Dynamic Drive

This is the classic mobile side menu that slides in from the edge of the window when a toggler is clicked on, dominating everything else with an overlay that obscures the rest of the page. A hidden checkbox element plus numerous LABEL elements for toggling its state are employed to in turn show/hide the menu plus the overlay by clicking on them. The entire effect is powered using CSS, with the exception in IE8 and below, where it's activated with a little help from JavaScript instead due to those browsers' lack of support of key CSS features.

The CSS:

The HTML:

Refer to the comments inside the CSS to customize the menu. You can easily modify the menu from a "left reveal" to "right reveal" by changing the "left" property inside

  •  .mobilesidemenu nav{} and
  •  .mobilesidemenu input[type="checkbox"]:checked ~ nav{}

respectively to "right" instead.

Code Info

Rate this code:

Date Posted: 02/04/2015

Revision History: Jan 25' 16': Updated code to fix menu in Chrome iOS.

Usage Terms: Click here

Your Comments
Copyright 2006-2016 Dynamic Drive