Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library
CSS Layouts
Web Graphics
Online Tools:
Sponsored

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.

Demo:

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

respectively to "right" instead.

Code Info

Rate this code:

Date Posted: 01/19/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 2015 Dynamic Drive Read our Usage Terms before using any of the CSS codes.