Bottom Menu Drawer

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

by oktaviardi pratama

HTML

<div id="menuSlideContainer">
    <div id="menuSlideButton"><center><div class="pad">CLICK</div></center></div>
	<div id="menuSlideContent">
		<div id="menuSlidePad">
			<h1>Hey! This is Shane's Custom Sliding Menu...</h1>
		</div>
	</div>
</div>

CSS

#menuSlideContainer {
	position: fixed;
	bottom:0;
	width: 100%;
}
#menuSlideButton {
	background: url(sliderButton.png) top left no-repeat #ccc;
	position: absolute;
	top: -40px;
	right: 40%;
	width:20%;
	height:40px;
	border: none;
	cursor: pointer;
}
#menuSlideButton .pad { padding: 10px; }
#menuSlideContent {
	width: 100%;
	height: 0px;
	background: #251b15;
	color: #CCCCCC;
	font-size: 0.8em;
	border: none;
	font-family: DejaVuSansBook, Sans-Serif;
}
#menuSlidePad {
	padding: 25px;
}

JavaScript

$(function() {
	var open = false;
	$('#menuSlideButton').click(function() {
		if(open === false) {
			$('#menuSlideContent').animate({ height: '300px' });
			$(this).css('backgroundPosition', 'bottom left');
			open = true;
		} else {
			$('#menuSlideContent').animate({ height: '0px' });
			$(this).css('backgroundPosition', 'top left');
			open = false;
		}
	});		
});