Slide a Div Up From the Bottom of the Page

Sliding down/up from an element is easy, but I had a menu at the bottom of the page, and I wanted a hidden menu to slide up from the bottom of the page, encompass the whole page, and then slide back down when it was time for it to hide.  I tried quite a bit of stuff using the usual jquery slideUp and slideDown functionality, but couldn\’t seem to get it to work the way I wanted to.  Luckily it was pretty easy just to write the functionality to accomplish the desired effect:

function MenuSlideUp(e) {
	e.preventDefault();

	var container = $("#mobile-menu-full");
	var wdwHeight = $(window).height() + \'px\';

	if (container.is(":visible")) {
		container.animate({
			top: wdwHeight
		}, 500, function () {
			$(\'body\').css({ overflow: \'initial\' });
			container.hide();
		});
	} else {
		container.css({ top: wdwHeight }).show().animate({
			top: 0
		}, 500, function () {
			$(\'body\').css({ overflow: \'hidden\' });
		});
	}
}

The $(\’body\’).css({ overflow: \’hidden\’ }); just makes it so that the main content of the page doesn\’t scroll when the newly shown menu appears and the user may be scrolling around within it.