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

CSS Library: Vertical CSS Menus: CSS3 demos: Here

Mobile full screen expand menu

Author: Dynamic Drive

Full screen menus are quite the rage these days, as they work out of the box across devices big and small with their large footprint. This mobile full screen menu expands itself to fill the whole page when activated, using the popular CSS checkbox adjacent sibling technique to toggle the menu between open and closed when the drawer style toggler is clicked on. The menu works across all modern browsers and mobile devices, while in IE8, a more limited interface is presented that's at least functional for those users.

Arbitrary Open Menu link
Arbitrary Close Menu link
Arbitrary Toggle Menu link

The CSS:

The HTML:

The menu comes with a companion JavaScript function that lets you toggle the state of the full screen menu beyond the built in interface, from anywhere on the page as you see fit. Just call the function:

expandfullscreenmenu(action)

with the "action" parameter being one of the following three choices: "open", "close", or empty. When called with no (or empty) parameter, the function will toggle the state of the full page menu. Here's an example:

<a href="#" onClick="expandfullscreenmenu()">Arbitrary Toggle Menu link</a>

Code Info

Rate this code:

Date Posted: 04/29/2015

Revision History: May 4th, 2015: Fixed issue with menu not opening in Safari 5.1x on PC

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.