Creating a js drop down menu...

[MrAdam]

hi, can anyone explain HOW to actually go about making a js drop down menu.. much like the "Forum Options" on this forum...i know javascript pretty well now, but i've tried myself and i just couldn't figure out the way of doing it..- Thanks

[Chocolate570]

Well, they're quite complex to get cross-browser. It's easier to use a readymade one, or make one out of CSS.But if that's not an option, then I guess you could retrieve the position of the element clicked on (like an a) and create a new element with a relative position and position it underneath the a element.

[MrAdam]

thanks chocolate, but i've managed to get that far now. i have this function:

function rosterList() {	if(!document.getElementById('list')) {		var listBox = document.createElement('div');		listBox.id = 'list';		listBox.style.width = '100px';		listBox.style.backgroundColor = '#30363D';		listBox.style.borderTop = '1px solid #C2D2E0';		listBox.style.borderBottom = '1px solid #1C1F22';		listBox.style.borderLeft = '1px solid #1C1F22';		listBox.style.borderRight = '1px solid #1C1F22';		listBox.style.color = '#f1f1f1';		listBox.style.fontFamily = 'Ms Sans Serif, Arial';		listBox.style.fontSize = '12px';		listBox.style.position = 'absolute';		listBox.style.top = '135px';		listBox.style.left = document.getElementById('headTbl').offsetLeft+411+'px';		listBox.style.padding = '2px';					listBox.innerHTML = ' ... my menu ... ';		   		document.body.appendChild(listBox);	}}

.. and to run it i have an image on the nav menu i created with an "onClick" to run the function.it works perfect to display the menu, but what i am now trying to do is create a function, so that when i click off the menu it dissapears.- any idea how i should do that?thanks

[Chocolate570]

Sure. :)When you're creating the menu element, put an "onmouseout" statement on it. Make it so that when the mouse goes out, the display of the element is set to none (this.style.display='none'). Then, next time the image is clicked, check if the element has already been created. If it has, then just set the display to inline, or whatever. :)Choco

[MrAdam]

hmm.. problem is, i've made it so when you click the nav image, it appears directly below it, so where would i put the "onmouseout"; cos if i put it on the image it will be hidden as soon as someone tries to mouse over the menu... and im not sure how to do it in the create element part of the javascript.- thanks for the help btw

[Chocolate570]

Like this:

function rosterList() { if(!document.getElementById('list')) { var listBox = document.createElement('div'); listBox.id = 'list'; listBox.style.width = '100px'; listBox.style.backgroundColor = '#30363D'; listBox.style.borderTop = '1px solid #C2D2E0'; listBox.style.borderBottom = '1px solid #1C1F22'; listBox.style.borderLeft = '1px solid #1C1F22'; listBox.style.borderRight = '1px solid #1C1F22'; listBox.style.color = '#f1f1f1'; listBox.style.fontFamily = 'Ms Sans Serif, Arial'; listBox.style.fontSize = '12px'; listBox.style.position = 'absolute'; listBox.style.top = '135px'; listBox.style.left = document.getElementById('headTbl').offsetLeft+411+'px'; listBox.style.padding = '2px'; listBox.innerHTML = ' ... my menu ... '; listBox.onmouseout = 'this.style.display="none"'; document.body.appendChild(listBox); }}