OK, this pertains to the above header but could easily be adapted for your site to contain either a menu or more content, note if your using it to display a menu you’ll probably want to hide it by default.*
I’ve simply added the following to replace the original static image in my header file.
<a class="trigger" href="#">Is my header giving you headaches? - Click here to close.</a>
<div class="toggle">
<div class="block">
<a href="http://blog.grahamwalker.me"><!-- put expanding/colapsing content here --></a>
</div>
</div>
If you’re adding this code to the file that contains the <head> you might want to add the javascript to the head section at the same time.
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(".toggle").hide(); // add this line to hide by default.
$(document).ready(function(){
$("a.trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("slow");
});
});
</script>
I added some additional CSS code to style the trigger link, adding the anoying blinking. 🙂
a.trigger {
color: #333333;
display: block;
float: right;
font-size: 12px;
height: 30px;
line-height: 35px;
margin: 0;
outline: medium none;
padding: 0 12px 0 0;
text-align: right;
text-decoration: blink;
width: 400px;
}
.toggle {
clear: both;
margin: 0;
padding: 0;
width: 940px;
}
Now you can save and test the page.