Bottom Menu Drawer

Menu with tab that pulls up from the bottom of the page.

by James

HTML

<div id="footerSlideContainer">
    <div id="footerSlideButton"><center>HERE</center></div>
	<div id="footerSlideContent">
		<div id="footerSlideText">
			<h3>Hey! I'm a Sliding Footer</h3>
			<p>What's a Sliding Footer? Well I'm a cool little element which can be hidden from view, and revealed when the user wants to see me.</p>
			<p>What can you use me for? Well look at all this stuff:</p>
			<ul>
				<li>Sales information</li>
				<li>Important updates</li>
				<li>Unobtrusive about panel</li>
				<li>Or just a good ol' footer</li>
			</ul>
			<p>There are obviously many other uses, but these are the few useful ones I can think of.</p>
		</div>
	</div>
</div>

CSS

#footerSlideContainer {
	position: fixed;
	bottom:0;
	width: 100%;
}
#footerSlideButton {
	background: url(sliderButton.png) top left no-repeat #ccc;
	position: absolute;
	top: -55px;
	right: 20px;
	width:50px;
	height:50px;
	border: none;
	cursor: pointer;
}
#footerSlideContent {
	width: 100%;
	height: 0px;
	background: #251b15;
	color: #CCCCCC;
	font-size: 0.8em;
	border: none;
	font-family: DejaVuSansBook, Sans-Serif;
}
#footerSlideText {
	padding: 15px 10px 25px 25px;
}

JavaScript

// Use 'jQuery(function($) {' for inside WordPress blogs (without quotes)
$(function() {
	var open = false;
	$('#footerSlideButton').click(function() {
		if(open === false) {
			$('#footerSlideContent').animate({ height: '300px' });
			$(this).css('backgroundPosition', 'bottom left');
			open = true;
		} else {
			$('#footerSlideContent').animate({ height: '0px' });
			$(this).css('backgroundPosition', 'top left');
			open = false;
		}
	});		
});