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
- .mobilesidemenu nav{} and
- .mobilesidemenu input[type="checkbox"]:checked ~ nav{}
respectively to "right" instead.
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