Skip to content
  • Unwatch
  • Fork



SSH clone URL

Subversion checkout URL

You can clone with HTTPS, SSH, or Subversion.

Clone in Desktop Download ZIP
tree: 869f534ade
Fetching contributors…

Cannot retrieve contributors at this time

64 lines (56 sloc) 2.353 kb
<!DOCTYPE html>
<title>Creating interactive expandable boxes using CSS: final example</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
* {font-size: 100%; font-family: "liberation sans", arial, sans-serif; color: black; }
.tran15 {
-webkit-transition: all 1.5s;
-moz-transition: all 1.5s;
-ms-transition: all 1.5s;
-o-transition: all 1.5s;
transition: all 1.5s;
.tran2 {
-webkit-transition: all 2s;
-moz-transition: all 2s;
-ms-transition: all 2s;
-o-transition: all 2s;
transition: all 2s;
#nav { padding: 1ex; border: 2px solid #aaa; background-color: #ccf; margin: 1em; width: 20em; }
#nav:hover { border: 2px solid #ddd; background-color: #eef; }
#nav h2 { display: inline; vertical-align: middle; }
.hide, .show { display: none; font-size: 80%; vertical-align: middle; }
@media all and (min-width:1px) { .hide, .show { display: inline; } }
a.hide:focus + .show { display: inline; }
.show { display: none; }
a.hide:focus { display: none; }
#menu { opacity: 1; height:7em; margin-top: 0em; width: auto; margin-left: -1ex; overflow: hidden; }
a.hide:focus ~ #menu { opacity: 0; height: 0em; }
@media print {
.hide, .show { display: none; }
#nav {position: static; border: none; width: auto;}
#menu {width: auto;}
<h1>Creating interactive expandable boxes using CSS</h1>
<h2 id="ex4">The finished menu</h2>
<p>Here, we've applied height and colour transitions too. The transition for the <code>div</code> is given a two-second duration; the menu's is one-and-a half seconds.</p>
<div id="nav" class="tran2">
<a href="css-menu-ex4.html#" class="hide">[hide]</a>
<a href="css-menu-ex4.html#" class="show">[show]</a>
<ol id="menu" class="tran15">
<li><a href="">A simple SVG audio player</a></li>
<li><a href="">Expo-dock paging in HTML5 and CSS</a></li>
<li><a href="">Bask in my shameless publicity</a></li>
<li><a href="">Have a look at something the world owns!</a></li>
<li><a href="">An awesome browser</a>
Jump to Line
Something went wrong with that request. Please try again.