Back to CSS Tips
Preview: what the working site looks like.
header stuff here
menu stuff goes in here
Menu
footer stuff here
The markup
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>       
    <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>
    <!--container--></div>  
</body>
</html>
        
The CSS
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 {
	line-height:50px;
	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">
                        $(document).ready(function(){
                            $(".button").click(function(){
                                $("#panel").slideToggle("slow");
                                $(this).toggleClass("active"); return false;
                            });
                        });
                    </script>
		
The arrow image
arrow