JS Drop Menu

[unsider]

Alright, currently I'm in need of a drop down menu.

 

Allthough unlike the googled standard, I'm not looking for onMouseHover effect, I'm looking to click on the object, and it remain in it's pullDown state until I click either on the object or elsewhere within the browser.

 

I am very tired, and normally would provide some code for us to work with, but for now I'm going to ask and see if I get some responses, and I might post some tomorrow depending where this goes.

 

If there is a tutorial out there that you could point me towards I'd appreciate that as well.

 

 

[JasonLewis]

Well you can search DynamicDrive and JavaScript Kit. I know of one on Dynamic Drive but it would require some slight modifications for the menu to remain in the pull down state until you click somewhere else. Shouldn't be to hard though.

[obsidian]

Keep in mind that the principle of the dynamic menu is really the same whether you use hover or click for the event. I would recommend you write up a JavaScript class for your menu element to handle all the nuances of the control. Here is a base that should get you started on your way. Keep in mind that the mouseover and mouseout events are handled a little differently in browsers, but what I have here works well in both FF and IE:

 

CSS:

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #454545;
}

#popup {
border: 1px solid #aaaaaa;
padding: 2px;
display: none;
position: absolute;
top: 50%;
left: 50%;
height: 100px;
width: 300px;
margin-top: -50px;
margin-left: -150px;
background-color: #ffffff;
}

#popup p {
border: 1px solid #ffffff;
background-color: #aaaaaa;
padding: 42px 100px;
color: #ffffff;
text-align: center;
margin: 0;
}

 

HTML:

<div id="popup"><p>Hi there!</p></div>
<p><a href="#" id="menu-trigger">Click me!</a></p>

 

JavaScript:

function popup(id, t_id)
{
this.ele     = document.getElementById(id);
this.trigger = document.getElementById(t_id);
this.is_over = false;

var o = this;
this.hide = function()
{
	if (this.is_over == false)
	{
		this.ele.style.display = 'none';
	}
};

this.show = function()
{
	o.ele.style.display = 'block';
};

this.setOver = function()
{
	o.is_over = true;
};

this.setOut = function()
{
	o.is_over = false;
};

this.ele.onmouseover = this.setOver;
this.ele.onmouseout  = this.setOut;
this.trigger.onmouseover = this.setOver;
this.trigger.onmouseout  = this.setOut;
this.trigger.onclick     = this.show;

// Set up to handle any clicks outside our bounds
var x = (document.onclick) ? document.onclick : function() {};
document.onclick = function()
{
	x(); // Any previously assigned click handles -- allows for multiple objects, too
	o.hide();
};
}

var mypopup;
window.onload = function()
{
mypopup = new popup('popup', 'menu-trigger');
};

 

With a little tweaking, you would easily be able to assign this type of object to your menu structure. The nice thing about handling your JavaScript in objects like this is that you would easily be able to assign multiple menu style occurrences within your window.onload assignment simply by adding another object for each.

 

Good luck!