Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library

CSS Library: DIVs and containers: CSS3 demos: Here

Pure CSS3 Push Down Panel

CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design). CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices. -Wikipedia

Resources: DD CSS Library, CSS Drive, JavaScript Kit.

Author: Dynamic Drive

This is a CSS3 push down panel that when clicked on reveals some content, pushing the rest of the page's content down in the process. The entire interface is created using CSS only, using a combination of CSS3 shadows, round borders, and CSS2 generated content. To toggle the panel's display state, we employ the classic invisible checkbox technique; when the checkbox is checked, we expand the content DIV using the :checked pseudo class and sibling selector:

div.css3droppanel input[type="checkbox"]:checked ~ div {
height: 250px;
opacity: 1;
overflow: auto;

And before you think CSS3 Push Down Panel is only experimental, it works in all modern browsers- IE9, FF, Chrome, Safari, Opera etc. In IE8 and below, the Panel is simply hidden.

The CSS:


Code Info

Rate this code:

Date Posted: 10/26/2012

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

Usage Terms: Click here

Copyright 2006-2016 Dynamic Drive