Back to CSS Tips
Preview: what the working site looks like.
header stuff here
menu stuff goes in here
footer stuff here
The markup
<!doctype html>
<meta charset="utf-8">
<title>Untitled Document</title>
    <div id="container">
        <header>header stuff here</header>
                <div id="panel">
                    menu stuff goes in here
                <!--end panel--></div>
            <a href="#" class="button">Menu</a>
        <footer>footer stuff here</footer>
html, body {
	margin: 0;
	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #000;
	background: #fc6;
#container {
	width: 600px;
	margin: 30px auto;
	background: #cc9;
header {
	height: 150px;
	background: #366;
#panel {
	text-align: center;
	color: #fff;
	display: none;
	background: #754c24;
	.button {
		line-height: 25px;
		margin: 0 auto;
		display: block;
		background: url(images/white-arrow.gif) no-repeat right -50px;
		color: #fff;
		text-decoration: none;
		outline: none;
		.active {background-position: right 12px;}
footer {
	height: 25px;
	margin: 300px 0 0 0;
	background: #363;
The jQuery/JavaScript
<script type="text/javascript">
                                $(this).toggleClass("active"); return false;
The arrow image