Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
CSS Library
Submit an original CSS code
CSS Layouts

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:


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

respectively to "right" instead.

Code Info

Rate this code:

Date Posted: 02/04/2015

Revision History: None

Usage Terms: Click here

Your Comments (0)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Copyright 2006-2015 Dynamic Drive Read our Usage Terms before using any of the CSS codes.