Slider (like drop down menu) - How to change direction of slide?

[dinos93]

Hey Guys,
I'm new here on the forum and I've asked this question in other places but no one can seem to answer it. I found a script that is a slideout menu, which I made to open onClick. I wanted to know how I could change the direction of the box. Kind of like a "drop-up" menu if you will. I do not have much Javascript experience (though I am slowly trying to learn).

(Alternatively, if someone could figure out how this works, or make something like it, it would be unbelievable. (At the bottom of the page there is a menu that slides open when the mouse is hovered over it. I am currently working on a site that this would be perfect for. ) Thank you so much!
Here is the script..

var Hide = "";
var varHt = "";
var Ht = "";
var x = 0; // On/Off switch. 0 = off. 1 = on.  Keep it at 0.
var y = 10; // Milliseconds.  This is explained farther down.
var z = 1; // Pixel increments.  This is explained farther down.
var foo = new Array();
var Speed = "";

function setup() {
	// These lines allow you to name your <div> whatever you want, extracting your name for use in the rest of the script.
	foo = document.getElementsByTagName("div");
	Hide = foo[0].id;
	
	// These lines set a couple variables to the height of the hidden object by finding the object's height on-the-fly.
	Ht = document.getElementById(Hide).offsetHeight;
	varHt = Ht;
	
	Speed = Hide.substring(Hide.lastIndexOf('-')+1); // This line extracts the speed you set in your <div> ID.
	
	// These lines hide the object by giving it a negative margin equal to it's height.
	document.getElementById(Hide).style.marginTop = '-'+document.getElementById(Hide).offsetHeight+'px';
	document.getElementById(Hide).style.height = document.getElementById(Hide).offsetHeight+'px';
	
	document.getElementById('toggle').style.display = "inline"; // This line makes the toggling mechanism visible.  It should be set to display:none within your style sheet by default, so it does not show up on the page when someone is browsing with JavaScript disabled or unavailable.

	// This series of statements sets parameters necessary for the toggle() function to determine show/hide speed.  y equates to milliseconds and z equates to pixel increments.
	if (Speed == 1) { y = 100; z = 1; }
	if (Speed == 2) { y = 70; z = 1; }
	if (Speed == 3) { y = 40; z = 1; }
	if (Speed == 4) { y = 20; z = 1; }
	if (Speed == 5) { y = 10; z = 1; }
	if (Speed == 6) { y = 10; z = 2; }
	if (Speed == 7) { y = 10; z = 4; }
	if (Speed == 8) { y = 10; z = 7; }
	if (Speed == 9) { y = 10; z = 10; }
}

function toggle() {
	if (x === 0) { // If the script detects the element is hidden...
		document.getElementById(Hide).style.marginTop = "+"+varHt+"px"; // Sets the element's negative margin, initially to be equal to its height.
		if ((varHt < z) && (varHt !== 0)) {  // If the nagetive margin is less than the pixel increment of each jump, and if it is not equal to 0...
			varHt = 0; // ...make the negative margin equal to 0.  The sliding effect is complete.
		} else {
			varHt = varHt-z; // Reduces the negative margin by the pixel increment specified by z.
		}
		if (varHt >= 0) { // If the negative margin is greater than 0 (read: if any of the hidden div is still hidden)...
			setTimeout('toggle()',y); // ...do this operation again, waiting y milliseconds before doing so.
		}
		if (varHt < 0) { // If for some reason the nagative margin pops into the positive realm...
			varHt = 0; // ...set it to 0.
			x = 1; // Sets a marker that tells the script that the hidden element is now showing.
		}
	} else { // The script detected x was set to something other than 0, meaning the toggle should be used to hide the object in question, not show it.  Therefore...
		document.getElementById(Hide).style.marginTop = "-"+varHt+"px"; // Sets the element's negative margin, initially equal to 0, but will increment shortly.
		varHt = varHt+z; // Adds negative margin at a rate equal to z.
		if (varHt <= Ht) { // As long as the negative margin is less than or equal to the height of the element...
			setTimeout('toggle()',y); // ...do this operation again, waiting y milliseconds before doing so.
		}
		if (varHt > Ht) { // If the negative margin exceeds the height of the object...
			varHt = Ht; // ...make the variables equal, to they're ready to toggle again...
			document.getElementById(Hide).style.marginTop = "-"+varHt+"px"; // ...and make certain the negative margin and height of the hide/show object are the same.
			x = 0; // Sets a marker that tells the script that the hidden element is now hidden.
		}
	}
}

[dinos93]

I apologize, I forgot to include the link for the slider menu that I wanted to know if anyone could figure out.
https://partner.microsoft.com/US/partner
It was made by a little company called Microsoft.