DIV slide down from top of page

I need a snippet of code (xhtml/css/js/ajax) that will allow a div to slide down from the top of the page as shown in the example screenshots I've attached.

This is for a personal blog. The div will eventually contain the basic nav. The design I've built is xhtml/css validated.

I just need the div to slide down (using ajax I think would be coolest) over the existing content when the tab is clicked and to slide back up when toggled.

There are a bunch of js/ajax libraries that can do such things, but it is beyond me.

## Deliverables

1) Complete and fully-functional working program(s) in executable form as well as complete source code of all work done.

2) Deliverables must be in ready-to-run condition, as follows (depending on the nature of the deliverables):

a) For web sites or other server-side deliverables intended to only ever exist in one place in the Buyer's environment--Deliverables must be installed by the Seller in ready-to-run condition in the Buyer's environment.

b) For all others including desktop software or software the buyer intends to distribute: A software installation package that will install the software in ready-to-run condition on the platform(s) specified in this bid request.

3) All deliverables will be considered "work made for hire" under U.S. Copyright law. Buyer will receive exclusive and complete copyrights to all work purchased. (No GPL, GNU, 3rd party components, etc. unless all copyright ramifications are explained AND AGREED TO by the buyer on the site per the coder's Seller Legal Agreement).

## Platform

I would like it as cross-browser compatible as possible. Must work on the newer/modern browsers. Since this is just for me I don't really care too much about the older browsers. :)

CSS Engineering MySQL PHP Software Architecture Software Testing XML

Project ID: #2820928

About the project